1.CSS介绍

CSS 的语法规则比较简单。

一条CSS语句包含两个部分：选择器 + 应用属性

style{
	p{
		color: red;
	}
}

/* 其中 p 就是选择器 ，{} 里面的就是 应用属性 */

2.CSS的引入方式

1.内部样式表

这种方式表示当前页面都会使用这个 CSS 样式。

具体例子：

<body>
    <!-- 内部样式表 -->
    <style>
        p {
            color: blue;
            font-size: 50px;
        }
    </style>
    <p>
        hello word
    </p>
</body>

2.内联样式

内联样式不需要写选择器，也不需要写 {}。它只针对当前的元素。

具体例子：

    <!-- 内联样式表 -->
    <p style="color: blue; font-size:150px;">
        hello word
    </p>

3.外部样式

这种方式是把 CSS 的代码单独的拿了出来放在一个 .CSS 文件中。

当某个页面需要使用该样式时，只要在 head 标签中使用 link 引入即可。

这种方式让代码的复用性更高。

具体例子：

/*
 test.css文件的内容
*/

p{
    color: rgb(107, 132, 74);
    font-size: 200px;
}

<!-- html中引入 test.css 中的样式 -->
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS</title>
    <!-- 引入外部样式，代码复用性更高 ，可以写多个 link ，也就是可以引入多个 .css文件的样式-->
    <link rel="stylesheet" href="test.css">
</head>

4.打包工具

我们知道，程序员编写的 html 、CSS、JS 的代码是需要通过网络传输到浏览器上，然后浏览器进行解析的。

既然 html、CSS、JS 是要通过网络传输，所以它们的大小就直接决定占用多大的网络带宽。

在我们编写 html 、CSS、JS 的时候，我们喜欢使用的代码风格就是，一条语句一行。同时配和使用空格。这样就使的整个代码可读性更高。但这就出现了问题，虽然可读性高了，但是整个文件的大小变大了。也就是说占用了更多的带宽。

怎么解决上面这个问题？

答：通过打包工具，程序员在编写代码时还是按照自己的风格来编写，但是当项目要发布时，就通过打包工具将代码中的换行和空格都去掉。并且 JS 中更狠，它们的打包工具会将变量名使用一个字母来替换。是代码更加的紧凑。

5.CSS的 "脊柱命名法"

CSS 的变量通常的命名方式：脊柱命名法，例如：font-size 使用 - 连接。 java中通常使用的是驼峰命名法例如：numCount。 C++/python 通常使用的是蛇形命名法例如：num_count。

3.选择器

选择器的功能就是选中页面中的元素（标签），可以选中一个，也可以选中一批。

选择大致分为两类：基础选择器（单个选择器构成）和复合选择器（多个选择器构成）。

1.基础选择器

单个选择器的使用。

1.标签选择器

这个选择器就是每次选中一种标签。

<body>
    <style>
        /* 这里针对当前页面中所有的 p 标签有效 */
        p {
            color: blue;
            font-size: 50px;
        }
    </style>
    <p>
        hello word
    </p>
</body>

2.类选择器

这种选择器，使用起来更加的灵活。

<body>
    <style>
        /* 类选择器 */
        .red{
            color: red;
        }
    </style>

    <ul>
        <!-- 针对li标签有效 -->
        <li class="red">张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>

    <!-- 针对整个 ol 列表标签有效 -->
    <ol class="red">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

3.id选择器

这个和上面的类选择器很相似。

<body>
    <style>
        /* id选择器 */
        #cpp{
            color: red;
            font-size: 150px;
        } 
    </style>

    <ul>
        <li id="cpp">张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>

    <ol id="cpp">
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

4.通配符选择器

这个选择器一般是用来取消默认样式。

因为每个浏览器都有自己的默认样式（不手动指定样式时浏览器所使用的样式）。

<body>
    <style>
        /* 通配符选择器 */
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
    </style>

    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>

    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

2.复合选择器

将多个选择器综合运用起来。

1.后代选择器

顾名思义，就是可以使用到子选择器或孙子选择器或重孙子选择器或 ... 等后代的选择器上。

结构：

选择器1 + 空格 + 选择器2 + { 应用属性 }

