一.简单介绍css
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素，样式通常存储在样式表中
把样式添加到 HTML中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率，外部样式表通常存储在 CSS 文件中，多个样式定义可层叠为一个
二.css和html的区别
html：用于定义文档内容
css：样式表定义如何显示 HTML 元素（就像 HTML 中的字体标签和颜色属性所起的作用那样）
样式通常保存在外部的 .css 文件中。只需要编辑一个简单的 CSS 文档就可以改变所有页面的布局和外观
三.css规则针对某一种html的元素(css装饰同类型的标签，比如所有的h1标签)
css规则
css规则解释：
css选择器通常是需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成。
属性（property）是希望设置的样式属性（style attribute）。每个属性有一个值。
属性和值被冒号分开，属性和值构成一个声明。
声明和声明之间用；隔开，最后一个声明必须有；号
四.css的id和class选择器
.css的id选择器针对html的元素中的一个（css只装饰一个h1标签而不是所有的h1标签）
css的class选择器描述一组元素的样式（css可以一次装饰多种类型的标签，比如h1,p等）
1.ID 选择器
1）id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
2）HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。
3） ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用
以下的样式规则应用于元素属性 id="para1":
id选择器
说明：只有 id="para1"的元素才能被css装饰，第二个h1标签没有被装饰。
2.class选择器
1）class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使 用。
2）class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示：
3）类名的第一个字符不能使用数字！它无法在 Mozilla 或 Firefox 中起作用
在以下样式规则中，所有拥有 center 类的 HTML 元素均为居中。
class选择器
五.css中的注释内容语法：
/* css注释内容 */ ---->(在css中使用，在header标签下的-style标签中使用)
补充：html的注释内容是<!-- 注释内容--> (在body标签中使用)
六.样式表的三中插入方式:外部样式表,内部样式表,内联样式
1.外部样式表
1)当样式需要应用于很多页面时，外部样式表将是理想的选择。
2)在使用外部样式表的情况下，可以通过改变一个文件来改变整个站点的外观。
3)每个页面使用 <link> 标签链接到样式表
4）外部样式表不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存
link的语法：
<head><link rel="stylesheet" type="text/css" href="mystyle.css"></head>
href：指定css文件的位置，type代表引入的css样式文件
mystyle.css文件内容:
hr {color:sienna;}
#id-type {margin-left:20px;}
.body-class {background-image:url("/images/back40.gif");}
注意： 不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px"
2.内部样式表
1）当单个文档需要特殊的样式时，就应该使用内部样式表。
2）使用 <style> 标签在文档头部定义内部样式表
内部样式表
3.内联样式
1）由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，
2）当样式仅需要在一个元素上应用一次时，要使用内联样式，需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性 -->（可以使用id选择器完成后内联样式的功能）
3）简单实例： <p style="color:sienna;margin-left:20px">这是一个段落。</p>
七.CSS 优先规则
1) CSS 优先规则1:最近的祖先样式比其他祖先样式优先级高
最近的祖先样式比其他祖先样式优先级高
2)CSS 优先规则2："直接样式"比"祖先样式"优先级高
"直接样式"比"祖先样式"优先级高
3)CSS 优先规则3：优先级关系：内联样式 > ID 选择器 (如 #id{})> 类选择器( .class{}) = 属性选择器 ( 如 a[href="segmentfault.com"]{})= 伪类选择器(如 :hover{}) > 标签选择器( 如 span{}) = 伪元素选择器(如 ::before{})
CSS 优先规则3
规则4补充知识
所有 CSS 的选择符由上述 7 种基础的选择器或者组合而成，组合的方式有 3 种：
后代选择符： .father .child{}
子选择符： .father > .child{}
相邻选择符: .bro1 + .bro2{}
当一个标签同时被多个选择符选中，我们便需要确定这些选择符的优先级。我们有如下规则：
4)CSS 优先规则4：计算选择符中 ID 选择器的个数（a），计算选择符中类选择器、属性选择器以及伪类选择器的个数之和（b），计算选择符中标签选择器和伪元素选择器的个数之和（c）。按 a、b、c 的顺序依次比较大小，大的则优先级高，相等则比较下一个。若最后两个的选择符中 a、b、c 都相等，则按照"就近原则"来判断。
CSS 优先规则4
5)CSS 优先规则5：属性后插有 !important 的属性拥有最高优先级。若同时插有 !important，则再利用规则 3、4 判断优先级
!important 的属性拥有最高优先级
网友评论