day5
一、css选择器
1.序列选择器(css3新增的),可以在不给标记设置id或class的时候,根据同类型标记不同的排列方式来选取元素。分为同级、同类型两种,一般都不在元素的外层使用。
同级级别序列选择器,不能被其他类型的标记给隔开,隔开就无法选中。 语法: p:nth-child(1){background-color: orange;}(选中第一个) p:nth-last-child(3){}(选中倒数第三个)
同类型序列选择器,可以被不同类型标记给隔开 语法:p:first-of-type{background-color: gold; } p:nth-last-of-type(3){background-color: yellow; }
选中父元素中的唯一标记: p:only-child{ background-color: orange; }
2.伪类选择器,描述的是某种状态 a:link 描述的是鼠标的初始状态 a:visited 描述的是鼠标访问过后的状态 a:hover 描述的是鼠标的悬停(把鼠标放在文本上面)状态 a:active 描述的是鼠标的激活状态
访问过后,由于浏览器自身做了缓存状态的求别,刷新浏览器不会回到初始状态,可以识别你是否访问过某个网站。需要恢复的话可以清除浏览器的缓存。
selection伪类选择器,可以改变选中文本时的状态,但是只能修改文字背景和颜色,不能设置其他的样式p::selection{background-color: orange;color: #fff;}
应用
<!DOCTYPE html> <html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{ margin: 0; padding: 0; } nav{ width: 100%; height: 40px; background-color: black; margin-top: 100px; } nav ul{ width: 1000px; height: 100%; margin: 0 auto; } nav ul li{ list-style: none; float: left; font-size: 14px; line-height: 40px; padding: 0 25px; } nav ul li a{ text-decoration: none; color: #fff; } /* 表示鼠标划过li标记的时候,让其改变样式 */ nav ul li:hover{ background-color: greenyellow; } /* 表示鼠标划过li标记的时候,让它下的a标记改变文本颜色 */ nav ul li:hover a{ color: red; } </style> </head>
<body> <nav> <ul> <li>张涛很帅1</li> <li>张涛很帅2</li> <li>张涛很帅3</li> <li>张涛很帅4</li> <li>张涛很帅5</li> <li>张涛很帅6</li> <li>张涛很帅7</li> <li>张涛很帅8</li> </ul> </nav> </body> </html>
3.伪对象(元素)选择器,描述的不是某种状态,而是给标记添加一个元素(元素类型默认是内联)。after在某个元素之后添加内容。content表示内容,可以为空,但是不能省略
语法①:div::after{ content: "hello"; } div::after{ content: ""; width: 50px; height: 50px; background-color: orange; /* display: block; */ display: inline-block; }
语法②: first-letter 选中段落中第一个文字,但是只对第一行起作用 p::first-letter{ font-size: 20px; color: red; } first-line只对第一行的文本起作用 p::first-line{ color: red; }
4.群组选择器,一次性可以选择多个元素 body, ul, li, ol, dl, dt, dd, p, h1{ margin: 0; padding: 0; }
5.属性选择器,通过自身带来的属性来选择元素 通过属性选择元素: input[type]{ border: 1px solid orange; }
通过属性的属性值来选择元素: input[type="text"]{ width: 300px; border: 1px solid hotpink; }
通过属性的属性值的开头来选择元素: a[href^="h"]{ color: hotpink; }
通过属性的属性值的结尾来选择元素: a[href$="com"]{ color: orange; }
通过属性的属性值的任意字符来选择元素: a[href*="c"]{ color: gold; }
6.根和否定选择器,html是根标记,root是根标记 html{ background-color: orange; } root{ background-color: orange; }
否定选择器:给某个标记设置样式,除了这个标记以外的其他标记都会起作用。 input:not([type="text"]){ width: 200px; height: 30px; }
二、图片整合技术
图片整合技术也叫css小精灵,css sprite、雪碧图;网页将所有要用到的图片整合到一张图上面,通过backgroung-position属性来移动背景图从而达到想要的结果;能够减少对服务器的请求次数,从而减轻服务器的压力,也能够提高效率,做网页优化。
*{ margin: 0; padding: 0; } ul{ width: 248px; height: 22px; margin: 50px auto; } ul li{ width: 62px; height: 22px; line-height: 22px; list-style: none; font-size: 12px; float: left; text-align: center; background: url("./img/bg.gif") no-repeat; } ul li a{ text-decoration: none; color: black; } ul li:nth-child(2){ background-position-x: -62px; } ul li:nth-child(3){ background-position-x: -124px; } ul li:nth-child(4){ background-position-x: -186px; }
ul li:nth-child(1):hover{ background-position-y: -22px; } ul li:nth-child(2):hover{ background-position-y: -22px; } ul li:nth-child(3):hover{ background-position-y: -22px; } ul li:nth-child(4):hover{ background-position-y: -22px; }
ul li:hover{ background-position-y: -22px; } ul li:nth-child(1):hover, ul li:nth-child(2):hover, ul li:nth-child(3):hover, ul li:nth-child(4):hover{ background-position-y: -22px; }
三、定位属性
1.定位是一种让元素发生位置改变的技术,用来做网页布局。
position: static(静态定位) | relative(相对定位) | absolute(绝对定位) | fixed(固定定位)
2.定位使用的特性:
定位属性有层叠特性;要配合left、right、top、bottom来使用;他是一个单独的规则,每种定位的特性是不同的;设置完定位后,这个元素之前是什么类型和特点,设置完之后也是什么类型和特点(如内联不能设置高度和宽度,在设置完定位属性之后,依然不能设置高度和宽度)。
3.static静态定位特点:遵循标准流规则,网页正常的排版顺序;默认值(设置或不设置对标准流没有什么影响)
4.relative相对定位特点:不脱离文档流,但会占用空间;相对于自己之前在标准流的位置来定位;区分元素类型;用来对元素进行微调;一般配合绝对定位来使用(子绝父相)
5.absolute绝对定位特点:脱离文档流,不会占用空间;相对于祖先元素进行定位(如果父元素有定位流,那么就相对于父元素进行定位,如果没有就继续往上一级进行查找,直到找到body为止,如果还是没有就以body进行定位);不区分元素类型。
{ margin: 0; padding: 0; } .father{ width: 500px; height: 500px; background-color: orange; margin: 50px auto; position: relative; } .son{ width: 200px; height: 200px; background-color: hotpink; position: absolute; / 元素垂直居中 + 子绝父相 + 四个方向都设置为0 + margin:auto; + 注意点 => 设置left:0; right:0; 这个时候会把容器的宽度作为子元素可以移动位置的范围 => 设置top:0; bottom:0; 这个时候会把容器的高度作为子元素可以移动位置的范围 */ left: 0; right: 0; top: 0; bottom: 0; margin: auto; }
6.z-index属性,定位层级属性,可以改变定位层级的关系。默认情况下,最后定位的元素会在最上面。 z-index:auto | number