<body>
    <style>
        /* 后代选择器 */
        ul .red{
            color: red;
            font-size: 100px;
        }
    </style>

    <ul>
        <li class="red">兔总裁</li>
        <li><a href="#" class="red">兔总裁</a></li>
        <li>兔总裁</li>
    </ul>

    <ol>
        <li>咬人猫</li>
        <li class="red">咬人猫</li>
        <li><a href="#" class="red">咬人猫</a></li>
    </ol>
</body>

2.子选择器

将这个和上面的后代选择器左对比，就会发现这个选择器只能选择子选择器，而不能将样式使用到孙子选择器上。

结构：

选择器1 + > + 选择器2 + { 应用属性 }

<body>

    <style>
        /* 子选择器 */
        ul>.red{
            color: red;
        }
    </style>

    <ul>
        <!-- 只有第一个li生效 -->
        <li class="red">兔总裁</li>
        <li><a href="#" class="red">兔总裁</a></li>
        <li>兔总裁</li>
    </ul>

    <ol>
        <li>咬人猫</li>
        <li class="red">咬人猫</li>
        <li><a href="#" class="red">咬人猫</a></li>
    </ol>
</body>

3.并集选择器

它能并列的写多个选择器（可以是基础选择器，也可以是复合选择器），中间使用逗号来进行分隔。

结构：

选择器1,选择器2,选择器3 + { 应用属性 }

<body>
    <style>
        /* 并集选择器 */
        ul>.red,ol>.red{
            color: red;
        }
    </style>

    <ul>
        <li class="red">兔总裁</li>
        <li><a href="#" class="red">兔总裁</a></li>
        <li>兔总裁</li>
    </ul>

    <ol>
        <li>咬人猫</li>
        <li class="red">咬人猫</li>
        <li><a href="#" class="red">咬人猫</a></li>
    </ol>
</body>

4.伪类选择器

这个选择器主要介绍两种：鼠标悬停展示样式和鼠标左键单击不放展示样式。

<body>
    <style>
        /* 伪选择器：鼠标悬停显示该样式 */
        ul .red:hover{
            color: yellow;
        }
        /* 伪选择器：鼠标左键点击不放，显示该样式 */
        ul .red:active{
            color: green;
        }
    </style>

    <ul>
        <li class="red">兔总裁</li>
        <li><a href="#" class="red">兔总裁</a></li>
        <li>兔总裁</li>
    </ul>

    <ol>
        <li>咬人猫</li>
        <li class="red">咬人猫</li>
        <li><a href="#" class="red">咬人猫</a></li>
    </ol>
</body>

3.CSS中的应用属性

CSS中的属性有很多很多，这里就介绍一下常用且简单的属性。

1.字体有关属性

font-family（字体家族）

<body>
    <style>
        .ret{
            /* 如果前面的字体没有，那么就会找下一个，如果都没有就直接默认 */
            font-family: '宋体', '楷体';
        }
        .flg{
            font-family: '楷体';
        }
    </style>
    <div class="ret">
        一行字
    </div>

    <div class="flg">
        另一行字
    </div>
</body>

font-size（字体大小）

<body>
    <style>
        .ret{
            font-size: 50px;
        }
        .flg{
            font-size: 150px;
        }
    </style>
    <div class="ret">
        一行字
    </div>
    <div class="flg">
        另一行字
    </div>
</body>

font-weight（字体粗细）

<body>
    <style>
        .ret{
            font-weight: 400;
        }
        .flg{
            font-weight: 900;
        }
    </style>
    <div class="ret">
        一行字
    </div>
    <div class="flg">
        另一行字
    </div>
</body>

font-style（字体样式，主要是用来取消倾斜）

<body>
    <style>
        .eme{
            font-style: normal;
        }
    </style>
    <div>
        <em class="eme">hello word</em>
    </div>
</body>

2.文本属性

color（文本颜色）

<body>
    <style>
        .one{
            /* 使用单词表示 */
            color: red;
        }
        .two{
            /* 使用rgb表示 */
            color: rgb(255, 0, 0);
        }
        .three{
            /* 使用十六进制表示（注意可以所写，比如 ff0000 可以缩写为 f00） */
            /* 注意连续的两个才能缩写，同时要缩写就都缩写，不能有的缩写有的不缩写 */
            color: #ff0000;
        }
        .four{
            /* 最后一个是 透明度 ，.4表示40% */
            color: rgba(255, 0, 0, .4);
        }
    </style>

    <!-- 四种表示方式 -->
    <div class="one">
        一行字
    </div>
    <div class="two">
        另一行字
    </div>
    <div class="three">
        还有一行字
    </div>
    <div class="four">
        最后一行字
    </div>
