CSS 层叠样式表 不能脱离html而单独存在
语法:
1.属性名和属性值之间使用:隔开
2.多对属性之间使用;隔开
3.最后一对属性可以不加分号
id、class、style、title 四个公有属性
速记写法:
简写形式:
div
盒子:内容区+内边距+边框+外边距
padding 内边距
padding:10px; 上下左右均为10PX内边距wai
padding:10px 20px;上下10px;左右20px
padding:10px 20px 30px;上10px 左右20px 下30px
padding:10px 20px 30px 40px; 上 右 下 左
margin 外边距
border-image
list-style{image type position}
backgorund
border:1px solid red
3.注释
/注释内容/
1.注释写法
2.注释作用
解释说明
便于代码的维护和管理
3.注释能否嵌套使用
注释不能嵌套使用
/*
*/
4.在html中引入CSS的几种方式
1.行内样式
style属性
2.内联样式
style标签
3.外部引入
创建一个以.css为后缀名的文件
link标签 优先解析CSS
@import url(); 优先解析html,不建议使用 不兼容ie
引入方式的优先级:
行内样式>内联样式/外部引用
就近原则:哪一个样式更靠近元素,那一个样式的优先级更高
外部link标签:实际开发
一、选择器
标签选择器
根据标签名称选择一类元素
id选择器
通过id属性选择一个元素
#value
类选择器
class
.value
普遍选择器
:所有
后代选择器
>:选择当前元素的直接子元素
空格:选择当前元素的所有后代元素,包含孙代元素
兄弟选择器
+:选择当前元素之后的一个兄弟
~:选择当前元素之后的所有兄弟元素
属性选择器
根据元素的属性选择一类元素
[id]:选择当前页面中具有id属性的元素
[class=‘one’]:选择当前页面中具有class属性并且属性值为one的元素
[class~=‘one’]:选择当前页面中具有class属性,并且属性值之一为one的元素
[class^=‘o’]:选择当前页面中具有class属性。并且属性值以o开头
[class$=‘o’]:选择当前页面中具有class属性。并且属性值以o结尾
[class=‘o’]:选择当前页面中具有class属性。并且属性值中包含o的元素
多选择器
使用逗号隔开多个选择器
div 5
p3
div,p{
width:100px;
height:100;
}
组合选择器:
将多个选择器组合到一起使用
div#one:选择当前页面中所有div标签并且选择div标签汇总id为one的元素
伪类选择器:
:伪类名称
:first-child 选中同级别中的第一个标签
:last-child 选中同级别中的最后一个标签
:nth-child(number/odd/even) 选中同级别中的第n个标签
数字/奇数/偶数
和状态相关的:
:hover 当鼠标悬停在某个元素上时
:avtive 当鼠标按下时的状态
:link 当前元素未被点击过的状态
visited 当前元素被访问过之后的状态
书写顺序:
link->visited->hover->active
伪元素选择器:
::伪元素名称
<div>hello</div>
::first-letter第一个字符
::first-line第一行
::selection被选择的文本
::after
content:'text'.url 行内元素转换成块级元素
()
::befor
选择器优先级:
根据特性值进行比较,特性值越大,优先级越高
!import不计入特性值,优先级最高
style属性:1000
id选择器:100
类选择器、伪类选择器、属性选择器:10
元素选择器、伪元素选择器:1