CSS必知必会

发表于2022-01-29更新于2023-04-25字数统计1.4k阅读时长7分阅读次数

CSS语法规则

CSS规则由：「选择器」和一条或多条「声明」组成。其中选择器用于指定想要改变样式的HTML元素；每个声明由一个属性和一个值组成，属性和值之间用:连接，多条声明之间用;隔开。

1
2
3
4
5
6
/* 选择器 {声明; 声明} 选择p元素，两条声明指定其颜色和对齐方案*/
p  
{
    color:red;
    text-align:center;
}

选择器

其中选择器分为id选择器和class选择器，id选择器为指定了id属性的HTML元素设置特定的样式；class选择器用于描述特定class属性值的一组元素的样式。

1
2
3
4
5
<h1 class="center">这是标题一</h1>
<h2 class="center">这是标题二</h2>
<p id="para1">这是第一个段落，这个段落的id为para1</p>
<p id="para2">这是第二个段落，这个段落的id为para2</p>

1
2
3
4
5
6
7
8
9
10
11
12
/* id选择器，对于id为para1的元素指定样式，居中对齐，蓝色字 */
#para1
{
    text-align:center;
    color:blue;
}

/* class选择器，对于class为center的一组元素指定样式，居中对齐 */
.center
{
    text-align:center;
}

分组和嵌套

此外，选择器之间可以分组和嵌套：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/* 同时对多个标签选择，也叫分组选择 */
h1,h2,p
{
    color:green;
}

/* 嵌套选择, 为所有class="marked"元素内部的p元素指定样式 */
.marked p
{
    color:white;
}

/* 嵌套选择，为所有class="marked"的p元素指定样式 */
p.marked
{
    text-decoration:underline;
}

组合选择符

CSS中包含4种选择符的组合方式：

  1. 后代选择器（以空格 分隔）

后代选择器可以选取到被某元素包含的另一元素：

1
2
3
4
5
/* 选择div内包含p元素 */
div p
{
    color:red;
}
  1. 子元素选择器（以>分隔）

子元素选择器只选择某元素的第一级子元素：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 选取div的一级子元素p */
<style>
    div>p
    {
        background-color:red;
    }
</style>

<div>
    <p>我会受影响</p>
    <span>
        <p>我不受影响</p>     
    </span>
</div>
  1. 相邻兄弟选择器（以+分隔）

相邻兄弟选择器可以选择紧接着某个元素的另一个元素，这两个元素拥有相同的父元素。

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    div+p
    {
        background-color:yellow;
    }
</style>

<div>
    <p>div内的标签</p>
</div>
<p>我紧接着div标签，我会受影响</p>
<p>我不受影响</p>
  1. 普通兄弟选择器（以~分隔）

普通兄弟选择器不要求元素相邻，选择某一个元素后的所有兄弟元素。

1
2
3
4
5
6
7
8
9
10
11
12
<style>
    div~p
    {
        background-color:yellow;
    }
</style>

<div>
    <p>div内的标签</p>
</div>
<p>我是div的兄弟元素，我会受影响</p>
<p>我也是div的兄弟元素，我也会受影响</p>

插入样式表三种方式

  1. 外部样式表(External style sheet)：当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。外部样式表通过在文档的首部指定<link>标签引用外部的.css文件来实现样式的设置。

  2. 内部样式表(Internal style sheet)：当单个文档需要特殊的样式时，就应该使用内部样式表。内部样式表直接在首部通过<style>标签指定文档的样式。

  3. 内联样式(Inline style)：由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时，要使用内联样式。内联样式通过给某个元素添加style属性来指定单个元素的样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <!-- 外部样式 style.css，从style.css文件中读取样式 -->
    <link rel="stylesheet" type="text/css" href="style.css"/>

    <style type="text/css">
      /* 内部样式 */
      h3{color:green;}
    </style>
</head>
<body>
    <h3>测试！</h3>
    <p style="color:green;margin-left:20px">内联样式测试</p>
</body>

CSS盒子模型

alt 盒子模型

  1. 内容区(Content)：可以是文本、图片等类型，具有的属性有：width, height, overflow，分别指定内容的宽度和高度以及当内容信息溢出时的行为。
  2. 填充区(Padding)：处于内容区和边框之间的透明区域，属性有：padding-top, padding-bottom, padding-left, padding-right, padding，分别指定了各个方向上的填充区大小。
  3. 边框(Border)：环绕内容曲和填充区的边界。属性有：border-style, border-width, border-color, border，分别指定了边框的样式，宽度和颜色。
  4. 外边距(Margin)：边框外的区域，它使得盒子之间不会紧凑连接在一起。属性有：margin-top, margin-bottom, margin-left, margin-right, margin，分别制定了不同方向的外边距大小。
div {
    width: 300px;
    /* border简写，分别为：border-width, border-style, border-color */
    border: 25px solid green;
    padding: 25px;
    margin: 25px;
}

块元素和内联元素，块元素占用了全部的宽度，前后都是换行符。如<h1>, <p>, <div>。
内联元素只需要必要的宽度，不强制换行。如<span>, <a>。

可以用display属性改变显示方式为块元素或内联元素，{display:inline}, {display:block}。

参考资料

  1. CSS 教程（菜鸟教程）