</body>

text-align（文本对齐）

<body>
    <style>
        .one{
            /* 左对齐 */
            text-align: left;
        }
        .two{
            /* 居中 */
            text-align: center;
        }
        .three{
            /* 右对齐 */
            text-align: right;
        }
    </style>

    <div class="one">
        一行字
    </div>
    <div class="two">
        另一行字
    </div>
    <div class="three">
        还有一行字
    </div>
</body>

text-decoration（可以用来设置下划线、删除线、上划线、取消超链接的下划线）

<body>
    <style>
        a{
            /* 取消 a 标签中的下划线 */
            text-decoration: none;
        }
        div{
            /* 给div标签设置删除线 */
            text-decoration: line-through;
        }
    </style>
    <a href="#">这是一个超链接</a>
    <div>这是一行字</div>
</body>

text-indent（首行缩进，单位可以是 px 或者 em，em表示相对单位，相对于当前元素的大小，可以取负值，也就是反向缩进）

<body>
    <style>
        p{
            text-indent: 2em;
        }
    </style>
    <p>
        你好世界 Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto enim, dolorem assumenda cum quo est dignissimos ad. Dolorem suscipit esse, inventore nostrum architecto veritatis nam praesentium delectus in, libero nobis!
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit magnam expedita sed debitis. At, perspiciatis ea. Veniam, deserunt natus! Deserunt fugiat libero illo ex recusandae laboriosam praesentium nobis iste numquam!
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugiat tempora maxime magni, consectetur delectus at ad aspernatur recusandae molestias voluptas odit provident neque voluptatibus, quae vero dolore impedit sunt error?
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Amet recusandae non deserunt harum voluptatibus quibusdam labore sint? Necessitatibus blanditiis provident autem, accusamus repudiandae illo doloribus, eos totam sequi repellat earum.
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex dolore veritatis repellendus? Dicta, maxime optio quos dolorem exercitationem non dolore ex iusto sit! Beatae aperiam, aut hic dolores possimus sint?
    </p>
</body>

line-height（设置行高，也就可以间接的设置行间距，行高 = 字体大小 + 行间距）

<body>
    <style>
        .one{
            line-height: 50px;
        }
    </style>
    <div class="one">一只程序员</div>
</body>

<body>
    <style>
        /* 水平居中，垂直居中 */
        div{
            width: 300px;
            height: 150px;
            font-size: 20px;
            text-align: center;
            background-color: grey;
            line-height: 150px;
        }
        /* 如果元素的高度为 150px,那么只需要给 文字 行高设置为 相同的值 ，就可以使其垂直居中 */
    </style>
    <div>
        这是一段话
    </div>
</body>

3.背景

background-color（背景颜色，和 color 的用法差不多）

