接上:
1.4并集选择器(重要)
并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明。
并集选择器是各选择器通过英文逗号(,)连接而成,任何形式的选择器都可以作为并集选择器的一部分。
(约定的语法规范,并集选择器喜欢竖着写)如:
div,
p,
.pig li{
color:pink;
}
1.5伪类选择器
用于向某些选择器添加特殊效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
书写特点,用冒号(:)表示,比如 :hover、:first-child
1.6链接伪类选择器
- a:link (选择所有未被访问的链接)
- a:visited (选择所有已被访问的链接)
- a:hover (选择鼠标指针位于其上的链接)
- a:active (选择活动链接,即鼠标按下未弹起的链接)
注:1,为确保生效,要按照LVHA的顺序声明::link-:visited-:hover-:active
2.a链接在浏览器中有默认样式,所以我们实际工作中都需要给链接单独指定样式。
实际开发中的写法:
a {
color: gray;
}
a:hover {
color:red;
}
1.7 :focus伪类选择器
用于选取获得焦点的表单元素。
焦点就是光标,一般情况<input>类表单元素才能获取,因此这个选择器也主要针对表单元素来说。
input:focus {
background-color:yellow;
}
二:css的元素显示模式
1。作用,网页中标签非常多,在不同地方会用到不同类型的标签,了解他们的特点可以更好的布局网页,
元素显示模式就是元素(标签)以什么方式进行显示,比如<div>独占一行,比如一行可以放多个<span>
HTML元素一般分为块元素(如div)和行内元素(如span)。
2。块元素
<h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>等,<div>是最典型的块元素。
特点:
- 比较霸道,独占一行
- 高度宽度外边距及内边距都可以控制
- 宽度默认是容器(父级宽度)的100%
- 是一个容器及盒子,里面可以放行内或块级元素。
注:文字类元素不能使用块级元素,如<p>主要用于存放文字,一次<p>里面不能放块元素,特别是不能放<div>,同理<h1>~<h6>也是。
3。行内元素
常见的行内标签有<a><strong><b><em><i><del><s><ins><u><span>等,其中<span>是最典型的行内元素,有的地方也称内联元素。
特点:
- 相邻行内元素在一行上,一行可以显示多个
- 高宽直接设置是无效的
- 默认宽度就是它本身内容的宽度
- 行内元素只能容纳文本或其他行内元素
注:链接里不能再放链接
特殊情况链接<a>可以放块级元素,但是给<a>转换一下块级模式最安全。
4。行内块元素
<img/><input/><td>同时具有块元素和行内元素的特点,有些资料称行内块元素
特点:
- 和相邻(行内块)在一行上,但他们之间会有空白缝隙,一行可以显示多个(行内元素特点)
- 默认宽度就是它本身内容的宽度(行内元素特点)
- 高度,行高,外边距及内边距都可以控制(块级元素特点)
5。元素显示模式转换
比如增加链接<a>的触发范围。
转化为块元素:display:block;
转化为行内元素:display:inline;
转化为行内块:display:inline-block;
6。小工具snipaste的使用
f1截屏,f3将图片放在桌面最顶层,alt取色
7。案例:简洁版小米侧边栏
css没有提供文字垂直居中的代码,可以使用一个小技巧,让文字的行高等于盒子的高度(曲线救国)