css是层叠样式表，它是网页之皮
本文主要内容：
1. css语法格式（怎么写？）
2. css引入方式（怎么用？）
3. css文件地址（想用到哪找？）
4. css选择器分类（一共有几种？）
5. css选择器优先级（用上了，谁优先？）
写法：
选择器:{属性:属性值; 属性:属性值;}
ps：（【属性:属性值;】这个组合叫做css的声明）
@xx.css;
a:hover
CSS使用的第一步：引入方式
css的引入方式有三种：
- 内联样式
写在html标签内，很不常用，难阅读难维护。
<h1 style='color:red;'></h1> - 内部样式
写在style标签里，不便于维护，尽量不要用。
<head>
<style type='text/css'>
h1 {color:red;}
</style>
</head>
- 外部样式
把样式先写在一个css文件内，再把这个css文件引入到页面内，容易维护，结构样式分离。
<link rel='stylesheet' type='text/css' href='xxx.css'>写在head里
@import url('xxx.css'); @import 'xxx.css';写在style里
ps：外部样式有link和@两种方式,link本质是html的一个标签，它可以出现在html的任何地方；@其实使用的css语法，需要写在style标签里或者css文件里。
可以在link引入的css文件内使用@import哦～
CSS使用的第二步：确定css文件地址
如果我们已经确定使用link的方式引入css文件，那么我写好了css文件，如何才能找到它呢？
寻找文件的路径分为三种，相对路径，绝对路径，网站路径。
- 相对路径
相对路径是以目前文件未基准，一步步指向目标文件，
css/xx.css
../image/123.png
- 绝对路径
绝对路径是本地文件的全部地址，或者说是文件在计算机内的真实地址。长度比较长。 - 网站路径
上传以后，尽量使用相对路径；也可以直接用文件的绝对网络地址。
CSS使用的第三步：了解css选择器（选择器有几种？）
css的语法是 选择器{属性：属性值;}
那么css的选择器都有哪些呢？
· 基础选择器
· 组合选择器
· 属性选择器
· 伪类选择器
· 伪元素选择器
- 基础选择器
最常见的选择器，由下面几种组成：
- 通配符选择器（*）选择页面所有元素。
- id选择器（#id）选择特定的id元素(唯一性)
- 类选择器（.class）选择特定的class元素（某一类）
- 标签选择器（element）按标签名选择页面内所有该标签
- 组合选择器
首先假设E和F是两个基础选择器
- E,F 多元素选择，用
,分隔，同时选择了E和F。 - E F 后代选择器，用空格分隔，选择了E的所有后代里的F元素。
- E>F 子元素选择器，用>分隔，选择了E的直接子元素里的F元素。
- E+F 兄弟相邻选择器，用+分隔，选择了和E相邻的、同级的F元素。
- E~F 普通相邻选择器，用~分隔，选择了和E同级的、不一定相邻的F元素。
- .class1.class2 过滤选择器，id或者class 没有分隔，选择了同时拥有这两者的元素。
- 属性选择器
不常用，假设E是一个基础选择器
- E[attr] 选择所有具有attr的E元素，例：
div[id]会选择所有拥有ID属性的div。 - E[value=xxx] 选择所有value=xxx的E标签，例：
input[type=password]会选择所有type=password的input标签。
- 伪类选择器
选择了某个元素的某一种状态。
css代码是自上而下的被读，最下面的代码会覆盖上面的,所以越特别的状态越写在下面。
- E:link 选择所有未被点击的E元素
- E:visited 选择所有已被点击的E元素。
- E:hover 选择所有被鼠标悬浮其上的E元素。
- E:active 选择所有正在被点击的E元素。
ps：LVHA也是在网页中链接使用伪类组合的常见顺序，可以良好的表现样式。 - E:foucs 选择现在的焦点E元素。
- E:first-child 选择E元素的父元素的第一个子元素。
- E:last-child 选择E元素的父元素的最后一个子元素。
- E:nth-child(n) 选择E元素的父元素的第n个子元素。
- E:enabled 选择可以使用的E元素 例：
input:enabled{xxx: xxx;} - E:disabled 选择表单中不可使用的input元素
input:disabled{xxx: xx;} - E:checked ; E:selection 同上
- 伪元素选择器
- E::after 在E元素里生成一个子元素，并且该子元素位于所有子元素之前。
#wrap::after{content: 'xxx';} - E::before 在E元素里生成一个子元素，该子元素在所有子元素之后。
- E::first-line 选择E元素的第一行。
- E::first-letter 选择E元素的第一个字母。
CSS使用的第四步：css选择器的优先级（用上css了，谁优先起作用？）
首先有三种特殊情况：
- 无论什么情况，!important都是最优先
h1 {color: red !important;} - 同等权重，下面的会覆盖上面的，就近原则。
- 继承得来的最弱。
css权重原则：
行内选择符为一档
id选择符为二档
类选择符／属性选择符／伪类选择符为三档
标签选择符／伪元素选择符尾四档
从一档比较到四档，如果同档选择器数量相等，向下一档比较。
网友评论