DAY2-初识CSS

2018-08-14 本文已影响0人陈卷卷卷卷

一、什么是CSS

1.css是web标准中的表现标准，用来设置网页上的标签的样式(尺寸、大小、颜色、位置等等)
2.css代码/css文件，我们叫样式表
3.目前，我们使用的是css3。

二、CSS样式表分类

1.内联式：将CCS代码写在标签的style属性中
2.内部式：写在head标签中的style标签的内容中
3.外联式：写在一个css文件中，通过link标签来关联

注意：内部式和外联式没有固定的优先级，谁在最后就执行谁

三、css格式

选择器 {属性：属性值；属性：属性值}

选择器：用来选择需要设置样式的标签
属性：css属性
属性值：如果属性值是数字，表示的是大小要在后面加px

注意：每个属性之间要用分号隔开，否则属性无效

四、选择器

1.元素选择器(标签选择器):选中所有标签名对应的标签

格式：标签名{ }

2.id选择器：每个标签都有一个id属性，在HTML中，每个标签的id是唯一的

格式：#id{ }

3. .class选择器:每个标签都有一个class属性

格式：.class名{ }

4通配符：选中所有标签

格式：*{ }

5.层级选择器：对嵌套的标签进行针对性选择

格式：选择器1 选择器2 选择器3...

6.群组选择器:对嵌套的标签进行全部选择

格式：选择器1，选择器2，选择器3，...
代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            /*0.元素选择器*/
            a{
                background-color: yellow;
            }
            /*1.id选择器*/
            #a1{
                /*color: #FF0000;*/
                /*color: rgb(0,255,0);*/
                color: rgba(0,0,255,0.4);
            }
            /*2. .class选择器*/
            .c1{
                color: brown;
                background-color: bisque
            }
            
            /*3.通配符 * */
            *{
                font-size: 50px;
            }
            
            /*4.层级选择器 
             * 例子：选择div中的所有a标签
             */
            #all_a a{
                
                color: pink;
            }
            
            div div a{
                text-decoration: none;
            }
            
            /*5.群组选择器
             * 同时选中所有H标签和span标签
             */
            h1,span{
                background-color: #9ACD32;
            }
            
        </style>
    </head>
    <body>
        <h1>我是标题</h1>
        
        <span id="">
            我是span
        </span>
        
        <div id="">
            
            <div id="">
                <p></p>
            </div>
            
            <div id="all_a">
                <a href="">1</a></a>
                <a href="">2</a>
                <a href="">3</a>
                <a href="">4</a>
                <a href="">5</a>
            </div>
            
        </div>
        
        
        <a id="a1">我是a</a>
        
        <a href="">我是a2</a>
        
        <p class="c1">我是p</p>
        
        <div id="" class="c1">
            <a href="">我是a3</a>
        </div>
        <a href="">我是a4</a>
    </body>
</html>

四、伪类选择器

作用：改变不同操作下元素的式样，一般使用于超链接

格式：选择器 : 状态
1.link:初始状态---一次都没有访问成功的状态
2.visited:超链接访问后的状态---已经访问成功后的状态
3.hover:鼠标悬停在标签上的时候对应的状态
4.active:鼠标按住的状态
代码实现：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>伪类选择器</title>
        <style type="text/css">
            /*同时设置a标签的所有状态*/
            a{
                color: black;
            }
            
            a:link{
                color: green;
            }
            
            a:visited{
                color: pink;
            }
            
            a:hover{
                color: red;
                font-size: 20px;
            }
            
            a:active{
                font-size: 30px;
            }
            
        </style>
    </head>
    <body>
        <a href="http://www.taobao.com">百度一下</a>
        
    </body>
</html>