CSS复合选择器,标签的显示模式,行高,背景,css三大特性
CSS复合选择器
复合选择器作用:更准确精细的选择目标元素标签,复合选择器是由两个或者多个基础选择器,通过不同的方式组合而成
后代选择器
后代选择器也成为包含选择器
作用:用来选择元素或者子元素的子孙后代
其他写法就是吧外层标签写在前面,内层标签写在后面,中间用空格隔开,先写父亲爷爷,在写儿子孙子
父级 子级(属性:属性值;属性:属性值:}
交集选择器
交集选择器是由两个选择器组成,找到的标签必须满足:既有标签一的特点,也有标签二的特点
语法:h3.class{color:red}其中第一个为标签选择器,第二个为class选择器,两个选择器之间不能有空格.
并集选择器
作用:如果某些选择器定义相同的样式,就可以利用并集选择器,可以让代码简洁
并集选择器(css选择器分组)是哥哥选择器通过,连接而成的,通常员工与集体声明
语法:.class,h3{color:red;font-size:25px;}任何选择器都可以作为并集选择器的一部分
记忆技巧:并集选择器通常用于集体声明,逗号隔开,所有选择器都会执行后面样式,逗号可以理解为和的意思
eg:.one,p,#test{color:red;}表示类名为one和p标签和id为test的这三个选择器都会执行颜色为红色
链接伪类选择器
伪类选择器写法: :linl{}
作用:用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,比如可以选择第一个,第n个元素
因为伪类选择器很多,比如链接伪类,结构伪类.
链接伪类:
a:link{} //未访问的链接
a:visited//已访问的链接
a:hover//鼠标移动到连接上
a:active//选定的链接
注意:写的时候,他们的殊勋尽量不要颠倒,按照lvha的顺序,否则可能引起错误
复合选择器的总结
| 选择器 | 作用 | 特征 | 使用情况 | 隔开符号及用法 |
|---|---|---|---|---|
| 后代选择器 | 用来选择元素后代 | 是选择所有的子孙后代 | 较多 | 符号是空格.nava a |
| 子代选择器 | 选择最近一级元素 | 只选亲儿子 | 较少 | 符号是> .nav>p |
| 交集选择器 | 选择两个标签交集的部分 | 既是又是 | 较少 | 没有符号 p.one |
| 并集选择器 | 选择某些相同样式的选择器 | 可以用于集体声明 | 较多 | 符号是逗号 .nav,header |
| 链接伪类选择器 | 给链接更改状态 | 较多 | 重点记住a{}和a:hover{} |
标签显示模式(display)
1:块级元素
常见的额块级元素有h1~h6,p,div,ul,ol,li,等.
块级元素的特点:
独占一行
高度,宽度,外边距以及内边距都可以控制
宽度默认是容器(父级)的宽度
是一个容器级盒子,里面可以放行内或者块级元素,但注意p,h1~h6,dt属于文字标签不能放其他块级元素
2:行内元素
常见的行内元素有a,strong,b,em,i,del,s,ins,u,span
行内元素的特点:
相邻行内元素在一行上,一行可以显示多个
高宽直接设置是无效的(宽度为内容的长短)
默认宽度就是内容的宽度
行内元素只能容纳文本或者其他行内元素
注意:
链接里面不能再放链接
特殊情况a里面可以放块级元素,但是给a转换一下块级模式最安全.
3:行内块元素
在行内块元素中有几个特殊的标签img,input,td可以对他们设置宽度高度个对齐属性,
行内块元素的特点:
和相邻行内元素(行内块)在一行上,但是之间会有空隙,一行可以显示多个.
默认宽度就是它本身内容的宽度
高度,行高,外边距以及内边距都可以控制
三种模式总结
| 元素模式 | 元素排序 | 设置样式 | 默认宽度 | 包含 |
|---|---|---|---|---|
| 块级元素 | 一行只能放一个块级元素 | 可以设置高度宽度 | 容器的100% | 容器可以包含任何标签 |
| 行内元素 | 一行可以放多个行内元素 | 不可以直接设置高度和宽度 | 他本身内容的宽度 | 容纳文本或其他行内元素 |
| 行内块元素 | 一行方多个行内块元素 | 可以设置宽度和高度 | 它本身内容的宽度 |
标签显示模式转换
块转行:display:inline;
行内专块:display:block;
块,行内元素转换为行内块:display:inline-block;
行高那些事(line-height)
一个行高是有四条线(顶线,中线,基线,底线)组成,因为是四条线故此是三个区域分别为上距离,内容距离个地距离
行高和高度的三种关系:
1:行高等于高度文字会垂直居中
2:行高大于高度文字会偏下
3:行高小于高度文字会偏上
理解文字的行高等于盒子高度文字会垂直居中:
CSS背景(background)
背景颜色
语法;background-color:颜色值;默认是transparent透明的
背景图片
background-image:none|url(url)
eg:background-image:url(images/1.png)//不需要加引号
背景平铺
background-repeat:repeat|no-repeat|repeat-x|repeat-y
repeat:背景图像在纵向和横向上平铺(默认的)
no-repeat:背景图像不平铺
repeat-x:背景图像在横向上平铺
repeat-y:背景图像在纵向上平铺
背景位置(重点)
语法:background-position:length||length background-position:position||position
eg:background-position:x座标 y座标
水平居中:background-position:center center
参数:length->百分数|有浮点数和单位标识符组成的长度值
position->top|center|botton|left|center|right方位词
注意:
必须先指定background-image属性
position后面是x座标和y座标,可以施一公方位词或者精准单位
如果只指定了一个方位词,另一个默认居中 50%
如果只指定一个数值,那么该数值用于x座标,另一个默认为y座标,默认居中
如果指定两个值,两个值都是方位名字,则两个值前后顺序无关,比如left,top和top,left效果一样
如果指定两个值,精确单位和方位名字混合使用,则第一个值是x座标,第二个值是y座标
背景附着
背景附着就是解释背景是滚动的还是固定的
语法:background-attachment:scroll|fixed
参数:scroll:背景图像是随对象内容滚动的.fixed背景图像固定
背景简写
background:属性的值的书写顺序官方并没有强制标准的,为了可读性建议大家书写如下
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background:transparent url(image.png) repeat-y scroll center top;
背景透明
background:rgba(0,0,0,0.3)
最后一个参数是:alpha透明度取值范围0~1
我们习惯把0.3的0省略掉,这样写background:rgba(0,0,0,.3)
注意:背景半透明是指盒子背景半透明,盒子内容分不受影响.
背景总结
| 属性 | 作用 | 值 |
|---|---|---|
| background-color | 背景颜色 | 预定义的颜色值/十六进制RGB代码 |
| background-image | 背景图片 | url(图片路径) |
| background-repeat | 背景平铺 | repeat/no-repeat/repeat-x/repeat-y |
| background-position | 背景位置 | length/position 分别是x和y座标,切记如果有精确数值单位,则必须按照先x后y的写法 |
| background-attachment | 背景固定还是滚动 | scroll/fixed |
| 背景简写 | 更简单 | 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置 他们没有顺序 |
| 背景透明 | 让盒子半透明 | background:rgba(0,0,0,.3);后面必须四个值 |
CSS三大特性:层叠性,继承性,优先级
层叠性
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
a{
color: red;
}
a{
color: green;
}
</style>
</head>
<body>
<a href="http://xiaomi.com" class="y">网站首页</a>
</body>
效果为:绿色
继承性
作用:降低复杂性
text-,font-,line-这些元素开头的可以继承,以及color属性
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{
color: red;
}
</style>
</head>
<body>
<div>
<p>网站首页</p>
</div>
</body>
效果:文字为红色
优先级(重点)
权重计算公式
!impnort(无穷大)>行内(1,0,0,0)>id(0,1,0,0)>类(0,0,1,0)>标签(0,0,0,1)>继承(0,0,0,0)
eg:.class{color:red !import}
继承权重是0.
如果选中了,那么谁权重大听谁得
如果没有选中,那么权重是0,因为继承的权重是0
注意:有两个特殊标签链接和h标题,他们浏览器有自己默认的方式,继承的权重为0,所以我们还是要单独给链接和标题一个样式
权重叠加
.class a{}//类选择器的权重0,0,1,0+标签选择器的权重0,0,0,1=0,0,1,1
看一下代码了解权重优先级:因为.nav p权重为0,0,1,1而.p1权重为0,0,1,0因为这种写法不能给p1渲染颜色最简单的写法是.nav .p1{color:yellow}权重为0,0,2,0因此p1会为黄色
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.nav p{
color: red;
}
.p1{
color: yellow;
}
</style>
</head>
<body>
<div class="nav">
<p class="p1">网站首页</p>
<p>网站底部</p>
</div>
</body>
注意:0,0,0,5+0,0,0,5=0,0,0,10所以不会存在10个标签要不一个类权重高的问题
看一下代码说出最终颜色
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{/*给到p标签的权重为0*/
color: red;
}
p{/*给到p标签的权重为0,0,0,1*/
color: yellow;
}
/*因为demo没有选p标签,所以继承的权重为0 */
.demo{/*给到p标签的权重为0*/
color: blue;
}
</style>
</head>
<body>
<div class="demo">
<p>继承的权重为0</p>
</div>
</body>
结果为:黄色
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div{/*给到p标签的权重为0*/
color: red;
}
p{/*给到p标签的权重为0,0,0,1*/
color: yellow;
}
/*因为demo没有选p标签,所以继承的权重为0 */
.demo p{/*给到p标签的权重为0,0,1,1*/
color: blue;
}
</style>
</head>
<body>
<div class="demo">
<p>继承的权重为0</p>
</div>
</body>
结果为:蓝色