CSS笔记整理

最新推荐文章于 2023-09-21 11:36:32 发布

焦焦焦焦焦

最新推荐文章于 2023-09-21 11:36:32 发布

阅读量166

点赞数

分类专栏： CSS 文章标签： css 前端

本文链接：https://blog.csdn.net/weixin_60645637/article/details/128461248

版权

CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS

CSS基本结构

CSS的语法单元是样式，每个样式包含两个部分内容：选择器和声明（或称为规则）

选择器：选择器告诉我们浏览器该样式将作用于页面哪些对象，这些对象可以是某个标签、所有网页对象指定Class或ID值等，；浏览器在解析这个样式时，根据选择器来渲染对象的显示效果，选择器也可称为选择符

声明：声明可以增加一个或无数个，这些声明命令浏览器如何去渲染选择器的对象。声明必须包括两个部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中的最后一个声明可以省略分号。所有声明必须放置在一对大括号内，然后整体紧邻选择器的后面

属性：属性是CSS提供的设置好的选项。属性名由一个单词或多个单词组成，多个单词之间通过连字符相连。这样能够很直观的表示属性所要设置的样式效果

属性值：属性值用来定义显示效果的参数。它包括数值和单位，或关键字

CSS的引入方式

行内式

直接在标签的style属性中添加CSS样式

例 <div style=“width:100px”; height:100px; background:red>hello<div>

优点：方便、直观；缺点：缺乏重用性（一般不用）

内嵌式

在<head>标签中加入<style>标签，在<style>标签中编写CSS代码

例

<head>
<style type=“text/css”>
h3{
  color:red;
}
</style>
</head>

优点：在同一个页面内部便于复用和维护；缺点：在多个网页之间的重用性不够高（在学习过程中用）

外链式

将CSS代码写在一个单独的.css文件中，在<head>标签中使用<link>标签直接引入该文件到页面中

例

 <link rel=“stylesheet” type=“text” href：“css/main.css”>

优点：使得CSS样式与HTML页面分离，便于整个系统的规划和维护，可重用性搞；缺点：CSS代码由于分离到单独CSS文件，容易出现CSS代码过于集中，若维护不当则极容易造成混乱（开发中使用）

导入外部样式表

使用<link>标签导入

例：

<link href=“001.css” rel=“stylesheet” type=“text/css”/>

其中href设置外部样式表文件的地址，可以是相对地址，也可以是绝对地址；rel属性定义改标签关联的是样式表标签；type属性定义文档的类型，即为CSS文本文件。

使用@import关键字导入

例：

<style type=“text/css”>
  @import url（“001.css”）
<style>

在@import关键字后面，利用url（）函数包含具体的外部样式表文件的地址。

布局常用样式属性

·width设置元素（标签）的宽度，如：width：100px
·height设置元素（标签）的高度，如：height：200px
·background设置元素背景色或者背景图片，如：background：gold设置元素的背景颜色；background：url（images/logo.png）设置元素的背景图片
·border设置元素四周的边框，如：border：1px solid black；设置元素四周边框是1像素的黑丝实线；以上也可以拆分成四个边的
·border-top设置顶边边框，如：border-top：10px solid red；
·border-left设置左边边框
·border-right设置右边边框
·border-bottom设置底边边框
·padding设置元素包含的内容和元素边框的距离，也叫内边距，如：padding：20px；padding是同时设置四个边的，也可以像border一样拆分成分别设置四个边：padding-top、padding-left、padding-right、padding-bottom。
·margin设置元素和外界的距离，也叫外边距，如margin：20px;也可以像border一样拆分成分别设置四个边······
·float设置元素浮动，浮动距离也可以让元素排列在一起，浮动分为左浮动：float：left；右浮动：float：right；

文本常用样式属性

·color设置文字的颜色，如：color：red；
·font-size设置文字的大小，如：font-size：12px；
· font-family设置文字字体，如：font-family：微软雅黑；为了避免中文字体不兼容，一般写成font-family：Microsoft Yahei；
·font-weight设置文字是否加粗，如：font-weight：bold设置加粗；font-weight：normal不加粗；
·line-height设置文字的行高，如line-height：24px；表示文字高度加上文字上下的间距是24px，也就是一行占有的高度是24px
·text-decoration设置文字的下划线，如：text-decoration：none；将下划线去掉
·text-align设置文字水平对齐方式，如：text-align：center；设置文字水平居中
·text-indent设置文字首字符缩进，如：text-indent：24px；设置文字首行缩进24px

