1.快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第一个css程序</title>
    <!--书写css代码
    语法 :
    选择器{
    声明1;
    声明2;
    声明3;
    }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>
<body>

<h1>我的标题</h1>

</body>
</html>

建议分离写

2.css的三种导入方式

看代码，有手就行

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/style.css">
    <style>
        /*
        我是注释
        */
        h1 {
            color: green;
        }
    </style>

</head>
<body>
<!--优先级：就近原则谁离body近就用谁-->

<!--在行内直接写-->
<h1 >我是你爹</h1>

</body>
</html>

<!--导入式-->
<style>
    @import url("css/style.css");
</style>
先导入网页结构，再渲染css样式

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

2.选择器

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

2.1基本选择器

2.1.1.标签选择选择器： 选择一类标签 标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        h1{
            /*
            会选择所有的标签，比如h1
            */
            color: bisque;
            background: #3cbda6;
            border-radius: 24px;
        }
        p{
            font-size: 100px;
        }
    </style>
</head>
<body>
<h1>学Java</h1>
<h1>学Java</h1>
<p>我是你爹</p>
</body>
</html>

2.1.2类选择器 class 选择class属性一致的标签，跨标签 .类名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
        类选择器，标签可以复用
        可以跨类
        .class
        */
        .stevezhao{
            color: red;
        }
        .zps{
            color: green;
        }
    </style>
</head>
<body>
<h1 class="stevezhao">标题1</h1>
<h1 class="zps">标题2</h1>
<h1 class="zps">标题3</h1>
<p class="stevezhao">P标签</p>
</body>
</html>

2.1.3.id选择器 ：全局唯一！ #id名{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*
         id选择器
         #id名称{
         }
         不是就近原则，固定的
         id选择器>class选择器>标签选择器
        */
        #stevezhao{
            color: #3cbda6;
        }
        .zps{
            color: bisque;
        }
        #zps{
            color: aquamarine;
        }
    </style>
</head>
<body>
<!--id要保持唯一-->
<h1 id="stevezhao" class="zps">标题1</h1>
<h1 class="zps">标题2</h1>
<h1 id="zps">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>
</body>
</html>

优先级：id > class > 标签

2.2层次选择器

2.2.1、后代选择器：在某个元素后面 祖爷爷 爷爷 爸爸 你

/*
后代选择器
*/
body p{
    background: red;
}

2.2.2、子选择器 一代 儿子

body>p{
    background: #3cbda6;
}

2.3.3、相邻选择器 同辈

/*相邻（向下）兄弟选择器，只有一个*/
  .active + p{
      background: black;
  }

4、通用选择器(弟弟选择器)

.active~p{
    background: royalblue;
}

2.3结构伪类选择器

/*ul的第一个子元素*/
ul li:first-child{
    background: red;
}
/*ul最后一个元素*/
ul li:last-child{
    background: greenyellow;
}

/*选中p1*/
p:nth-child(1){
    /*选中父级的第一个*/
    background: black;
}

/*ul最后一个元素*/
ul li:last-child{
    background: greenyellow;
}
/*选中p1*/
p:nth-child(1){
    /*选中父级的第一个*/
    background: black;
}
/*选中父元素下p元素的第二个*/
p:nth-of-type(2){
    background: yellow;
}

2.4属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .demo{
            float: left;
            display: block;
            height: 50px;
            width: 50px;
            border-radius: 10px;
            background: #2700ff;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font: bold 20px/50px Arial;
        }
 /*       !*存在id的属性的元素  a[]{}*!
        a[id]{
            background: yellow;
        }
        a[id=first]{
            background: green;
        }
        !*class中links
        = 绝对等于
        *= 包含
        ^= 以什么开头
        a[class*="links"]{
            background: yellow;
        }*/
        /*选择href中有http开通*/
        a[href^=http]{
            background: green;
        }
        /*以什么结尾*/
        a[href$=jpg]{
            background: green;
        }
    </style>
</head>
<body>
<p class="demo">

    <a href="http://www.baidu.com" class="links item first" id="first">1</a>
    <a href="" 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">10</a>

</p>
</body>
</html>

= 绝对等于
*= 包含
^= 以什么开头