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的顺序,否则可能引起错误
复合选择器的总结
标签显示模式(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可以对他们设置宽度高度个对齐属性, 行内块元素的特点: 和相邻行内元素(行内块)在一行上,但是之间会有空隙,一行可以显示多个. 默认宽度就是它本身内容的宽度 高度,行高,外边距以及内边距都可以控制
三种模式总结
标签显示模式转换
块转行:display:inline; 行内专块:display:block; 块,行内元素转换为行内块:display:inline-block;
行高那些事(line-height)
一个行高是有四条线(顶线,中线,基线,底线)组成,因为是四条线故此是三个区域分别为上距离,内容距离个地距离 行高和高度的三种关系: 1:行高等于高度文字会垂直居中 2:行高大于高度文字会偏下 3:行高小于高度文字会偏上 理解文字的行高等于盒子高度文字会垂直居中:
CSS背景(background)
背景颜色
语法;background-color:颜色值;默认是transparent透明的 • 1
背景图片
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) 注意:背景半透明是指盒子背景半透明,盒子内容分不受影响.
背景总结
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>
结果为:蓝色
