CSS知识点（一）

2016-12-08 本文已影响0人饥人谷_喂鱼de猴子

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选择符为二档
类选择符／属性选择符／伪类选择符为三档
标签选择符／伪元素选择符尾四档
从一档比较到四档，如果同档选择器数量相等，向下一档比较。