css 第一次亲密接触

css：层叠样式表，不能单独使用，要和html相结合
1. 样式表：有很多的属性和属性值，来设置内容样式
2. 层叠：一层一层的，样式优先级
3. 优先级：最终以谁的样式为准
使用css的目的：把网页的样式和内容进行分离，利于代码维护。
html和css的四种结合方式：
1. 在html标签内使用style属性值，style=”css代码”，css代码一般格式为属性：属性值

<div style="background: red;color: blue;">你好，css</div>

2.使用html标签

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>你好，css</title>
</head>
    <style type="text/css">  /*样式标签*/
        div{                    /*指定标签*/
            background: yellow;     /*修饰*/
            color: red;
        }
    </style>
<body>

    <div id="">             <!--css修饰的内容-->
        一定转前端
    </div>
</body>
</html>

3.使用link标签，写在head里面
新建一个css文件，在link里面指定css文件的路径

<link rel="stylesheet" type="text/css" href="css/first.css" /><!--stylesheet:样式表      href指定的路径-->
div{
    background: green;
    color: blueviolet;
}

使用html的style标签，在标签内使用@import url(指定css的文件路径)

<style type="text/css">
        @import url(css/first.css);
</style>

5.css选择器

标签选择器

div{                
        color: red;
    }

class选择器，每一个Html标签都有一个class属性，可以设置class属性的值，写法为： .class属性值或者标签.属性值

<!--html代码-->
    <div class="aa">            
        这些年，一个人
    </div>
    <p class="aa">风也过，雨也走</p>

/*css代码*/
.aa{
    color: #FF0000;
}
p.aa{
    color:blue;
}

每一个html标签都有一个id属性，通过设置id值来设置css样式,写法为： #id属性值，或者标签#id属性值

<!--html代码-->
    <div id="hehe">         
        这些年，一个人
    </div>
    <p id="hehe">风也过，雨也走</p>
/*css代码*/
#hehe{  /*所有id值为hehe的都设置背景色为#00ff00*/
    background: #00FF00;
}
p#hehe{
    background: black;
}

6.css的扩展选择器
a.关联选择器，设置嵌套标签的样式

<!--html代码-->
    <div >      <!--只有这一个发生变化，字体颜色为红色-->
        <p>
            这些年，一个人
        </p>
    </div>
    <p>风也过，雨也走</p>    <!--不发生变化-->
/*css代码*/
        <style type="text/css">  /*样式标签*/
        div p{                  /*指定标签*/
            color: red;
        }

    </style>

b. 组合选择

<!--html代码-->
    <div >          
        <p>                   //发生变化，字体颜色为红色
            这些年，一个人
        </p>
    </div>
    <p>风也过，雨也走</p>       //也发生变化，字体颜色为红色
<!--css代码-->
    <style type="text/css">  /*样式标签*/
        div,p{                  /*指定标签*/
            color: red;
        }

    </style>

c.伪元素选择器，伪类，伪对象
举例：

a:link{                             //原始状态
            background: black;
            texts
        }
        a:hover{                   //鼠标放上去状态
            background: red;
        }
        a:active{                 //点击状态链接状态
            background: blue;
        }
        a:visited{                //点击完成后链接状态
            background: green;
        }

7.css的优先级一般是后加载的优先级高
style选择器 > id选择器 >class选择器 > 标签选择器 >

<!--html代码-->
    <div id="hehe" class="aa" style="background: black;">           
        这些年，一个人
    </div>
/*css代码*/
#hehe{  /*所有id值为呵呵的都设置背景色为#00ff00*/
    background: blue;
}
.aa{
    color: green;
}
<style type="text/css">  /*样式标签*/
    div{                /*指定标签*/
        background: red;
    }
</style>

posted @ 2018-03-23 15:13 我的网名阅读(27) 评论(0) 收藏举报

刷新页面返回顶部

css 第一次亲密接触

公告