<body>
    <style>
        div{
            width: 200px;
            height: 150px;
            background-color: red;
            background-color: rgb(255, 0, 0);
            background-color: #ff0000;
            background-color: rgba(255, 0, 0, .4);
            /* transparent表示应用父元素的背景颜色 */
            background-color: transparent;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

background-image（设置背景图片，默认是平铺效果）

<body>
    <style>
        div{
            width: 1280px;
            height: 650px;
            background-image: url(./3.jpg);
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

background-repeat（背景图片与背景颜色可以同时存在，但是背景图片会覆盖背景颜色）

<body>
    <style>
        /*
        repeat-y:垂直平铺
        repeat-x:横向平铺
        repeat:默认平铺
        no-repeat:取消平铺
        */
        div{
            width: 1280px;
            height: 650px;
            background-image: url(./3.jpg);
            /* background-repeat: repeat-y;
            background-repeat: repeat-x;
            background-repeat: repeat; */
            background-repeat: no-repeat;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

background-position（计算机中通常使用的是 "左手系"，也就是原点在左上方）

</head>
<body>
    <style>
        div{
            width: 1280px;
            height: 650px;
            background-image: url(./3.jpg);
            background-repeat: no-repeat;
            /* 写一个 center 或者 两个 center 效果一样 
               可以使用 px ，百分比，英文单词*/
            background-position: center center;
            /* center center 表示 垂直居中，横向居中 */
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

background-size（设置图片的大小）

<body>
    <style>
        div{
            width: 1280px;
            height: 650px;
            background-image: url(./3.jpg);
            background-repeat: no-repeat;
            background-position: center center;
            /*可以使用 px ，单词（cover（图片拉伸到占满整个 div），contain（图片拉伸到背景能放置的极限））*/
            background-size: 500px 500px;
        }
    </style>
    <div>
        这是一段话
    </div>
</body>

4.圆角矩阵

border-radius（设置圆角，单位可以是 px，百分比）

<body>
    <style>
    /* 这是一个圆 */
        div{
            width: 300px;
            height: 300px;
            background-color: red;
            /* 宽度的一半 */
            border-radius: 50%;
        }
    </style>
    <div>
        
    </div>
</body>

<body>
    <style>
    /* 这是一个 胶囊 形 */
        div{
            width: 300px;
            height: 100px;
            background-color: red;
            /* height的一半 */
            border-radius: 50px;
        }
    </style>
    <div>
       
    </div>
</body>

注意：border-radius 可以对四个角分别进行设置。（border-top-left-radius等）

5.display的用法

在 CSS中大致将元素分为了三种：块级元素、行内元素，行内块元素。

我们想要将元素在这三者之间相互转换的话，就可以使用 display。

<body>
    <style>
        a{
            width: 100px;
            height: 100px;
            /* inline-block：行内块元素，不独占一行，可以设置宽度高度 
               inline：行内元素，不独占一行，不能设置宽度高度
               block：块级元素，独占一行，能设置宽度和高度
               none：不显示当前元素*/
            display: block;
            text-decoration: none;
        }
    </style>
    <a href="#">一个超链接</a>
    <a href="#">另一个超链接</a>
</body>

6.盒子模型

在 html 中一个元素其实就是一个矩形，而这个矩形可以由以下几个本分构成：

外边距（margin），边框（border），内边距（padding），内容

所以我们可以通过设置上面的 margin、border 和 padding 属性来调整这个矩形。

边框（border）

<body>
    <style>
        .one{
            width: 100px;
            height: 100px;
            /* border:设置边框为5px，black颜色，solid表示实线 */
            border: 5px black solid;
            /* 注意：就这样设置 边框(border) 就会使整个元素的大小给撑大 
               如果想维持原本的元素大小，就需要有以下的设置：*/
            box-sizing: border-box;
        }
    </style>
    <div class="one">
        
    </div>
</body>

外边距（margin）

<body>
    <style>
        .one{
            width: 100px;
            height: 100px;
            /* border:设置边框为5px，black颜色，solid表示实线 */
            border: 5px black solid;
            /* 注意：就这样设置 边框(border) 就会使整个元素的大小给撑大 
               如果想维持原本的元素大小，就需要有以下的设置：*/
            box-sizing: border-box;

            /* 外边距也可以进行四周单个的设置 
               下外边距设置为 10px*/
            margin-bottom: 10px;
        }
        .two{
            width: 100px;
            height: 100px;
            border: 5px black solid;
            box-sizing: border-box;

            /* 上外边距设置为 15px */
            margin-top: 15px;
        }
    </style>
    <div class="one">
        
    </div>
    <div class="two">

    </div>
</body>

通过观察结果，就会发现一个问题，出现了 "塌陷" 问题。通俗的讲就是：两块元素在垂直方向的外边距的值为设置的两个中的较大值。但是横向上的外边距是两个值相加。（不会出现 "塌陷" 问题）

横向的例子

<body>
    <style>
        .one{
            width: 100px;
            height: 100px;
            /* border:设置边框为5px，black颜色，solid表示实线 */
            border: 5px black solid;
            /* 注意：就这样设置 边框(border) 就会使整个元素的大小给撑大 
               如果想维持原本的元素大小，就需要有以下的设置：*/
            box-sizing: border-box;

            /* 外边距也可以进行四周单个的设置 
               下外边距设置为 10px*/
            margin-right: 10px;
			
            /* 设置为行内块元素 */
            display: inline-block;
        }
        .two{
            width: 100px;
            height: 100px;
            border: 5px black solid;
            box-sizing: border-box;

            /* 上外边距设置为 15px */
            margin-left: 15px;

            display: inline-block;
        }
    </style>
    <div>
        <!-- span是行内元素 -->
        <span class="one"> </span>
        <span class="two"></span>
    </div>
</body>

内边距（padding）

    <style>
        .one{
            width: 300px;
            height: 300px;
            /* border:设置边框为5px，black颜色，solid表示实线 */
            border: 5px black solid;
            /* 注意：就这样设置 边框(border) 就会使整个元素的大小给撑大 
               如果想维持原本的元素大小，就需要有以下的设置：*/
            box-sizing: border-box;

            /* 外边距也可以进行四周单个的设置 
               下外边距设置为 10px*/
            margin-right: 10px;

            /* 设置内边距，表示四个方向都是 20px */
            padding: 20px;

            display: inline-block;
        }
        .two{
            width: 300px;
            height: 300px;
            border: 5px black solid;
            box-sizing: border-box;

            /* 上外边距设置为 15px */
            margin-left: 20px;

            /* 也可以单独设置四个方向 */
            padding-top: 25px;

            display: inline-block;
        }
    </style>

注意：内边距也是需要使用 box-sizing: border-box 来防止向外扩张。

margin实现一个元素的水平居中

<body>
    <style>
        .three{
            width: 500px;
            height: 300px;
            background-color: red;
        }
        .four{
            width: 200px;
            height: 100px;
            background-color: blue;
			/* 0表示垂直方向值为0，auto表示水平方向根据浏览器自适应进行居中 */
            margin: 0 auto;
        }
    </style>
    <div class="three">
        <div class="four">

        </div>
    </div>
</body>

4.弹性布局

我们知道 html 中的块级元素都是独占一行的。所以我们可以将其理解为垂直布局。

但是在生活中，我们不仅仅是垂直布局，同时还需要进行水平布局。

为了解决这个问题，就有了弹性布局。

弹性布局主要就是强化了这一点。

<body>
    <style>
        .parent{
            width: 100%;
            height: 400px;
            background-color: blue;

            /* 设置弹性布局 */
            display: flex;

            /* 水平排列：左对齐 */
            justify-content: start;
            /* 水平排列：居中 */
            justify-content: center;
            /* 水平排列：右对齐 */
            justify-content: end;
            /* 水平排列：两侧不留空白,每个元素之间使用空白隔开 */
            justify-content: space-between;
            /* 水平排列：两侧留空白,每个元素之间使用空白隔开 */
            justify-content: space-around;

            /* 垂直排列：顶端一行 */
            align-items: start;
            /* 垂直排列：居中一行 */
            align-items: center;
            /* 垂直排列：底端一行 */
            align-items: end;
        }

        .one{
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
    <div class="parent">
        <div class="one">hello word</div>
        <div class="one">hello word</div>
        <div class="one">hello word</div>
        <div class="one">hello word</div>
        <div class="one">hello word</div>
        <div class="one">hello word</div>
    </div>
</body>

5.案例：一个简单的页面布局

<body>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        .start{
            width: 100%;
            height: 50px;
            font-size: 20px;
            text-align: center;
            line-height: 50px;
            color: white;
            background-color: grey;
        }

        .containter{
            width: 100%;
            height: 800px;
            background-color: antiquewhite;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .containter .left,.containter .right{
            width: 20%;
            height: 100%;
            background-color: rgb(103, 194, 194);
            font-size: 20px;
            color: white;
            text-align: center;
            line-height: 800px;
        }

        .containter .contain{
            width: 60%;
            height: 100%;
            background-color: rgb(213, 155, 194);
            font-size: 20px;
            color: white;
            text-align: center;
            line-height: 800px;
        }

        .end{
            width: 100%;
            height: 150px;
            background-color: grey;
            font-size: 20px;
            text-align: center;
            line-height: 150px;
            color: white;
        }
    </style>

    <div class="start">
        导航栏
    </div>
    <div class="containter">
        <div class="left">
            左侧栏
        </div>
        <div class="contain">
            内容区
        </div>
        <div class="right">
            右侧栏
        </div>
    </div>
    <div class="end">
        页脚区
    </div>
</body>

CSS入门扫盲

1.CSS介绍

2.CSS的引入方式

1.内部样式表

2.内联样式

3.外部样式

4.打包工具

5.CSS的 "脊柱命名法"

3.选择器

1.基础选择器

1.标签选择器

2.类选择器

3.id选择器

4.通配符选择器

2.复合选择器

1.后代选择器

2.子选择器

3.并集选择器

4.伪类选择器

3.CSS中的应用属性

1.字体有关属性

2.文本属性

3.背景

4.圆角矩阵

5.display的用法

6.盒子模型

4.弹性布局

5.案例：一个简单的页面布局