CSS常用选择器的种类

标签选择器

根据标签来选择标签，以标签开头，此种选择器影响范围大，一般用来做一些通用设置

示例代码

<style type="text/css">
    input{
      font-size: 30px;
      color: cyan;
    }
    p{
      font-size: 35px;
    }
  </style>
</head>
<body>
  <form>
    <p>文本框输入<input type="text"></p>
    <p>密码框输入<input type="password"></p>
  </form>
</body>
</html>

类选择器

根据类名来选择标签，以.开头，一个类选择器可以应用于多个标签上，一个标签也可以使用多个类选择器，多个类选择器需要用空格分割，应用灵活，是CSS中应用最多的一种选择器

示例代码

<style type="text/css">
      p{
        font-min-size: 12px;
        color: red;
      }
      .font18px{
        font-size:18px
      }
      .underline{
        text-decoration: underline;
      }
      .italic{
        font-style: italic;
      }
    </style>
</head>
<body>
     <p class="underline">问君能有几多愁，恰似一江春水向东流。</p>
     <p class="font18px italic underline">剪不断，理还乱，是离愁。别是一般滋味在心头。</p>
     <p class="italic">独自莫凭栏，无限江山，别时容易见时难。流水落花春去也，天上人间。</p>
</body>

层级选择器（后代选择器）

根据层级关系选择后代标签.以选择器1选择器2开头，主要应用在标签嵌套的结构中，减少命名。

示例代码

<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style type="text/css">
    div p{
      font-size: 18px;
      color: #b3d4fc;
    }
    #main div{
      font-size: 20px;
    }
  </style>
</head>
<body>
<div id="wrap">
  <div id="header">
    <p>头部区域第一段文本</p>
    <p>头部区域第二段文本</p>
    <p>头部区域第三段文本</p>
  </div>
  <div id="main">
    <div>主体区域第一段文本</div>
    <div>主体区域第二段文本</div>
    <div>主体区域第三段文本</div>
  </div>
</div>
</body>

ID选择器

根据ID选择标签，以#开头，元素的ID不能重复，所以ID选择器只能应于页面上的一个元素，不能复用，ID名一般给程序使用，所以不推荐使用ID作为选择器

示例代码

<style type="text/css">
p #box {
    background: url(湖泊.jpeg)center bottom;
    height: 400px;
    width: 400px;
    border: solid 2px red;
    padding: 100px;
}
</style>
</head>
<body>
   <p id="box">问君能有几多愁，恰似一江春水向东流。</p>
   <div>剪不断，理还乱，是离愁。别是一般滋味在心头</div>
</body>

组选择器

根据组合的选择器选择不同的标签，以，分割开，如果有公共的样式设置，可以使用组选择器。

示例代码

<style>
  .box1,.box2,.box3{
    font-size: 24px;
    color: gold;
    background: red;
  }
</style>
</head>
<body>
  <div class="box1">哈哈</div>
  <div class="box2">嘻嘻</div>
  <div class="box3">呵呵</div>
</body>

伪类选择器

用于向选择器添加特效的效果，以：分割开，当用户和网站交互的时候改变显示效果可以使用伪类选择器

示例代码

 <style>
     /*a：link 选择没有访问过的链接*/
     /*a:visited 选择点击（访问过）的链接*/
     /*a:hover 选择鼠标经过时的那个链接*/
     /*a:active 选择我们鼠标正在按下没有弹起的那个链接*/
    a:link{
      color: red;
      text-decoration: none;
       }
    a:visited{
      color: green;
    }
    a:hover{
       color: cyan;
      }
    a:active{
      color: gold;
    }
  </style>
</head>
<body>
  <a href="https://www.baidu.com/">百度一下你就知道</a>
  <a href="@">野猪佩奇</a>
</body>

结构伪类选择器

结构伪类有很多种形式，这些形式的用法是固定的，但可以灵活使用，以便设计各种特殊样式效果。结构伪类简单说明如下：

