一,CSS是什么?
- 定义:CSS全称是层叠样式表;
- 作用:为页面内容设置好看的模样,在整个页面中,CSS就像是人的外表一样重要;
- 语法规范:CSS由选择器,属性,值组成,其中属性和值用大括号包裹,以分号结尾。
例如:h1{ color: red; };
其中h1是选择器,color是属性,red是值; - CSS注释:CSS的注释格式是:
/* 注释的语句 */
;被注释的语句不会生效;
二,CSS引入方式的介绍(3种)
- 内联样式:在标签内使用style属性引入(不推荐),例:
<h1 style='color: red;'>666666</h1>
- 内部样式:在<style>标签内书写样式(不推荐),例:
- 外部样式:在HTML文档外创建.css文件,并通过
<link>
标签或者@import
引入:
1.<link>
标签引入(推荐用法),<link>
标签引入.css文件时最好写在<head>
标签内,例:
2.
@import
引入(不推荐):在<style>
标签内部进行引入,如下:
此外,import引入方式还可运用在CSS文件中,如下:
★:<link>
标签引入和<@import>
引入方式的不同点
-
link
是HTML标签,@import
是CSS语法,同时,link标签还可用于载入其它资源而@import
不能; -
link
引入的样式文件可以进行异步加载,而@import
引入需要页面加载内容完成才加载,这样有可能因为加载失败导致白屏问题; -
link
是HTML标签,不存在兼容性问题,而@import
是CSS样式,在低版本IE不能用; -
link
支持JS控制DOM改变样式,而@import
不支持;
综上所述,不推荐使用@import引入CSS样式
三,开发者工具和浏览器默认样式
- 开发者工具:开发者工具可以在页面单击右键点检查选项打开,下图是它的模样:
在Elements中可以看到该网页的HTML和CSS样式。
- 浏览器默认样式
浏览器默认样式是指在未设定样式是,浏览器默认自带的样式,每个浏览器的默认样式都有可能不同,并且在默认样式旁边都会带有user agent stylesheet字样标明,浏览器默认样式不能更改,但是可以覆盖,如下图:
四,关于文件路径
- 绝对路径(不推荐使用):指的是文件所在的完整路径,如果文件上传到服务器因为路径改变有可能会导致文件错误,所以不推荐使用,如下:
- 网络路径:网站路径指的是服务器存放网页源代码的路径,通常见到的都是url(统一资源定位符)
例如:
-
★ 相对路径:推荐使用,即使该路径放上服务器也不会出错
1.css/XXX.css
指当前目录下文件夹css中的XXX.css;
2../css/XXX.css
同上,但不同的是,该写法是严格模式写法;
3.XXX.css
指当前文件夹下的XXX.css文件;
4.../imgs/XXX.png
指上级文件夹下的imgs文件夹里的XXX.png文件;
五,CSS书写规范
- 统一小写;
- 不要使用内联的style属性去定义样式,错误范例:
- 标签的id或者class使用有意义的词语,不要像下面这样:
- 尽可能用缩写,如下代码:
- 块内容缩进,如下图,箭头所指就是缩进:
★六,关于CSS选择器
- 总概:一共有五中选择器:1.基础选择器;2.组合选择器;3.属性选择器;4.伪类选择器;5.伪元素选择器
下面就一一来介绍他们的用法: - 基础选择器:
1.*
:通用选择器:适用于页面所有标签的样式,范围太广所以很少使用;
2.
#id
:id选择器:匹配特定的id元素;
3.
.class
:类选择器:匹配特定的class元素;
4.
element
:标签选择器:直接使用标签名称进行样式设定;
- 组合选择器
1.E,F:多元素选择器:可同时设置多个元素的相同样式:
2.E F:后代选择器:可设置E元素包裹下所有F元素的样式:
3.E>F:子元素选择器:设置E元素包裹下的直接后代F,孙后代不能被选中:
4.E+F:直接相邻选择器:该选择器匹配E元素之后的相邻同级元素F:
5.E~F:普通相邻选择器:匹配E元素之后的同级元素F(无论相邻与否):
- 伪类选择器
★1.a标签的四种状态:
①:a:link
(未被访问状态),②:a:visited
(访问后的状态),③:a:hover
(鼠标悬停状态),④:a:active
(正被点击状态);
2.顺序排列:link,visited,hover,active,
3.顺序排列的原因:
就近原则的原因,因为CSS加载的顺序是从上到下的,所以写在后面的优先级相同的选择器样式会覆盖前面的样式,而link是未被访问状态,visited是访问过后状态,hover鼠标悬停状态,active正在被点击状态。在鼠标未点击时,a链接是处于link状态,采用link样式,而点击后是visited和link状态,此时采用的应该是visited状态,所以link写在visited前面。同理,鼠标悬停在a链接时是hover,link和visited状态,而hover如果写在link和visited前面的话,hover的样式就会被覆盖,所以hover要写在link,visited后面。而点击时,a链接处于hover,active,link,visited状态,active写在前面就会被其它三种覆盖,所以active写在最后。
2.E:enabled
和E:disabled
:匹配表单中可用(enabled)和禁用(disabled)的元素;
PS:禁用表单元素可以用disabled属性设定,没有这个属性的都是enabled元素,如下:
3.E:checked
:匹配表单中的radio或者checkbox元素;
4.★E:nth-of-type(n)
:匹配父元素的第n个子元素,但只匹配使用同种标签的元素;
5.★E:nth-chile(n)
:与E:nth-of-type(n)
类似;
6.
E:first-of-type
:匹配父元素下使用同种标签的的第一个子元素;
7.E:last-of-type
:匹配父元素下使用同种标签的的最后一个子元素;
- 伪元素选择器
1.E::first-line
:匹配E元素内容的第一行;
2.
E::first-letter
:匹配E元素内容的第一个字符;
3.★
E::before
:在E元素前插入生成的内容;
4.★
E::after
:在E元素后面插入生成的内容;
- 属性选择器(因为不常用,只在这里说一下大体语法格式)
格式:E[abcd]:匹配所有有属性abcd的元素;
七,选择器优先级
由高到低排列:
1.属性后+!importangt
2.内联样式:style='color: red';
3.id选择器:#id
4.类选择器:.class
5.伪类选择器:a:link
6.属性选择器:h1{}
7.标签选择器:p[XXX]
8.通用选择器:*
选择器优先级的计算
1.先设定初始值为万位数:0,0,0,0,0;
2.加了!important,在第一位0加上1(1,0,0,0,0);
3.内联样式在第二位0加上1(0,1,0,0,0);
4.id选择器在第三位0加上1(0,0,1,0,0);
5.类选择器在第四位0加上1(0,0,0,1,0);
6.伪类和属性选择器与类选择器一样;
7.标签选择器在第五位0加上1(0,0,0,0,1);
PS:上述所有选择器,每有一个就给它相应位置的0加上1,也就是说当有两个时,它的权值是相应位置的0加上2