day03-css3选择器
01属性选择器：
属性选择器：属性是相对于标签而言。所谓属性选择器就是根据指定名称的属性的值来查找元素
1.E[attr]:查找指定的拥有attr属性的E标签。如查找拥有style属性的li标签
li[style]{
text-decoration: underline;
}
2.E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签。如想查找拥有class属性并且值为Red的li标签 =是严格匹配
li[class=red]{
/*font-size: 30px;*/
}
3.E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签
li[class*=red]{
/*font-size: 30px;*/
}
4.E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签\
li[class^=blue]{
font-size: 30px;
}
5.E[attr$=value]:查找拥有指定的attr属性并且属性值以value开结束的E标签
li[class$=blue]{
/*font-size: 30px;*/
}
02兄弟选择器：
兄弟伪类：
+：获取当前元素的相邻的满足条件的元素
~：获取当前元素的满足条件的兄弟元素
下面这句样式说明查找 ：添加了.first样式的标签的相邻的li元素:
1.相邻
2.必须是指定类型的元素
.first + li{
color: blue;
}
下面样式查找添加了.first样式的元素的所有兄弟li元素:
1.必须是指定类型的元素
.first ~ li{
color: pink;
}
0.3伪类选择器：
相对于父元素的结构伪类：
E:first-child:查找E元素的父级元素中的第一个E元素。在查找的时候并不会限制查找的元素的类型
下面这句样式查找：li的父元素中的第一个li元素：
1.相对于当前指定元素的父元素
2.查找的类型必须是指定的类型
li:first-child{
color: red;
}
E:last-child:查找E元素的父元素中最后一个指定类型的子元素
li:last-child{
background-color: skyblue;
}
查找的时候限制类型 first-of-type
1.也是相对于父元素
2.在查找的时候只会查找满足类型条件的元素，过渡掉其它类型的元素
li:first-of-type{
color: red;
}
li:last-of-type{
color: orange;
}
指定索引位置 nth-child(从1开始的索引||关键字||表达式)
li:nth-child(5){
background-color: lightblue;
}
偶数个元素添加背景 even:偶数 odd:奇数
/*li:nth-child(even){
background-color: orange;
}
li:nth-child(odd){
background-color: pink;
}*/
li:nth-of-type(even){
background-color: orange;
}
li:nth-of-type(odd){
background-color: pink;
}
想为前面的5个元素添加样式
/n:默认取值范围为0~子元素的长度.但是当n<=0时，选取无效
0>>5
1>>4
...
4>>1
5>>0/
li:nth-last-of-type(-n+5){
font-size: 30px;
}
li:nth-of-type(-n+5){
font-size: 30px;
}
空值:没有任何的内容，连空格都没有:
li:empty{
background-color: red;
}
HTML5 选择器-伪类target：
:target:可以为锚点目标元素添加样式，当目标元素被触发为当前锚链接的目标时，调用此伪类样式。
demo：
h2:target{
color: red;
}
<body>
<ul class="nav">
<li><a href="#title1">CSS (层叠样式表)</a></li>
<li><a href="#title2">实例</a></li>
<li><a href="#title3">发展历史</a></li>
<li><a href="#title4">使用方法</a></li>
<li><a href="#title5">布局特点</a></li>
<li><a href="#title6">创建编辑</a></li>
</ul>
<div class="content">
<h2 id="title1">xxxxxxx</h2>
<p>xxxxxxxxxxxxx</p>
<h2 id="title1">xxxxxxx</h2>
<p>xxxxxxxxxxxxx</p>
<h2 id="title1">xxxxxxx</h2>
<p>xxxxxxxxxxxxx</p><h2 id="title1">xxxxxxx</h2>
<p>xxxxxxxxxxxxx</p>
<h2 id="title1">xxxxxxx</h2>
<p>xxxxxxxxxxxxx</p>
</div>
</body>
伪元素-before-after：
a) 重点：E::before、E::after
i. 是一个行内元素，需要转换成块:display:block float:** position:
ii. 必须添加content,哪怕不设置内容，也需要content:””
iii. E:after、E:before 在旧版本里是伪类，在新版本里是伪元素，新版本下E:after、E:before会被自动识别为E::after、E::before，按伪元素来对待，这样做的目的是用来做兼容处理
iv. E::before: 定义在一个元素的内容之前插入content属性定义的内容与样式
v. E::after: 定义在一个元素的内容之后插入content属性定义的内容与样式
vi. 注意：
-
<u>IE6、IE7与IE8（怪异模式Quirks mode）不支持此伪元素</u>
-
<u>CSS2中 E:before或者E:after，是属于伪类的，并且没有伪元素的概念，CSS3中 提出伪元素的概念 E::before和E::after，并且归属到了伪元素当中，伪类里就不再存在E:before或者 E:after伪类</u>
b) E::first-letter文本的第一个字母或字(不是词组)
c) E::first-line 文本第一行
d) E::selection 可改变选中文本的样式
demo：
div:nth-of-type(1){
width: 300px;
height: 200px;
background-color: red;
float: left;
}
div:nth-of-type(2){
width: 100px;
height: 200px;
background-color: blue;
float: left;
position: relative;
}
div:nth-of-type(2)::before{
/*必须添加content属性，否则后期不可见*/
content: "";
/*默认是行级元素，如果想设置宽高，就必须转换为块级元素*/
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
left: -10px;
top: -10px;
}
div:nth-of-type(2)::after{
/*必须添加content属性，否则后期不可见*/
content: "";
/*默认是行级元素，如果想设置宽高，就必须转换为块级元素*/
position: absolute;
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 10px;
left: -10px;
bottom: -10px;
}
</style>
html5其他的伪类选择器：
<style>
/*获取第一个字符：实现首字下沉*/
p::first-letter{
color: red;
font-size: 30px;
float: left;/*文本环绕*/
}
/*获取第一行内容:如果设置了::first-letter,那么无法同时设置它的样式*/
p::first-line{
text-decoration: underline;
}
/*设置当前选中内容的样式*/
p::selection{
background-color: #000;
color: red;
/*它只能设置显示的样式，而不能设置内容大小*/
/*font-size: 30px;*/
}
</style>
</head>
<body>
<p>眉毛上的汗水和眉毛下的泪水，你必须选择一样<br>你不努力，活该生活在社会的最底层</p>
颜色使用示例:
01 .16进制：
background-color: #c9ffa6;
2.rgb(红，绿，蓝)
background-color: rgb(255,150,0);
03.hsl
hsl(颜色(0360)，饱和度(0%100%)，明度(0%~100%))
明度默认是50%,一般建议保留50的值
background-color: hsl(300,100%,50%);
h5中的颜色设置
rgba(红色，绿色，蓝色，透明度)
透明度：0代表完全透明 1代表完成不透明 不会影响子元素
background-color: rgba(255,0,255,0.2);
background-color: hsla(300,100%,50%,0.2);
.关于透明度的补充说明：
a)opacity只能针对整个盒子设置透明度，子盒子及内容会继承父盒子的透明度
b)transparent 不可调节透明度，始终完全透明
c)使用rgba 来控制颜色，相对opacity ，不具有继承性
文本(shadow阴影):
text-shadow还没有出现时，大家在网页设计中阴影一般都是用photoshop做成图片，现在有了css3可以直接使用text-shadow属性来指定阴影。这个属性可以有两个作用，产生阴影和模糊主体。这样在不使用图片时能给文字增加质感
- 语法：
text-shadow ： none | <length> none | [<shadow>, ] * <shadow> 或none | <color> [, <color> ]*
也就是：
text-shadow:[颜色(Color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)],[颜色(color) x轴(X Offset) y轴(Y Offset) 模糊半径(Blur)]...
或者
text-shadow:[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)],[x轴(X Offset) y轴(Y Offset) 模糊半径(Blur) 颜色(Color)]...
2.取值：
a)<length>：长度值，可以是负值。用来指定阴影的延伸距离。其中X Offset是水平偏移值，Y Offset是垂直偏移值
b)<shadow>：阴影的模糊值，不可以是负值，用来指定模糊效果的作用距离
c)<color>：指定阴影颜色，也可以是rgba透明色。
image.png
3.说明：
可以给一个对象应用一组或多组阴影效果，方式如前面的语法显示一样，用逗号隔开。text-shadow: X-Offset Y-Offset Blur Color中X-Offset表示阴影的水平偏移距离，其值为正值时阴影向右偏移，如果其值为负值时，阴影向左偏移；Y-Offset是指阴影的垂直偏移距离，如果其值是正值时，阴影向下偏移反之其值是负值时阴影向顶部偏移；Blur是指阴影的模糊程度，其值不能是负值，如果值越大，阴影越模糊，反之阴影越清晰，如果不需要阴影模糊可以将Blur值设置为0；Color是指阴影的颜色，其可以使用rgba色
4.一些效果案例代码：
.demo{
width: 600px;
padding: 30px;
background-color: #666;
margin:20px auto;
text-align: center;
font:bold 80px/100% "微软雅黑";
color: #fff;
}
/*侧阴影效果*/
.demo1{
text-shadow: 2px 2px 2px #ff0000;
}
/*辉光效果*/
.demo2{
text-shadow: 0 0 30px red;
}
/*多层辉光效果*/
.demo3{
text-shadow:0 0 5px #fff,0 0 15px #fff,0 0 40px #fff ,0 0 70px red ;
}
/*苹果经典效果*/
.demo4{
color: black;
text-shadow: 0 1px 1px #fff;
}
/*浮雕效果*/
.demo5{
color: #ccc;
text-shadow: -1px -1px 0px #fff,-2px -2px 0px #eee,1px 1px 0px #444,2px 2px 0px #333;
}
/*模糊字效果*/
.demo6{
color: transparent; /*将本身设置为透明*/
text-shadow: 0 0 6px #ff9966;
盒模型：
1.在默认情况下，CSS设置的盒子宽度仅仅是内容区的宽度，而非盒子的宽度。同样，高度类似。真正盒子的宽度（在页面呈现出来的宽度）和高度，需要加上一些其它的属性。例如：
a)padding + border + width = 盒子的宽度
b)padding + border + height = 盒子的高度
很明显，这不直观，很容易出错，造成网页中其它元素的错位。
- CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变
a)content-box:对象的实际宽度等于设置的width值和border、padding之和
b)border-box： 对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度
3.浏览器的兼容性：
IE8及以上版本支持该属性，Firefox 需要加上浏览器厂商前缀-moz-，对于低版本的IOS和Android浏览器也需要加上-webkit-
边框圆角：
border-radius可以通过值来定义样式相同的角，也对每个角分别定义
1.值的说明：
border-radius：px: 将创建四个大小一样的圆角
border-radius:px *px *px px: 四个值分别表示左上角、右上角、右下角、左下角
border-radius:px px：第一个值表示左上角、右下角；第二个值表示右上角、左下角
border-radius:px *px *px：第一个值表示左上角；第二个值表示右上角、左下角；第三个值表示右下角
2.单个圆角的设置：除了同时设置四个圆角以外，还可以单独对每个角进行设置。对应四个角，CSS3提供四个单独的属性：
- border-top-left-radius
- border-top-right-radius
- border-bottom-right-radius
- border-bottom-left-radius
这四个属性都可以同时设置1到2个值。如果设置1个值，表示水平半径与垂直半径相等。如果设置2个值，第一个值表示水平半径，第二个值表示垂直半径
3.补充：创建两个值的非对称圆角还有一种书写方式：如border-radius:20px/10px;表示在水平方向上20px,在垂直方向上10px;具体说明如下：可分别设置长、短半径，以“/”进行分隔，遵循“1，2，3，4”规则，“/”前面的1~4个用来设置横轴半径（分别对应横轴1、2、3、4位置 ），“/”后面1~4个参数用来设置纵轴半径（分别对应纵轴1、2、3、4位置 ）
demo:
/*添加边框圆角*/
/*1.设置一个值：四个角的圆角值都一样*/
/*border-radius: 10px;*/
/*2.设置两个值:第一个值控制左上/右下，第二个值控制右上/左下*/
/*border-radius: 10px 30px;*/
/*3.设置三个值：第一个值控制左上，第二值控制右上/左下，第三个值控制右下*/
/*border-radius: 10px 40px 60px;*/
/*4.设置四个值：左上 右上 右下 左下*/
/*border-radius: 10px 30px 60px 100px;*/
/*添加/是用来设置当前个不同方向的半径值 水平x方向/垂直y方向*/
border-radius: 100px/50px;
/*添加某个角点的圆角*/
/*border-radius: 0px 50px 0px 0px;*/
/*border-上下-左右-radius:*/
/*border-top-right-radius: 100px;
border-top-left-radius: 100px;*/
/*border-bottom-left-radius: 100px;
border-bottom-right-radius: 100px;*/
/*设置某个角点的两个方向上的不同圆角*/
/*border-top-right-radius: 100px 50px;
border-bottom-left-radius: 80px 40px;
border-bottom-right-radius: 60px 30px;
border-top-left-radius: 40px 20px;*/
/*如果想设置四个角点的不同方向上的不同圆角值*/
/*分别是水平方向的：左上，右上，右下，左下 / 垂直方向的：左上，右上，右下，左下*/
/* border-radius: 100px 0px 0px 0px/20px 0px 0px 0px; */
}
案例：android机器人
<style>
*{
padding: 0;
margin: 0;
}
body{
background-color: #ccc;
}
.content{
width: 500px;
height: 500px;
border: 1px solid red;
margin:50px auto;
}
.an_header{
width: 250px;
height: 125px;
background-color: darkgreen;
margin: 10px auto;
/*添加圆角*/
border-radius: 125px 125px 0 0;
position: relative;
}
/*使用伪元素添加眼睛*/
.an_header::before,
.an_header::after{
/*1.一定设置content属性*/
content: "";
/*2.如果需要设置宽度就应该转换其为块级元素，它默认是行级元素 float display position*/
position: absolute;
bottom: 40px;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: #fff;
}
.an_header::before{
left: 70px;
}
.an_header::after{
right: 70px;
}
.an_body{
width: 250px;
height: 250px;
background-color: darkgreen;
border-radius: 0px 0px 20px 20px;
margin:0 auto;
position: relative;
}
.an_body::before,
.an_body::after{
content: "";
position: absolute;
top: 20px;
background-color: darkgreen;
width: 30px;
height: 180px;
border-radius: 10px;
}
.an_body::before{
left:-40px;
}
.an_body::after{
right:-40px;
}
.an_footer{
width: 250px;
height: 100px;
position: relative;
margin:0 auto;
}
.an_footer::before,
.an_footer::after{
content: "";
position: absolute;
top: 00px;
background-color: darkgreen;
width: 30px;
height: 90px;
border-radius: 0px 0px 10px 10px;
}
.an_footer::before{
left: 50px;
}
.an_footer::after{
right: 50px;
}
</style>
</head>
<body>
<div class="content">
<div class="an_header"></div>
<div class="an_body"></div>
<div class="an_footer"></div>
</div>
</body>
image.png
边框阴影：
文本阴影：text-shadow:offsetX offsetY blur color
边框阴影：box-shadow:h v blur spread color inset
h:水平方向的偏移值
v:垂直方向的偏移值
blur:模糊--可选，默认0
spread:阴影的尺寸，扩展和收缩阴影的大小--可选 默认0
color:颜色--可选，默认黑色
inset:内阴影--可选,默认是外阴影
值 描述
h-shadow 必需。水平阴影的位置。允许负值。
v-shadow 必需。垂直阴影的位置。允许负值。
blur 可选。模糊距离。
spread 可选。阴影的尺寸。值越大，阴影的扩散面积越大
color 可选。阴影的颜色。
inset 可选。将外部阴影 (outset) 改为内部阴影。
demo:
*为item添加边框阴影*/
div[class=item]:nth-child(-n+4){
box-shadow: 1px 1px 3px 0px #bbb;
}
/*可以同时添加多个边框阴影*/
div[class=item]:last-child{
box-shadow: 1px 1px 2px #ff0000 inset,-1px -1px 2px #ff0000 inset;
}
边框图片
1.功能：将图片规定为包围 div 元素的边框
a)定义和用法： border-image 属性是一个简写属性，用于设置以下属性
border-image-source
border-image-slice
border-image-width
border-image-outset
border-image-repeat
b)属性说明：
值 描述
border-image-source 用在边框的图片的路径。
border-image-slice 图片边框向内偏移—裁切。
border-image-width 图片边框的宽度。
border-image-outset 边框图像区域超出边框的量。
border-image-repeat 图像边框是否应平铺(repeated)、铺满(rounded)或拉伸(stretched)。
2.案例：任意拉伸的按钮：通过一个按钮的背景图片制作出任意大小的按钮，实现背景填充效果：
1.效果：
.downLoad{
width:80px;
height: 30px;
display: block;
text-align: center;
line-height: 30px;
border: 1px solid #ccc;
/*设置图片边框背景*/
border-image: url("../images/btn_bg.png");
/*设置裁切区域，同时设置填充模式*/
border-image-slice: 10 fill;
/*设置边框的大小，这个一般与裁切区域大小一致，否则就发生缩放*/
border-image-width: 10px;
/*设置边框的重复模式*/
border-image-repeat: round;