：fist-child：选择某个元素的第一个子元素。
：last-child：选择某个元素的最后一个子元素。
：nth-child：选择某元素的一个或多个特定的子元素。
：nth-last-child：选择某元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始计算。
：nth-of-type：选择指定的元素。
：nth-last-of-type：选择指定的元素，从这个元素的最后一个开始计算。
：first-of-type：选择一个上级元素下的第一个同类子元素。
：last-of-type：选择一个上级元素下的最后一个同类元素。
：only-child：选择的元素是它的父元素唯一一个子元素。
：only-of-type：选择一个元素是它的上级元素的唯一一个相同类型的子元素。
：empty：选择元素里面没有任何内容。

CSS样式表特征

CSS继承性

CSS继承性就是CSS允许结构的外围样式不仅可以应用于某个特定的元素，还可以应用于它包含的。可匹配的标签。通俗的来讲就是在HTML文档结构中，包含在内部的标签将拥有外部标签的某些样式

CSS层叠性

CSS层叠性是指CSS能够对同一个元素或者同一个网页应用多个样式或多个样式表的能力。例如，可以创建一个CSS样式表来设计颜色，创建另一个样式来设计边距，然后将两个样式应用于同一个页面中的同一个元素，这样CSS就能通过样式层叠性设计出各种页面效果。

CSS优先级

当样式发生重叠之后，浏览器根据一定的CSS优先级来解析网页效果

CSS样式表优先级总结：

1.相同的选择器，其样式表排序：行内样式>内部样式>外部样式>（就近原则）
2.相同方式的样式表，其选择器排序：ID选择器>类选择器>标签选择器（范围越小越优先）
3.外部样式表的ID选择器>内部样式表的ID选择器

设计文本样式

定义字体类型

font-family：定义字体类型

例：

<style>
  p{
    font-family: "微软雅黑";
  }
  div{
    font-family: Arial,"Microsoft Yahei";
  }
</style>

font-size：定义字体大小

例：

.b{
  font-size: 1.5em;
}

CSS提供了很多单位，它们都可以被归为两大类：绝对单位和相对单位。

绝对单位所定义的字体大小是固定的，太小显示不受外界因素影响。

例如：in（inch）英寸；cm（centimeter）厘米；mm（millimeter）毫米；pt（point）印刷的点数；pc（piac）1pc=12pt。此外，xx-small、x-small、small、medium、large、x-large、xx-large这些关键字也是绝对单位

相对单位所定义的字体大小一般是不固定的，会根据外界环境而不断发生变化。

例如：

px（pixel）：像素，根据屏幕像素点的尺寸变化而变化。
em：相对于父辈字体的大小来定义字体大小。
ex：相对于父辈字体的X高度来定义大小，因此，ex单位大小既取决于字体的大小，也取决于字体类型。
%：以百分比的形式定义字体大小，于em效果相同。

color：定义字体颜色

例：

<style>
  /*使用颜色名*/
  p{color:red;}
  /*使用十六进制*/
  div{color:#FF6633;}
  /*使用RGB*/
  h1{color: rgb(120,120,120)}
  h2{color: rgb(30%,30%,60%)}
</style>

font-weight：定义文字粗细

例：

.a{
  font-weight: bold;
}

font-weight属性取值比较特殊，其中normal关键字表示默认值，即正常的字体，相当于取值为400.bold关键字表示粗体，相当于取值700，或者使用<b>标签定义的字体效果；bolder（较粗）和lighter（较细）相对于normal字体粗细而言。

另外，也可以设置值为100、200、300、400、500、600、700、800、900，它们分别表示字体的粗细，是对字体粗细的一种量化方式，值越大表示越粗，相反表示越细。

font-style：定义斜体字体

例：

.a{
  font-style: oblique;
}

其中normal表示默认值，即正常的字体，italic表示斜体，oblique表示倾斜的字体。Italic和oblique两个只在英文等西方文字中有效

text-decoration：定义下划线

例：

.e{text-decoration: underline}
.f{text-decoration: overline}
.g{text-decoration: line-through;}

其中none表示默认值，即无装饰字体，underline表示下划线效果，overline表示上划线效果，line-through表示贯穿线效果。

font-variant：定义字体大小写效果

例：

.h{font-variant: small-caps;}

其中none表示默认值，即正常的字体，small-caps表示小型的大写字母字体。

text-transform：定义字体大小写

其中none表示默认值；capitalize表示将每一个单词的第一个字母转换成大写；uppercase表示把所有字母转换为大写；lowercase表示把所有字母转换为小写。

设计文本样式

text-align：定义文本对齐

例：

#a{
  text-align: center;
}

