首页 > > 网页制作 > css >

CSS3-1

2018-06-24 02:24:53来源：未知阅读 ()

css3

1 学习前置条件：html + css2

2 概述

　　*历史　　

　　　　css3 就是层叠样式表的目前的最高版本，带来了许多新特性。如，圆角、渐变、过渡、动画、新布局(多列布局缩进盒子等)

// css 发展之初的这个设计，以至于css得以发展的如此之好。
// 遇到不认识的标签  它不会报错，并能让下面的代码继续起效。
haha {

}
// 无haha 标签，但是 p标签依旧有效
p {
hello: 122px;
font-size: 20px;//无hello元素，但是 font-size依旧有效。
}

* 兼容
　　http://html5test.com/ 在此内可以看看兼容的一些问题

css3更多用在移动端，移动端没有IE浏览器，PC端还要等段
时间才能完全使用

3 css3新增内容

* 选择器

关系选择器：

//1. 设置亲儿子的属性样式，孙子无用。   亲儿子  不是后代，IE7开始兼容
.wrap > p {
  color: red;  
}
//h2 标签的紧挨着的下一个 p 标签       下一个兄弟  IE7开始兼容
h2+p{
　　color: red;
}
//h4 标签后面的所有的兄弟 p 标签       同上
h4~p{
　　color: red;
}

属性选择器 //通过选择指定标签内的值来选择标签

1 img[src="img/3.png"]{
2   border:1px solid red;  
3 }

还可以 []直接选择，甚至可以 [][]

[src="img/3.png"]{

}

[src="img/3.png"][alt="aa"]{

}

还有以...开头的标签选择

 1 // ^ 表示以...开头的标签
 2 // $ 表示以...结尾的标签
 3 // * 表示含有...的标签
 4 // | 表示以...开头，并紧跟一个 - 的标签，等价于 [class^="para-"]
 5 // ~ 表示含有后面设置的类选择器名称的标签
 6 p[class^="para"]{
 7   color: red;  
 8 }
 9 p[class$="1"]{
10   font-size: 24px;  
11 }
12 p[class*="p"]{
13   background-color: yellow;  
14 }
15 p[class|="p"]{
16   background-color: yellow;  
17 }
18 p[class~="demo1"]{
19   text-decoration: underline;  
20 }
21 
22 <body>
23     <p class="para-1 demo1">段落</p>
24     <p class="para-2 demo1">段落</p>
25     <p class="para-3 demo2">段落</p>
26     <p class="para-4">段落</p>
27     <p class="pg1">段落</p>
28     <p class="pg2">段落</p>
29 </body>

儿子序选择器 (序号从1开始不是0)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test anything</title>
    <style type="text/css">
        /* 逐一打开注解进行测试 */
        /* 1 :first-of-type  选择属于其父元素的首个 .haha 元素的每个 .haha 元素。*/
        /*.haha:first-of-type{
            color: green;
        }*/

        /* 2 :last-of-type  选择属于其父元素的最后 .haha 元素的每个 .haha 元素。*/
        /*.haha:last-of-type{
            color: red;
        }*/

        /* 3 :only-of-type 选择属于其父元素唯一的 .haha 元素的每个 .haha 元素。*/
        /*.haha:only-of-type{
            color: orange;
        }*/

        /* 4 :only-child 选择属于其父元素的唯一子元素的每个 .haha 元素。*/
        /*.haha:only-child{
            color: pink;
        }*/

        /* 5 :nth-child(n) 选择属于其父元素的第二个子元素的每个 .haha 元素。*/
        /*.haha:nth-child(2){
            color: blue;
        }*/

        /* 6 :nth-last-child(n) 元素从最后一个子元素开始计数,选择属于其父元素第二个子元素每个.haha*/
        /*.haha:nth-last-child(2){
            color: blue;
        }*/

        /* 7 :nth-of-type(n) 选择属于其父元素第二个 .haha 元素的每个 .haha 元素。*/
        /*.haha:nth-of-type(2){
            color:red;
        }*/
        /* 8 :nth-last-of-type(n) */
        /*.haha:nth-last-of-type(2){
            color:red;
        }*/
        /* 9 :first-child 选择属于父元素的第一个子元素的每个 .haha 元素。*/
        /*.haha:first-child{
            color:red;
        }*/
        /* 10 :last-child 选择属于其父元素最后一个子元素每个 .haha 元素。*/
        /*.haha:last-child{
            color:red;
        }*/
    </style>
