web前端篇:CSS使用，样式表特征，

文章由LinuxBoy分享于2019-06-30 04:06:05热评（537）

web前端篇:CSS使用，样式表特征，

###一、CSS介绍
CSS ：Cascading Style Sheet 层叠样式表
作用：修饰和美化页面元素，实现网页排版布局

###二、CSS使用
1.行内样式/内联样式
特点：在具体的标签中使用style属性，引入CSS样式代码

语法：

<标签 style=“CSS 样式声明”>

CSS 样式声明 / 语句：
对当前元素添加样式
语法：CSS 属性：值；

注意：CSS 样式声明可以是多条，<标签 style=“属性:值；属性:值；”

常见的CSS属性

1.属性:font-size

2.取值以像素为单位的数值，浏览器默认的字体大小是 16px

设置字体颜色:

1.属性：color

2.取值：颜色的英文单词或RGM(数值,数值,数值)或#b0b0b0（十六进制）

设置背景颜色

background-color
取值：颜色的英文单词或RGM(数值,数值,数值)或#b0b0b0（十六进制）

<!--行内样式-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <p >asd</p>
</body>
</html>

2.文档内嵌/内部样式表
特点：将CSS代码与具体的标签相分离，在HTML文档中使用标签引入CSS代码。

语法：

  <style>
      选择器1
      选择器2
      选择器3
      ...
  </style>

选择器：

1.使用文档内嵌方式引入CSS样式表时，实现了结构与样式相分离，但是需要自己定义选择器来匹配文档中元素，为其应用样式。

2.作用：匹配文档元素为其应用样式。

3.语法：选择器实际上由两部分组成

选择器（符）{
属性：值；
属性：值；
}

et :
  标签选择器/元素选择器：
使用标签名作为选择符，匹配文档中所有的该标签，并应用样式
  p {
      color :green;
      font-size :20px;
  }

注意：可以书写在文档中的任意位置，但是基于样式优先的原则，一般写在中。

3.外链方式/外部样式表

定义外部的.css文件，在HTML中引入即可，真正实现文档与样式表分离。
语法：
在外部的样式表中使用选择器定义样式；在HTML文档中使用引入CSS文件

###三、样式表特征

1继承性

继承性
大部分的CSS属性都是可以被继承的
子元素或者后代元素可以继承父元素中的样式
所有的文本属性都可以被继承，块元素的宽度与父元素保持一致
2.层叠性

允许为元素定义多个样式，共同起作用。

p{
  color:red;
  background-color:blue;
}

3.样式表的优先级

从低到高
从低到高：
浏览器缺省设置：浏览器默认样式
文档内嵌/外链方式：在不发生样式冲突时，样式共同起作用；
如果发生样式冲突，后来者居上，最后定义的样式最终显示
行内样式的优先级最高

最后，给大家推荐一个前端学习进阶内推交流群685910553（前端资料分享），不管你在地球哪个方位，
不管你参加工作几年都欢迎你的入驻！（群内会定期免费提供一些群主收藏的免费学习书籍资料以及整理好的面试题和答案文档！）

如果您对这个文章有任何异议，那么请在文章评论处写上你的评论。

如果您觉得这个文章有意思，那么请分享并转发，或者也可以关注一下表示您对我们文章的认可与鼓励。

推荐文章：

web前端篇:CSS使用，样式表特征，