前端学习第三天上 css

1.css的三种样式:

1. 行内样式 直接在标签上写 style="xx"
2. 内部样式 在head书写 style={ }
3. 外部样式 link=外部样式链接

2.css的语法规范 标签名称 {属性名称:属性值}

3.css的风格 紧凑和宽松\

4.css基本选择器

选择器名称	格式	优缺点,特点
通配符选择器	* {xxxx}
元素选择器	h1{xxxx}	不能进行差异化设置
类选择器	class="xx"           .xx{abcd}	有命名规则
id选择器	id="xx"                #xx{abcc}	有命名规则,id要唯一

5.复合选择器

1	选择器名称	格式	优缺点,特点
2	交集选择器(且)	p.cc{xxxx}	中间没有空格
3	并集选择器(或)	p,.cc{xxxx}	中间为逗号
4	后代选择器	div p{xxxx}	中间为空格
5	子代(只为儿子)选择器	div>p{xxxx}	中间为大于号
6.1	相邻兄弟选择器(下铺兄弟)	div+p{xxxx}	中间为加号 就一个好兄弟
6.2	通用兄弟选择器(下铺兄弟们)	div~p{xxxx}	中间为~波浪线 很多兄弟
7	属性选择器	[xxxx]	[xxxx] 中间为属性值
8.1	伪类选择器之动态伪类	a:link{xxx}	所有的伪类都不是类,是对特殊状态的描述. 是一个冒号
有四种状态 lvha,link未被点击 visited以被点击 hover鼠标悬停 active fucus对表单使用
8.2	伪类选择器之结构伪类	a:first-child {xxx} a:nth-child(){xxx} a:first-of-type{xxx}
first-child 第儿子 last-child 最后一个
nth(i)第i个 (nth:第n个) an+b的形式 前5个 -b+5
first-of-type 找同类型的第一个  last-of-type 找同类型的最后一个 nth-of-type(i) 找同类型的第i个
8.3	伪类选择器之否定伪类	a:not(选择器) {xxxx}	排除选择器
8.4	伪类选择器之ui伪类	input:checked{xxx} input:disable{xxx} input:enable{xxx}
checked 被选中的单选或复选框 disable禁用的 enable可用的(了解)
9	伪元素选择器	a::	选中元素的特殊位置 2个冒号
first-letter 第一个文字 first-line 第一行文字 selection鼠标选中 placeholder input表单中的提示文字 before{content:xxx} 在选中元素的前面添加内容  content:内容 after{content:xxxx} 在选中元素的后面添加内容

6.元素间的关系:父子  祖先 后代 兄弟

7.选择器的优先级:

        1.不同的看权重

        权重比较 !important >行内>id>类/伪类/属性>元素/伪元素>通配符>继承的样式

                 (1,0,0,0,0)>(1,0,0,0)>(1,0,0)>(0,1,0)>(0,0,1)>(0,0,0)

也可以把id看成1000 类/伪类/属性看成100 元素/伪元素看成10,不过再多低的也不能超过高的

        2.相同的 后来者居上