CSS引入方式##
css全称为“层叠样式表”,它主要用于定义HTML内容在浏览器内显示样式,如文字大小、颜色、字体加粗等。css有四种引入方式:
行内式----把css代码直接写在现有的HTML标签内,如:
<p style="color:red">红色</p>
内嵌式----把css样式代码写在<style type="text/css"></style>
标签之间,如:
<style type="text/css"> p { color:red; }</style>
外联式----把css代码写在一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内,如:
<link rel="stylesheet" type="text/css" href="index.css"/>
@import----也属于外联式,一般不使用,须写在<style type="text/css"></style>
标签之间,也可写在link引入的css文件内,有两种写法,如:
<style>1. @import url("index.css"); 2. @import "index.css";</style>
link和@import的区别:
1.link是XHTML标签,除了加载CSS外,还可以定义RSS等其他事务;@import属于CSS范畴,只能加载CSS。2.link引用CSS时,在页面载入时同时加载;@import需要页面网页完全载入以后加载。3.link是XHTML标签,无兼容问题;@import是在CSS2.1提出的,低版本的浏览器不支持。4.link支持使用Javascript控制DOM去改变样式;而@import不支持。5.@import可以在CSS中再次引入其他样式表。
CSS选择器##
每一条css样式声明由两部分组成,形式如下:
选择器{ 样式; }
五种选择器:
1.基础选择器;2.组合选择器;3.伪类选择器;4.;5.伪元素选择器
基础选择器
1.通用选择器
2.标签选择器
3.类选择器
4.id选择器
组合选择器
1.E,F:多元素选择器:可同时设置多个元素的相同样式
2.E F:后代选择器:可设置E元素包裹下所有F元素的样式
3.E>F:子元素选择器:设置E元素包裹下的直接后代F,孙后代不能被选中
4.E+F:直接相邻选择器:该选择器匹配E元素之后的相邻同级元素F
5.E~F:普通相邻选择器:匹配E元素之后的同级元素F(无论相邻与否)
伪类选择器
选择器 | 含义 |
---|---|
E:first-child | 匹配元素E的第一个子元素 |
E:last-child | 匹配元素e的最后一个子元素 |
E:nth-child(n) | 匹配其父元素的第n个子元素,第一个编号为1 |
E:first-of-type | 匹配父元素下使用同种标签的第一个子元素,等同于nth-of-type(1) |
E:hover | 匹配鼠标悬停上的的e元素 |
E:focus | 匹配获得焦点的e元素 |
伪元素选择器
选择器 | 含义 |
---|---|
E::first-line | 匹配E元素的第一行 |
E::first-letter | 匹配E元素的第一个字母 |
E::before | 在e元素之前插入生成的内容 |
E::after | 在e元素之后插入生成的内容 |
a:link, a:hover, a:active, a:visited 的顺序是怎样的? 为什么?##
a标签有四个伪类选择器,a:link, a:hover, a:active, a:visited,他们的顺序是怎样的呢?
a:link > a:visited > a:hover > a:active原因是:浏览器解析会遵循一个原则:当选择器的优先级相等时,写在后面的会覆盖前面的。a:link, a:hover, a:active, a:visited这四个选择器的优先级都一样,当a标签指向的链接没有访问过时,默认触发link状态,所以会用到a:link指定的样式,当a标签指向的链接被访问过时,它同时处于a:link和a:visited状态,而a:link和a:visited的优先级相同,后面的会覆盖前面的,所以用哪个样式由它们的顺序决定,将a:visited写在a:link后,让访问过的链接使用a:visited指定的样式,同理,当用户的鼠标悬停在a标签指向的链接上时,它同时处于link,visited, hover状态,将a:hover写在 a:link和a:visited之后,让这个链接使用 a:hover指定的样式,当用户鼠标点击a标签指向的链接时(鼠标按住没有松开的状态),这个时候链接同时处于link, visited,hover,active四种状态,要让链接用到a:active指定的样式,就要将a:active写在最后。
选择器的优先级怎么计算呢?##
CSS优先级从高到低依次是:
在属性后面使用!important
会覆盖页面内任何位置定义的元素样式
作为style属性写在元素标签上的内联样式
id选择器
类选择器
伪类选择器
属性选择器
标签选择器
通配选择器
浏览器自定义