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-ybackground-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{}
看一下代码了解权重优先级:因为.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
{
color
: red
;
}
p
{
color
: yellow
;
}
.demo
{
color
: blue
;
}
</style
>
</head
>
<body>
<div
class="demo">
<p>继承的权重为
0</p
>
</div
>
</body
>
结果为:黄色
<head>
<meta charset
="UTF-8">
<title>Document
</title
>
<style>
div
{
color
: red
;
}
p
{
color
: yellow
;
}
.demo p
{
color
: blue
;
}
</style
>
</head
>
<body>
<div
class="demo">
<p>继承的权重为
0</p
>
</div
>
</body
>
结果为:蓝色
