如何在 css 中做事(1)

📌 相关文章

📜 如何在 css 中做事(1)

📅 最后修改于: 2023-12-03 15:08:35.526000 🧑 作者: Mango

如何在 CSS 中做事

CSS 是网页开发中必不可少的一部分。它可以给网页添加样式、布局和交互效果，让网页更加美观和易于操作。本文将向程序员们介绍如何在 CSS 中做事。

选择器

选择器是 CSS 中一个重要的概念。它用于选择 HTML 中的元素并为其添加样式。常见的选择器包括：

标签选择器：通过 HTML 标签名选中元素。例如，p 选择所有的段落。
类选择器：通过类名选中元素。例如，.my-class 选择所有具有 my-class 类的元素。
ID 选择器：通过 ID 名选中元素。例如，#my-id 选择具有 id 为 my-id 的元素。
属性选择器：通过元素的属性值选中元素。例如，[type="text"] 选择所有 type 属性为 text 的元素。

更多选择器请参考 CSS 选择器参考手册。

样式属性

CSS 中的样式属性用于设置元素的外观和行为。常见的样式属性包括：

color：设置文本颜色。
background-color：设置元素背景颜色。
font-size：设置文本字体大小。
margin：设置元素外边距。
padding：设置元素内边距。
border：设置元素边框。
display：设置元素的显示方式。
position：设置元素的定位方式。

更多样式属性请参考 CSS 参考手册。

媒体查询

媒体查询用于在不同的设备上为网页设置不同的样式。例如，在手机上将字体大小调整为更小的值，以适应屏幕尺寸。媒体查询语法如下：

@media screen and (min-width: 768px) {
  /* 在屏幕宽度大于等于 768px 时应用的样式 */
}

更多媒体查询请参考 CSS 媒体查询介绍。

实例演示

以下是一个简单的示例，它为所有段落设置绿色背景和白色字体：

p {
  background-color: green;
  color: white;
}

接下来是一个使用 Bootstrap 框架的示例，它创建了一个响应式的导航栏：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Bootstrap Example</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Page 1</a></li>
        <li><a href="#">Page 2</a></li>
        <li><a href="#">Page 3</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container">
  <h1>Hello World!</h1>
  <p>This is a test.</p>
</div>

</body>
</html>

以上示例中，导航栏使用了 Bootstrap 框架提供的样式和 JavaScript 功能，可以在不同设备上呈现不同的布局。