CSS学习总结（一）

1.1什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS ：表现（美化网页）

1.2css的格式

1.在html内

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
    直接在html界面写css语言
    在style中可以写css代码，每一个声明，最好使用；结尾

       格式：
       <style>
            选择器{
            声明1；
            声明2；
            .....
            }
       </style>
    -->

    <style>
        h1{
     
     
            color: #f02a52;
        }
    </style>
</head>
<body>
<h1>
    我是h1标签
</h1>
</body>
</html>

2.将css与html分开写

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-n2rQ2O6T-1582344311208)(C:\Users\Administrator\AppData\Roaming\Typora\typora-user-images\1580711931907.png)]$

建议使用这种写法

css的优势：
1.内容与表现分离

2.网页结构统一，可以重复使用。

3.样式十分丰富

4.建议使用独立于html的css文件

5.可以使用SEO,便于搜索引擎搜索

3.将css导入方式

1.内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
     
     
            color: #051c80;
        }
    </style>
    <!--链接式-->
    <link rel="stylesheet" href="CSS/style.css">


</head>
<body>
    <!--采取就近原则，h1所表现的颜色是行内颜色-->
    <!-- 行内样式：在标签中写style-->
<h1 style="color: orange">
    我是h1标签
</h1>
</body>
</html>

2外部样式

1.链接式

 <!--链接式-->
    <link rel="stylesheet" href="CSS/style.css">

2.导入式

  <style>
       @import "CSS/style.css";
    </style>

2.选择器

作用：选择页面上的某一个或者某一类元素

2.1基本选则器

1.标签选择器

扫描二维码关注公众号，回复： 11922180 查看本文章

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        <!--
            标签选择器会选择这个页面上所有的标签。
            例如：h1标签会选择下列所有的h1标签
        -->
        h1{
     
     
            color: #f02a52;
            background: orange;
            border-radius: 10px;
        }
        p{
     
     
            font-size: 40px;
        }
    </style>
    
</head>
<body>
<h1>哈哈</h1>
<h1>哈哈</h1>
<h1>哈哈</h1>
<h1>哈哈</h1>
<p>p标签</p>
</body>
</html>

2.类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <!--
            类选择器 class:选择所有class一致的标签 可以跨标签使用
            格式： .class名称{}
        -->
    <style>

       .bq1{
     
     
           color: #7359e2;
           background-color: #788036;
           border-radius: 10px;
       }
        .bq2{
     
     
            color: #80001c;
            background-color: #788036;
            border-radius: 10px;
        }
        .bq3{
     
     
            color: #ff2121;
            background-color: #788036;
            border-radius: 10px;
        }
        .p1{
     
     
            font-size: 20px;
        }
    </style>

</head>
<body>
<h1  class="bq1">哈哈</h1>
<h1  class="bq2">哈哈</h1>
<h1  class="bq3">哈哈</h1>
<h1  class="bq1">哈哈</h1>
<p   class="p1">p标签</p>
</body>
</html>

3.id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <!--
            id选择器 id:全局唯一性
            格式： #id名称{}
            优点：全局唯一
        -->
    <style>

        #id1{
     
     
            color: #b5f873;
            background-color: #788036;
            border-radius: 10px;
        }
        .bq2{
     
     
            color: #80001c;
            background-color: #788036;
            border-radius: 10px;
        }
        .bq3{
     
     
            color: #ff2121;
            background-color: #788036;
            border-radius: 10px;
        }
        .p1{
     
     
            font-size: 20px;
        }
    </style>

</head>
<body>
<h1  class="bq1"  id="id1">哈哈</h1>
<h1  class="bq2">哈哈</h1>
<h1  class="bq3">哈哈</h1>
<h1  class="bq1">哈哈</h1>
<p   class="p1">p标签</p>
</body>
</html>

基本选择器优先级：

不遵循就近原则：优先级是固定的

id选择器>class选择器>标签选择器

2.2层次选择器

1.后代选择器儿子孙子…

body p{
    
    
    color: #f02a52;
    background: #7359e2;
}

2子代选择器儿子

body >p{
    
    

    color: #f02a52;
    background: #7359e2;
}

3.相邻兄弟选择器此标签的下一个同辈

.p1+p{
    
    
    color: #ff2121;
    background: aliceblue;
}

4.通用选择器此标签以下的所有同辈的

.p1~p{
    
    
    color: #ff2121;
    background: aliceblue;
}

2.3结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
            选中父级元素，定位到父级元素中的第一个   
         */
        p:nth-child(1){
     
     
            color: #b5f873;
        }
        p:nth-of-type(3){
     
     
            color: #ff2121;
        }
        /*
            ul-li 下的第一个元素
        */
        ul li:first-child{
     
     
            color: #788036;
        }
        /*
            ul-li下的最后一个元素
        */
        ul li:last-child{
     
     
            color: aliceblue;
        }
        
        
    </style>

</head>
<body>
    <p class="p1">p1</p>
    <p>p2</p>
    <p>p3</p>
    <p>p4</p>
    <p>p5</p>
    <ul>
        <li>l1</li>
        <li>l2</li>
        <li>l3</li>
        <li>l4</li>
    </ul>
</body>
</html>

2.4属性选择器

属性选择器是将class+id结合起来

格式: 标签[属性名=属性值]{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo a{
     
     
            float: left;
            display: block;
            text-decoration: none;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            margin-right: 5px;
            text-align: center;
            background: antiquewhite;
            font: bold 20px/50px Arial;
        }
      
    </style>

</head>
<body>
<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item">3</a>
    <a href="images/123.png" class="links item">4</a>
    <a href="images/123.jpg" class="links item">5</a>
    <a href="abc" class="links item">6</a>
    <a href="/a.pdf" class="links item">7</a>
    <a href="/abc.pdf" class="links item">8</a>
    <a href="abc.doc" class="links item">9</a>
    <a href="abcd.doc" class="links item last">10</a>
</p>

</body>
</html>

=绝对等于

  /*
            属性id=first
        */
        a[id=first]{
            background: #b5f873;
        }

2.*= 包含这个元素的

 a[class*="links"]{
         background: #ff2121;
     }

3.^=以这个开头的

 a[href^="http"]{
         background: #ff2121;
     }

4.$=以这个结尾的

  a[href$="pdf"]{
         background: #ff2121;
     }