该属性取值包括4个：其中left表示默认值，左对齐；right表示右对齐；center表示居中对齐；justin表示两端对齐

vertical-align：定义垂直对齐

例：

#c{
  display: table-cell;
  vertical-align: middle;
.b{
  vertical-align: super;
}

baseline：默认，元素放置在父元素的基线上；sub：垂直对齐文本的下标；super：垂直对齐文本的上标；top：把元素的顶端与行高中最高元素的顶端对齐；text-top：把元素的顶端与父元素字体的顶端对齐；middle：把此元素放置在父元素的中部；bottom：把元素的顶端与行中最低元素的顶端对齐；text-bottom：把元素的底端与父元素字体的底端对齐；length：定义由基线算起的偏移量，基线对于数值来说为0.对于百分比来说为0%。

letter-spacing：定义字距和词距

例：

.e{letter-spacing: 1em;}
.f{word-spacing: 1em;}

字距和词距一般很少使用，使用时应慎重考虑用户的阅读体验和感受，对于中文用户来说，letter-spacing属性有效，而word-spacing属性无效。

line-height：定义行高

例：

.p1{line-height: 1em}
.p2{line-height: 2em;}

text-indent：定义首字符缩进

例：

.p1{text-indent: -2em;}

设计图像样式

定义图像大小

例：

  <style type="text/css">
    div{
      border: solid 1px red;
      height: 400px;
      width: 80%;
    }
    #i1{
      height: 80%;
      width: 50%;
    }
  </style>
</head>
<body>
<div>
  <img src="http://www.bkill.com/u/upload/2018/11/01/020110462234.jpg" id="i1"/>
</div>

定义图像边框

例：

  <style>
    .i1{
      width: 300px;
      border:solid 150px;
      border-color: red blue green gold;
    }
    .i2{
      width: 300px;
      border-style: solid dashed dotted double;
      border-color: red blue green yellow;
      border-width: 10px 20px 30px 40px;
    }
  </style>
</head>
<body>
  <img class="i1" src="http://www.bkill.com/u/upload/2018/11/01/020110462234.jpg"/>
  <img class="i2" 
       src="http://img.mp.itc.cn/upload/20170508/710b4bb958304725b9a64d419625379c.jpg"/>
</body>

border-style：定义边框样式

边框样式包括虚线边框和实线边框

虚线边框包括dotted（点）和dashed（虚线）

实线边框包括solid（实线）、double（双线框）、groove（立体凹槽）、ridge（立体凸槽）、inset（立体凹边）、outset（立体凸边）。

border-color：定义边框颜色

border-width：定义边框宽度

要定义单边框的颜色可以使用border-top-color（顶边边框颜色）

要定义单边框的宽度可以使用border-top-width（顶边边框宽度）

opacity：定义图像不透明度

例：

<style>
  img{
    opacity: 0.6;
  }
</style>

取值范围在0~1之间，0为完全透明，1为完全不透明。

border-radius：定义图像圆角

例：

<style>
  .i1{
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
  }
</style>

border-top-right-radius：定义右上角圆角
border-top-left-radius：定义左上角圆角
border-bottom-left-radius：定义左下角圆角
border-bottom-right-radius：定义右下角圆角
box-shadow：定义图像阴影

例：

.r2{
  height: 400px;
  width: 600px;
  box-shadow: 10px 10px 5px green;
}

background-image：定义背景图像

例：

body{
  background-image: url(https://img.xingzuo360.cn/d/2019/05/5cebaa369121e.jpg?x-oss- 
  process=style/water);
}

CSS支持background-image设置渐变背景，具体用法如下：

background-image: linear-gradient(red,blue);
background-image:radial-gradient(red,gold);

<linear-gradient>：使用线性渐变创建背景图像；

<radial-gradient>：使用径向渐变创建背景图像；

<repeating-linear-gradient>：使用重复的线性渐变创建图像；

