CSS笔记(3)
CSS笔记(3)
CSS笔记(3)
刚刚学习完了CSS的文本属性,感觉还不是很难但是知识点还挺多的,偶尔会忘记一些...发现做笔记还是很有用的,我经常会翻自己写过的文章来看,感觉其实html不算太难,但是要记得东西真的好多好多啊...幸好我记了笔记.
学习内容:
CSS的引用方式:
行内样式表/内部样式表/外部样式表
Emmet语法;
(一)复合选择器:
后代选择器/子选择器
(二)伪类选择器;
链接伪类选择器
CSS的引用方式
1.行内样式表(行内式)
行内样式表(内联样式表)是在元素标签内部的style属性中设定的CSS样式.适合于修改简单样式.
2.内部样式表(嵌入式)
内部样式表是写到html页面内部,是将所有的CSS代码抽取出来,单独放在一个<style>标签中.
<style>标签理论上可以放在html文档的任意地方,但一般会放在<head>标签中.
3.外部样式表(链接式)用的最多!
实际开发都是外部样式表,适合于样式比较多的情况,核心是:样式单独写到CSS文件中,之后把CSS文件引入到HTML页面中使用.
1.新建一个后缀为.css的样式文件,把所有的CSS代码都放入此文件中.
2.在html页面中,使用<link>标签引入这个文件
<link rel="stylesheet" href="CSS文件路径">
Emmet语法
Emmet语法的前身是Zen coding,它使用缩写,来提高html/css的编写速度,Vscode已经集成该语法.
- 快速生成html结构语法
- 快速生成CSS样式
2.Emmet也可以快速生成CSS样式,比如text align: center我们可以输入tac, width: 100px可以输入w100.
(一)CSS的复合选择器
在CSS中,可以根据选择器的类型把选择器分成基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的.
- 复合选择器可以更准确,更高效的选择目标元素(标签).
- 复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的.
- 常用的复合选择器包括:后代选择器,子选择器,并集选择器,伪类选择器等等.
1.后代选择器(重要)
后代选择器又称为包含选择器,可以选择父元素里面的子元素.其写法就是把外层标签写在前面,内层标签写在后面,中间用空格分割.当标签发生嵌套时,内层标签就称为外层标签的后代.
语法:
元素1 元素2 {样式声明}
上述语法表示选择元素1里面的所有元素1(后代元素)
例如:
ul li {样式声明}
- 元素1和元素2中间用空格隔开
- 元素1是父级,元素2是子级,最终选择的是元素2
- 元素2可以是儿子,也可是是孙子等,只要是元素1的后代即可
- 元素1和元素2可以是任意基础选择器.
2.子选择器(重要)
子元素选择器只能选择作为某元素的最近一级子元素.简单理解就是选亲儿子元素.
语法:
元素1 > 元素2 {样式声明}
- 元素1和元素2之间用大于号隔开
- 元素1是父级,元素2是子级,最终选择的是元素2.
3.并集选择器
并集选择器可以选择多组标签,同时为他们定义相同的样式.通常用于集体声明.
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的部分.
语法:
元素1,元素2 {样式声明}
实例操作:
需求1:将a标签中的"百度"改成红色
<div class="nav">
<ul>
<li><a href="">百度</a> </li>
<li><a href="">百度</a></li>
</ul>
</div>考察的是后代选择器,首先我们定位到div,ul是div的儿子,li是ul的儿子,a又是li的儿子,所以选择的是后代选择器.
<style>
.nav ul li a {
color: #ff0000;
}
</style>
需求2:
将"大肘子"改成别的颜色
<div class="hot">
<a href="">大肘子</a>
<ul>
<li><a href="">猪头</a></li>
<li><a href="">猪尾巴</a></li>
</ul>
</div>这里考察的是子选择器,他只会选择离他最近的子元素的标签,在这里,有大肘子的a标签就是div最近的子标签,所以要用子选择器.
<style>
.hot>a {
color :rgb(188, 231, 68);
}
</style>
需求3:①将熊大和熊二改成粉色 ②同时也将小猪佩奇一家改成粉色
①:
<div>熊大</div>
<p>熊二</p>
<span>光头强</span>
<ul class="pig">
<li>小猪佩奇</li>
<li>猪妈妈</li>
<li>猪爸爸</li>
</ul>这时候,熊大和熊二的标签是不同的,但是要同时修改他们,所以要用到并集选择器.
<style>
.bear,p {
color:pink;
}
</style>
②:
由于任何形式的选择器都可以作为并集选择器的一部分,所以
<style>
.bear, p, .pig {
color:pink;
}
</style>
(二)伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第一个,第n个元素.
伪类选择器书写最大的特点就是冒号(:)表示,比如:hover/:first-child.
伪类选择器很多,比如链接伪类,结构伪类...这里主要学习链接伪类选择器.
1.链接伪类选择器
a:link 选择未访问过的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接(鼠标按下未弹起的链接)
注意事项:
为了确保生效,请按照LVHA的顺序声明 :Link-:Visited-:Hover-:Active
因为a链接在浏览器中具有默认样式,所以我们在实际工作中都需要给链接单独指定样式.
2.focus伪类选择器
:focus伪类选择器用于获取焦点的表单元素.
焦点就是光标,一般情况<input>表单元素才能获取,因此这个选择器也主要针对于表单元素来说.
效果如下:
当鼠标点击文本框时,边框的颜色会变化.
再或者是
当鼠标点击文本框时背景颜色的变化.
大致的语法:
总结:
腾讯云开发者
