版权声明:一起学习,一起进步,一起coding https://blog.csdn.net/sunshine2285/article/details/88912293
-
css
:层叠样式表,主要实现页面的表现效果- 可以将css样式编写到元素的style属性中,称为内联样式,只对当前元素生效,不方便复用,不推荐使用
- 可以将css样式写到
<head>
标签内<style type="text/css"> p{ color:red; font-size:40px; } </style>
- 可以将css样式写到外部的css文件中,这样最利于复用且有利于浏览器缓存,通过以下方式引用
<link rel="stylesheet" type="text/css" href="style.css" />
-
css注释
:/* */
-
css语法
:选择器 {声明块}- 选择器:通过选择器可以选中页面指定的元素,并且将声明块中的元素应用到选择器对应的元素上
- 声明块:卸载
{}
内,键值对,形如key:value;
,:
号连接,;
号隔开多个声明
-
<div>
:块元素,独占一行,无论内容多少,<div>
标签没有任何语义(或表示一块区域),主要用于对页面布局 -
<span>
:内联元素,所谓的行内元素,只占自身大小的元素,直到放不下时自动换行,主要用来选中文本来设置样式 -
<a>
内可以放任意元素,<p>
内不可以放任何块元素 -
元素之间的关系
:父子元素,祖先和后代元素,兄弟元素 -
伪类
: 专门用来表示元素的一种特殊的状态,用于对特殊状态的元素设置样式,但是设置的属性有一定限制,a:link
,a:visited
,a:hover
,a:active
,伪类 -
伪元素
:为在元素特殊位置的地方设置特定格式,firstletter
,firstline
,before
,after
伪元素 -
常用选择器
(css选择器)[http://www.w3school.com.cn/css/css_selector_type.asp]选择器类型 语法 作用 元素选择器 元素名{}
可以为页面内所有该元素设置为样式 id选择器 #id{}
可以选择页面内唯一的一个元素设置 类选择器 .class{}
可以选择一类元素,需要给元素设置 class
属性,一个元素可以设置多个class
属性选择器分组 选择器1, 选择器2, 选择器N{}
可以选中多个元素, 逗号
分割统配选择器 *{}
可以选中所有元素 复合选择器 选择器1 选择器2 选择器N{}
可以选中同时满足多个条件的元素, 空格
分割后代元素选择器 祖先元素 后代元素{}
选中祖先元素下的后代元素 子元素选择器 父元素 > 子元素{}
选中父元素的子元素 伪类选择器 元素:状态{}
选中特殊状态元素 伪元素选择器 元素:位置{}
选中特殊位置的元素 属性选择器 p[属性]
/p[属性=值]
选中具有指定属性的元素,值可以不写 属性选择器 p[属性^=值]
选中具有指定属性的元素且属性值以指定值开头的 属性选择器 p[属性$=值]
选中具有指定属性的元素且属性值以指定值结尾的 属性选择器 p[属性*=值]
选中具有指定属性的元素且属性值中包含值的 子元素选择器 p:first-child
选中特定位置的子元素 兄弟元素选择器 span + p{}
选中一个元素后紧跟着的兄弟元素 兄弟元素选择器 span ~ p{}
选中一个元素后紧跟着的所有该类兄弟元素 - 选择器可以结合使用
- 子元素
p:nth-child()
可以选择任意位置的子元素,p:nth-child(even)
选中偶数行,p:nth-child()
选中奇数行,可以实现表格或者行的奇偶行不同表现
()[]
-
否定伪类
::not(选择器)
,用于剔除某些特定元素 -
样式继承
:子元素会继承父元素的样式,利用继承的这个特性可以将一些基础的样式设置给父元素,但并不是所有的样式会被继承,例如background-color
等不会被继承 -
选择器的优先级
:当使用不同的选择器选中同一个元素时,在设置相同的样式的时候,显示优先级高的选择器设置的样式选择器类型 优先级 内联样式 1000 id选择器 100 类和伪类选择器 10 元素选择器 1 统配选择器(*) 0 继承的样式 最低优先级 特别注意:
- 当选择器中包含多种选择器时,需要将多种选择器的优先级相加后比较,相加之后的结果不会超过它的最大数量级
- 当几个选择器的优先级相同的时候,显示最后一个选择器设定的样式
- 并集选择器的优先级单独计算
- 可以在样式之后添加
!important
可以将样式设置为最高优先级
-
伪类的顺序
:<a>
的伪类顺序:link
=visited
>hover
>active