<repeating-radial-gradient>：使用重复的径向渐变创建图像；

background-repeat：定义背景图像的显示方式

例：

background-image: url(http://photocdn.sohu.com/20140527/Img400074058.jpg);
background-repeat: repeat-x;

repeat-x：设置背景图像在水平方向平铺
repeat-y：设置背景图像在垂直方向平铺
no-repeat：设置背景图像仅显示一次
repeat：设置背景图像完全平铺

background-position：定义背景图像显示位置

例：

background: url("https://img.xingzuo360.cn/d/2019/05/5cebaa369121e.jpg?x-oss-process=style/water") no-repeat top right;
background-position: 100% 50%;

background-position属性取值包括两个值，分别用来定义x轴和y轴坐标。默认值为0% 0%，等效于left top

background-attachment：定义固定背景

例：

background-attachment: fixed;

scroll：默认值。背景图像会随着页面其余部分的滚动而滚动。

fixed：当页面的其余部分滚动时，背景图像不会动。

定义超链接样式

认识超链接

根据路劲的不同，网页中的超链接一般可分为3种类型：

内部链接；锚点链接；外部链接；

内部链接所连接的目标一般位于同一个网站中，对于内部链接来说，可以使用相对路劲和绝对路径。所谓相对路径就是URL中没有指定超链接的协议和互联网位置，仅指定相对位置关系。

外部链接所连接的目标一般为外部网站目标，当然也可以是网站内部目标。外部链接一般是要指定所使用的协议和网站地址。

锚链接是一种特殊的链接方式，实际上它是内部链接或外部链接基础上增加锚标记后缀。

伪类和伪对象

伪类就是根据一定的特征对元素进行分类，而不根据元素的名称、属性或内容。例如：鼠标划过就是一个动态特征，任何一个元素都可能被鼠标划过，当然鼠标也可能永远停留在同一个元素上，这种特征对于某个元素来说是随时可能消失的。

伪对象是指页面中的具体内容或区域，只不过这个具体内容或区域所限定的内容是不固定的。例如：段落文本的第一行，对于某个具体段落文本来说可能是确定的，但是在另一段文本中可能所指的内容就不同了。

在CSS中，伪类和伪对象是以冒号为前缀的特定名词，他们表示一类选择器，具体说明如下：

伪类

：link 设置超链接a在未被访问前的样式
：visited 设置超链接a在器链接地址已被访问过时的样式
：hover 设置元素在其鼠标悬停时的样式
：active 设置元素在被用户激活（当鼠标单击与释放之间发生的事件）时的样式
：focus 设置元素在成为输入焦点时的样式
：lang（）匹配使用特殊语言的E元素
：not（）匹配不含有S选择符的元素E
：root 匹配E元素在文档的根元素
：first-child 匹配父元素的第一个子元素E
：last-child 匹配父元素的最后一个子元素E
：only-child 匹配父元素仅有的一个元素E
：nth-last-child 匹配父元素的倒数第n个子元素E
:first-of-type 匹配同类型中的第一个同级兄弟元素E
：last-of-type 匹配同类型中的最后一个同级兄弟元素E
：only-of-type 匹配同类型中唯一一个同级兄弟元素E
：nth-of-type 匹配同类型中的第n个同级兄弟元素E
：nth-last-of-type 匹配同类型中倒数第n个同级兄弟元素E
：empty 匹配没有任何子元素（包括text节点）的元素E
：checked 匹配用户界面上处于选中状态的元素E（用于input type为radio与checkbox时）
：enabled 匹配用户界面上处于可用状态的元素E
：disabled 匹配用户界面上处于禁用状态的元素E
：target 匹配相关URL指向的E元素

伪对象

：first-letter 设置对象内的第一个字符的样式
：first-line 设置对象内的第一行的样式
：before 设置在对象前发生的内容。用来和content属性一起使用
：after 设置对象后发生的内容。用来和content属性一起使用
：selection 设置对象被选择时的颜色

定义鼠标样式

cursor：定义鼠标样式

a{
  cursor: wait;
}

default：默认光标（通常是一个箭头）
auto：默认。浏览器设置的光标
crosshair：光标为十字线
pointer：光标呈现为指示链接的指针（一只手）
move：十字箭头光标，此光标指示某对象可移动
e-resize：此光标指示矩形的边缘可被向右（东）移动
s-resize：此光标指示矩形的边缘可被向下（南）移动
w-resize：此光标指示矩形的边缘可被向左（西）移动
n-resize：此光标指示矩形的边缘可被向上（北）移动
ne-resize：此光标指示矩形的边缘可被向上及向右（北/东）移动
se-resize：此光标指示矩形的边缘可被向下及向右（南/东）移动
sw-resize：此光标指示矩形的边缘可被向下及向左（南/西）移动
sw-resize：此光标指示矩形的边缘可被向上及向左（北/西）移动
text：此光标指示文本
wait：此光标指示程序正在忙
help：此光标指示可用的帮助

定义列表类型

list-style-type：定义列表项目符号

例：

.box{
  list-style-type: square;
}

disc：实心圆，默认值
circle：空心圆
square：实心方块
decimal：阿拉伯数字
lower-roman：小写阿拉伯数字

display：规定元素的显示特性

none ：此元素不会被显示。
block：此元素将显示为块级元素，此元素前后会带有换行符。
inline ：默认。此元素会被显示为内联元素，元素前后没有换行符。
inline-block：行内块元素。（CSS2.1 新增的值）
list-item：此元素会作为列表显示。
run-in：此元素会根据上下文作为块级元素或内联元素显示。
compact ：CSS中有值compact，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
marker: CSS 中有值marker，不过由于缺乏广泛支持，已经从 CSS2.1 中删除。
table: 此元素会作为块级表格来显示（类似 <table>），表格前后带有换行符。
inline-table: 此元素会作为内联表格来显示（类似 <table>），表格前后没有换行符。
table-row-group: 此元素会作为一个或多个行的分组来显示（类似 <tbody>）。
table-header-group: 此元素会作为一个或多个行的分组来显示（类似 <thead>）。
table-footer-group: 此元素会作为一个或多个行的分组来显示（类似 <tfoot>）。
table-row: 此元素会作为一个表格行显示（类似 <tr>）。
table-column-group: 此元素会作为一个或多个列的分组来显示（类似 <colgroup>）。
table-column: 此元素会作为一个单元格列显示（类似 <col>）
table-cell: 此元素会作为一个表格单元格显示（类似 <td> 和 <th>）
table-caption: 此元素会作为一个表格标题显示（类似 <caption>）
inherit: 规定应该从父元素继承 display 属性的值。

网页布局基本方法

使用float

none：设置对象不浮动

left：设置对象浮在左边

right：设置对象浮在右边

当该属性不等于none引起对象浮动时，对象将被视作块对象。

使用clear

none：允许两边都有浮动对象

left：不允许左边有浮动对象

right：不允许右边有浮动对象

both：不允许有浮动对象

使用position

static：默认值，没有定位

relative：生成相对定位的元素，相对于其正常位置定位（从原始位置开始定位）

fixed：生成绝对定位的元素，相对于浏览器窗口进行定位（根据窗口边框定位）

absolute：生成绝对定位的元素，相对于static定位以外的第一个父元素进行定位。（对于父元素进行定位）

设置层叠顺序

z-index：改变元素的覆盖顺序

overflow：规定当内容溢出元素框时发出的事情

Visible：默认值。内容不会被修剪，会呈现在内容之外
Hidden：内容会被修剪，并且其余内容是不可见的
Scroll：内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容
Auto：如果内容被修剪，则浏览器会显示滚动条以便查看其余内容
Inherit：规定应该从父元素继承overflow属性的值
vertical-align: middle;水平居中

焦焦焦焦焦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS笔记整理

CSSCSS基本结构CSS的语法单元是样式，每个样式包含两个部分内容：选择器和声明（或称为规则）选择器：选择器告诉我们浏览器该样式将作用于页面哪些对象，这些对象可以是某个标签、所有网页对象指定Class或ID值等，；浏览器在解析这个样式时，根据选择器来渲染对象的显示效果，选择器也可称为选择符声明：声明可以增加一个或无数个，这些声明命令浏览器如何去渲染选择器的对象。声明必须包括两个部分：属性和属性值，并用分号来标识一个声明的结束，在一个样式中的最后一个声明可以省略分号。
复制链接

扫一扫