</head>

<body>
    
    <p class="haha">p1</p>
    <p class="haha">p2</p>
    <p class="haha">p3</p>
    <p class="haha">
        <span class="haha">p4 span1</span>
        <i class="haha">p4 i1</i>
        <span class="haha">p4 span2</span>
        <i  class="haha">p4 i2</i>
        <span class="haha">p4 span3</span>
        <i class="haha">p4 i3</i>
    </p>
    <p class="haha">p5</p>
    <div class="haha">
        <div class="haha">
            div1 div1
        </div>
    </div>
    <div class="haha">
        <div class="haha">
            div2 div1
        </div>
    </div>
    <div class="heihei">
        <div class="haha">
            div3 div1
        </div>
        <div class="haha">
            div3 div2
        </div>
    </div>
    <h1 class="haha">h1</h1>
    <h3 class="haha">h3_1</h3>
    <h3 class="haha">h3_2</h3>
    <h3 class="haha">h3_3</h3>
    <h3 class="haha">h3_4</h3>
</body>
</html>

伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        /* a:link a:hover a:visited a:active

        * :hover 能够被所有的元素使用 IE7兼容
           div:hover {}
        *  :focus得到焦点时

        *  :not
            p:not(.demo) 代表选择中class没有demo类的p元素

        *  :only-child 唯一的儿子
        
        *  :empty 空标签

           <div></div>    

        *  :checked选中的
        
        *  :disabled和:enabled IE9兼容 */
    </style>
</head>
<body>
    <p>    一：  :hover
        以前的伪类：  a:link a:hover a:visited a:active  <br/>
        :hover 能够被所有的元素使用 IE7兼容  <br/>
        比如: div:hover {}
    </p>
    <p>
        二:  :focus
        比如：  input:focus      选择获得焦点的 input 元素。
        大致使用意义在于：焦点到了input元素后，设置 input 的一些特效。
    </p>
    <p>
        三：  :not
        比如： p:not(.demo) 代表选择中class没有demo类的p元素(排除的效果)
    </p>
    <p>
        四：  :only-child 每个标签下，只有一个指定元素。
    </p>
    <p>   
        五：  :empty 空标签
           比如：<div></div>    （标签首尾相接，无任何东西。用得少）
    </p>
    <p>
        六：  :checked 选中的 (一般用在单选按钮和复选框)
        如：
        input[type="radio"]:checked {

        }
    </p>
    <p>  
        七：  :disabled和:enabled  不可编辑和可以编辑 IE9兼容 
        <input type="text" disabled><!-- 文本框就不可被编辑 -->
        <input type="text" enabled> <!-- 文本框就可被编辑,默认 --> 
    </p>
</body>
</html>

伪元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h2>伪元素  </h2>
    <h3>::before与::after</h3>
    <h4>::before是在标签内容<strong>内</strong>的最开始。所以，其内容的父类是使用它的元素标签</h4>
    <p>如下：p标签是 内容“>>>>”的父类</p>
    <p>
        p::before {
            content:">>>>"; //在内容的最前面加入的内容
            display: block; //对添加内容设置成块元素
            color: red;     //对添加内容设置颜色。
           }
    </p>
    <p>p::after 同上</p>
    <p>
        总结：
            1、content表示内容，所有的::before必须有content属性，没有content，则写成content:"" 
            2、::before和::after是行内元素，假如要设置宽高 需要转成块元素
            3、IE8不兼容::after 但是兼容:after 所以我们为了更大的兼容 :after即可
            4、还可以用伪元素清除浮动！！如下：
    </p>
    <p>
        .cl::after{
            content:"";
            display: block;
            clear: both;
        }
    </p>

    <h2>其他几个伪元素</h2>
    <p>
       ::selection 被选中的文字样式 IE9开始兼容    
       ::first-letter 表示第一个文字 IE9开始兼容
       ::first-line 表示第一行     IE9开始兼容
    </p>
</body>
</html>