CSS引入，选择器

1.使用CSS的方式

行内式标签里面属性style 只能适用当前标签

<p style="background-color: fuchsia;color: aqua">hello</p>

嵌入式选择器<style> 只能当前适用文件

<style>
    p1{
        background-color: aqua;
        color: black;
    }
</style>

导入式引入css文件 @import 有数量限制
- ```
<style>
    @import "css1.css";
</style>
```
链接式 <link herf="" type="" rel="stylehsheet"> 推荐这种

　　　　　　<link href="css2.css" rel="stylesheet" type="text/css">

2.基础选择器 
　　标签选择器，ID选择器，CLASS选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css2.css" rel="stylesheet" type="text/css">
    <style>
        /*   *代表所有的样式标签都应用此    */
        *{
            background-color: blue;
        }
        p1{
            color: green;
        }
        #aaa{
            color: red;
        }
        .ccc{
            color: darkgoldenrod;
        }
        a.ccc{
            color: yellow;
        }
        .bbb{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <p1> 通过标签去寻找</p1><br>
    <a id="aaa">通过ID去寻找：#aaa  具有唯一性，不允许重复</a> <br>
    <a class="ccc">通过class去寻找：.ccc 多个class='ccc'的可以通过标签名：a.ccc</a><br>
    <div class="ccc bbb">同时使用多个样式</div>
</body>

3.组合标签

　　多元素选择器：

 p1,div{
            font-size: 50px;
        }

　　后代选择器：（所有的后代p将被渲染，包括孙子p）

        div p{
            font-size: 50px;
        }

　　子代选择器：(所有的子代p将被渲染)

        div>p{
            font-size: 50px;
        }

　　兄弟选择器（相邻的.ddd 将被渲染）

        .bbb+.ddd{
            font-size: 50px;
        }

注意：块级元素不能放在p，h,dt里面

4.属性选择器

        [abc]{                       为属性为abc进行渲染
            font-size: 50px;
        }
        [abc='123']{                 为属性为abc值为123的进行渲染
            font-size: 50px;
        }
        p[abc]{　　　　　　　　　　　　　为标签为p属性为abc的进行渲染
            font-size: 50px;
        }
        p[abc='123']{　　　　　　　　　 为标签为p属性为abc值为p的进行渲染
            font-size: 50px;
        }

        [abc~='456']{
            font-size: 50px;
        }
        <div abc="123 456">bbbb</div>  分隔空格，渲染空格旁边存在的值的元素
        [abc|="123"]{
            font-size: 50px;
        }
        <div abc="123-456">bbb</div>   分隔下划线，渲染以下划线前面的值开头的元素  主要用于lang属性
        [abc^="123"]{
            font-size: 50px;
        }
        <div abc="123456">bbb</div>    渲染以123开头的元素 
        [abc$="456"]{
            font-size: 50px;
        }
        <div abc="123456">bbb</div>    渲染以456结尾的元素
        [abc*="345"]{
            font-size: 50px;
        }
        <div abc="123456">bbb</div>    渲染包含345的元素
        p:before{content:"ok";color: aqua}
        p:after{content: "ok";color: aqua}
        <p>cccc</p>　　　　　　　　　　　 在p标签前后添加内容

5.伪类选择器

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="css2.css" rel="stylesheet" type="text/css">
    <style>
        a:link{
            color: red;
        }
        a:hover{
            color: green;
        }
        a:visited{
            color: saddlebrown;
        }
        a:active{
            color: yellow;
        }
    </style>
</head>
<body>
    <a href="https://www.baidu.com">百度</a>
</body>

a:link（没有接触过的链接）,用于定义了链接的常规状态。

a:hover（鼠标放在链接上的状态）,用于产生视觉效果。

a:visited（访问过的链接）,用于阅读文章，能清楚的判断已经访问过的链接。

a:active（在链接上按下鼠标时的状态）,用于表现鼠标按下时的链接状态。

posted @ 2017-05-10 23:00 1916 阅读(119) 评论(0) 收藏举报

刷新页面返回顶部

1916

CSS引入，选择器

公告