css基础使用引入方式外联式（实际开发）行内式嵌入式选择器标签选择器直接通过标签名字选中html元素页面中

引入方式

外联式（实际开发）

<head>
   <link rel="stylesheet" href="./common.css">
</head>

行内式

<div style="color:green;">
    123
</div>

嵌入式

<head>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
</head>

选择器

标签选择器

直接通过标签名字选中html元素
页面中凡是有所选择的标签都会被选中且生效css

<style>
        /* 选择器 {} */
        /* 标签选择器 就是 以标签名命名的选择器 */
        p {
            color: red;
        }

        /* 标签选择器 选中所有的这个标签都生效css */
    </style>
</head>
<body>
    <p>pppppppp</p>
    <p>这个p是什么颜色呢</p>
    <p>2222</p>
</body>

类选择器（设置样式最常用类别）

通过类定义 .类名 {} 进行样式设置，class="类名"会使用相对应类名设置的样式
一个标签元素可以有多个类名，类名之间用空格隔开

<style>
        .red {
            color: red;
        }

        .size {
            font-size: 66px;
        }
    </style>
</head>
<body>
    <!-- 类: 定义 和 使用才能生效 -->
    <p>111</p>
    <!-- 一个标签可以使用多个类名 , 需要空格隔开即可 -->
    <p class="red size">222</p>
    <div class="red">这个标签文字也要变红</div>
</body>

并集选择器

希望同时给多个类名设置统一样式时使用
.类名, .类名, .类名 {}——样式设置时类名用逗号隔开

交集选择器

一个元素有多个类名时可以使用交集选择器
.类名.类名 {} 类名之间不需要任何其他符号隔开

id选择器

元素内设置 id="" 属性，再定义id选择器调整样式
id属性一般在javascript中使用，不会用在选择器中

<style>
        /* 定义id选择器 */
        #blue {
            color: skyblue;
        }
    </style>
</head>
<body>
    <div id="blue">这个div文字是蓝色的</div>
    <p id="blue">111</p>
</body>

通配符选择器

通配符选择器* {} 能够选择页面中所有元素并生效
缺点：浏览器内核需要花更多时间去找所有标签，如果页面中并未用到它所选择的标签，相当于影响网页渲染的时间

<style>
        * {
            color: red;
        }
    </style>
</head>
<body>
    <div>div</div>
    <p>pppp</p>
    <h1>h1</h1>
    <span>span</span>
    <p>pppp</p>
    <h2>h2</h2>
</body>

后代选择器

<body>
    <p>我是纯p</p>
    <div>
        <p>我是div的儿子P
            <p>div的孙子</p>
        </p>
    </div>
</body>

<style>
        div p {
            color: aqua;
        }
    </style>

子代选择器

只会选中子级
不考虑孙子

<body>
    <p>i am big p</p>

    <div>
        <p>div儿子</p>
    </div>
</body>

<style>
        div > p {
            color: aquamarine;
        }
    </style>

伪类选择器

<style>
        div:hover {
            color: brown;
            font-size: 90px;
            background-color: pink;
        }
    </style>

结构伪类

li:nth-child(n)——选择第n个
- 公式
  - 奇数元素——odd
  - 偶数元素——even
li:first-child——选择第一个
li:last-child——选择最后一个

<style>
         li:nth-child(4) {
             background-color: pink;
         }

         li:last-child {
             background-color: blue;
         }

         li:first-child {
             background-color: red;
         }
    </style>

<body>
    <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
    </ul>
</body>

伪元素

content属性是必不可少的！(需格外注意)

::before在所指定元素的最前面添加伪元素

.box::before {
            display: block;
            width: 100px;
            height: 100px;
            content: 'hello';
            background-color: blue;
        }

::after在所指定元素的最后面添加伪元素

.box::after {
            display: block;
            width: 100px;
            height: 100px;
            content: "hello";
            background-color: red;
        }

字体

字号

调节字体大小
网页默认大小为16px

<style>
        p {
            font-size: 30px;
        }
    </style>
</head>
<body>
    <!-- 默认字号是16 -->
    <p>段落文字</p>
</body>

文字粗细

调节字体粗细
属性值：bold/normal/400/700
开发中通常使用 400 或 700

<style>
        div {
            /* 加粗 */
            font-weight: 700;
        }

        h1 {
            /* 不加粗 */
            font-weight: 400;
        }
    </style>
</head>
<body>
    <div>这是div</div>
    <h1>一级标题</h1>
</body>

字体样式

给字体设置特殊样式
通常只有两种：italic/normal

<style>
        div {
            /* 倾斜 */
            font-style: italic;
        }

        em {
            /* 正常的, 不倾斜 */
            font-style: normal;
        }
    </style>
</head>
<body>
    <div>div文字</div>
    <em>em</em>
</body>

字体库

可以设置各种系统拥有的字体
系统默认是 微软雅黑

<style>
        div {
            /* font-family: 宋体; */
            /* 如果用户电脑没有安装微软雅黑, 就按黑体显示文字 */
            /* 如果电脑没有安装黑体, 就按任意一种非衬线字体系列显示 */
            font-family: 微软雅黑, 黑体, sans-serif;
        }
    </style>
</head>
<body>
    <div>
        这是一个div标签
    </div>
</body>

字体复合属性

div {
            font: italic 700 80px 宋体,sans-serif;
        }

文本

文本缩进

1em代表一个字符的位置

一般缩进2em足够

<style>
        p {
            text-indent: 2em;
            font-size: 25px;
        }
    </style>

水平对齐

<style>
        h1 {
            text-align: center;
        }
    </style>

文本修饰

<style>
        a {
            color: #333;
            text-decoration: none;
        }
    </style>

<a href="#">This is a link</a>

行高

<style>
  p {
    text-indent: 2em;
    font: italic 700 25px/1.5 '黑体';
  }
</style>

行高居中

<style>
        div {
        width:500px;
        height: 500px;
        background-color: pink;
    }

    p {
        text-align: center;
        font: italic 700 25px/500px sans-serif;
    }
    </style>

<div>
        <p>123</p>
    </div>

图片水平居中

<style>
        body {
            background-color: #f5f5f5;
            text-align: center;
        }

        img {
            opacity: 0.5;
        }
    </style>

背景

背景图片

<style>
        div {
            width: 400px;
            height: 400px;
            background-color: #000;
            background-image: url('./1.jpg');
            /* background-repeat: no-repeat; */
            /* background-repeat: repeat-x; */
            background-repeat: repeat-y;
        }
    </style>

背景图片位置

<style>
        div {
            width: 400px;
            height: 400px;
            /* background-color: #000;
            background-image: url("./1.jpg");
            background-repeat: no-repeat;
            background-position: 100px 50px; */

            /* 复合属性 */
            background: #234 url("./1.jpg") no-repeat center;
        }
    </style>

背景颜色

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: rgba(17, 98, 90, 0.5);
        }

			 /* 鼠标经过改变背景颜色 */
        div:hover {
            background-color: rgba(234,98, 98, 0.8);
        }
    </style>

元素显示方式

行内块元素

一行排列

可以设置宽高

<body>
    <img src="./1.jpg" alt="">
    <img src="./1.jpg" alt="">
</body>

<style>
        img {
            width: 300px;
        }
    </style>

行内块转换

display可以随意转换元素的显示方式

<body>
    <span>span</span>
    <span>span</span>
    <div>DIV</div>
</body>

<style>
        * {
            color: #fff;
        }
        span {
            display: inline-block;
            width: 200px;
            height: 200px;
            background-color: #000;
        }

        div {
            background-color: #000;
            display: inline-block;
        }
    </style>

盒子模型

边框

基础使用

<style>
        div {
            width: 300px;
            height: 300px;
            background-color: #333;
            margin: 20px;
            padding: 20px;
            color: #fff;
            /* border: 5px solid pink; */
            border-right: 3px solid red;
            border-bottom: 3px solid blue;
        }
    </style>

注意：border属性会影响盒子大小
可以配合box-sizing: border-box使用，这样就不会影响盒子本身的大小了

圆角边框

border-radius
属性值可以是百分比，也可以是其他单位
当盒子是正方形时，属性值设置50% ，也就是盒子宽高的50%，效果出来是一个纯正的圆形

<style>
        .box{
            width: 500px;
            height: 200px;
            background-color: pink;
            border-radius: 250px;
        }
    </style>

内边距

padding指的是盒子内边缘到盒子内容的距离

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            /* padding: 12px; */
            /* padding: 12px 50px; */
            /* padding: 12px 2px 4px 12px; */
            padding: 12px 34px 12px;
        }
    </style>

外边距

margin指的是盒子边框以外的距离

<style>
        p, 
        div {
            width: 400px;
            height: 400px;
            background-color: #333;
            margin: 12px;
        }
    </style>

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

标签居中

<style>
        div {
            width: 600px;
            height: 600px;
            background-color: purple;
            margin: 0 auto;
        }
    </style>

外边距合并

两个盒子相邻时，外边距较大的盒子会把另一个盒子的外边距吞并

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: #444;
        }

        .one {
            margin-bottom: 50px;
        }

        .two {
            margin-top: 20px;
        }
    </style>

<body>
    <div class="one"></div>
    <div class="two"></div>
</body>

外边距塌陷

两个盒子嵌套，里面的盒子设置外边距，会把外边盒子的外边距也跟着拉拢过来

解决方法：给父级盒子加上overflow:hidden

<style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 500px;
            height: 500px;
            background-color: pink;
            /* 给父亲添加溢出隐藏 */
            overflow: hidden;
        }

        .son {
            width: 200px;
            height: 200px;
            background-color: #f00000;
            margin-top: 20px;
        }
    </style>

    <div class="father"><div class="son"></div></div>

盒子阴影

<style>
        .box {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            box-shadow: 40px 20px 50px 12px #000;
        }
    </style>

浮动布局

基本使用

浮动会使得盒子脱离文档流（脱标）
元素会全部靠边排放

<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

 <style>
        .left{
            width: 200px;
            height: 200px;
            background-color: pink;
            float: left;
        }

        .right{
            width: 200px;
            height: 200px;
            background-color: red;
            float: right;
        }
   </style>

清楚浮动

添加`.clearfix`类

<style>
        .father {
            width: 300px;
            border: 1px solid red;
        }

        .son {
            float: left;
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        .box {
            width: 1226px;
            height: 30px;
            background-color: green;
        }

        .clearfix {
            clear: both;
        }
    </style>

<body>
    <div class="father">
        <div class="son"></div>
        <div class="clearfix"></div>
    </div>
    <div class="box"></div>
</body>

单伪元素清除浮动

<style>
        .father {
            width: 300px;
            border: 1px solid red;
        }

        .son {
            float: left;
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        .box {
            width: 1226px;
            height: 30px;
            background-color: green;
        }

        .clearfix::after {
            content: "";
            display: block;
            clear: both;
            /* 兼容性 */
            height: 0;
            visibility: hidden;
        }
    </style>

<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
    <div class="box"></div>
</body>

双伪元素清除浮动

<style>
        .father {
            width: 300px;
            border: 1px solid red;
        }

        .son {
            float: left;
            width: 300px;
            height: 200px;
            background-color: pink;
        }

        .box {
            width: 1226px;
            height: 30px;
            background-color: green;
        }

        .clearfix::after,
        .clearfix::before {
            content: "";
            display: table;
        }

        .clearfix::after {
            clear: both;
        }
    </style>

<body>
    <div class="father clearfix">
        <div class="son"></div>
    </div>
    <div class="box"></div>
</body>

定位

静态定位

css默认的静态定位——static

<style>
        .box {
            position: static;
            top: 20px;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

相对定位

relative
元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。

默认相对父级的起始点移动

<style>
        .box {
            position: relative;
            top: 200px;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

绝对定位

absolute
脱离正常文档流，但与relative的区别是其在正常流中的位置不再存在。
相对于 static 定位以外的第一个父元素进行定位。

<style>
        .box {
            position: absolute;
            top: 200px;
            left: 200px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }
    </style>

子绝父相

众多的PC端布局都会用到子绝父相

例如：遮罩层显示小箭头，logo，小图标……

<style>
        div,
        body {
            margin: 0;
            padding: 0;
        }

        .father {
            position: relative;

            width: 600px;
            height: 600px;
            background-color: pink;
        }

        .son {
            width: 400px;
            height: 400px;
            background-color: red;
        }

        .grandson {
            position: absolute;
            top: 20px;
            right: 50px;
            width: 80px;
            height: 80px;
            background-color: blue;
        }
    </style>

<body>
    <div class="father">
        <div class="son">
            <div class="grandson"></div>
        </div>
    </div>
</body>

定位居中

.box {
            position: absolute;
            top: 50%;
            margin-top: -100px;
            left: 50%;
            margin-left: -100px;
            width: 200px;
            height: 200px;
            background-color: pink;
        }

<body>
    <div class="box"></div>
</body>

固定定位

<style>
        .box {
            position: fixed;
            bottom: 50px;
            right: 50px;
            width: 100px;
            height: 200px;
            background-color: pink;
        }
    </style>

<div class="box"></div>
p{$}*50

显示层级

可以调整元素显示层级
解决某些元素被压在底下的问题

<style>
        div {
            position: absolute;
            width: 200px;
            height: 200px;
        }

        .one {
            top: 100px;
            left: 50px;
            background-color: pink;
            z-index: 1;
        }

        .two {
            top: 150px;
            left: 25px;
            background-color: red;
            z-index: 999;
        }
    </style>

光标

光标类型主要使用cursor: pointer

<style>
        .box{
            width: 200px;
            height: 200px;
            background-color: pink;
            cursor: pointer;
        }
    </style>

隐藏

溢出隐藏

overflow
可以对过多的文字做隐藏处理
也可以做清除浮动使用

<style>
        .box {
            width: 200px;
            height: 500px;
            background-color: pink;
            overflow: auto;
        }
    </style>

<div class="box">此处忽略1w个字</div>

元素隐藏

display:none——元素隐藏后，不占页面空间
visibility——元素隐藏后，会占页面空间

<style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .box {
            visibility: hidden;
            display: none;
        }
    </style>

<body>
    <div class="box"></div>
    <div class="info"></div>
</body>

透明度

`opacity`

属性值0-1（也可以是小数）

边框合并

相邻盒子边框如果是1px，不使用边框合并时，就会合并成2px的边框
解决方法：border-collapse: collapse;

    <style>
        table {
            width: 500px;
            height: 500px;
            border: 1px solid #000;
            border-collapse: collapse;

        }

        td {
            border: 1px solid #000;
        }
    </style>

<table>
        <tr>
            <td>谭</td>
            <td>谭</td>
            <td>谭</td>
        </tr>
        <tr>
            <td>谭</td>
            <td>谭</td>
            <td>谭</td>
        </tr>
        <tr>
            <td>谭</td>
            <td>谭</td>
            <td>谭</td>
        </tr>
        <tr>
            <td>谭</td>
            <td>谭</td>
            <td>谭</td>
        </tr>
        <tr>
            <td>谭</td>
            <td>谭</td>
            <td>谭</td>
        </tr>
    </table>

小三角

<style>
        .box {
            position: absolute;
            top: 0;
            right: -100px;
            width: 0;
            height: 0;
            /* background-color: pink; */
            border-top: 50px solid transparent;
            border-right: 50px solid transparent;
            border-bottom: 50px solid transparent;
            border-left: 50px solid pink;
        }

        .father {
            position: relative;
            width: 300px;
            height: 200px;
            background-color: pink;
        }
    </style>

<body>
    <div class="father">
        <div class="box"></div>
    </div>
</body>

获得焦点

<style>
        input:focus {
            background-color: pink;
        }
    </style>

<input type="text">

精灵图(雪碧图)

基本使用

CSS Sprites
如果项目中有多个图片，那么用户上网时就会发送多个请求去请求图片，降低了网页加载速度
解决方法：在一张图片的内容放上好几张图片，这样用户只需要发送请求一张图片来缓存好，就可以加载出多张需要的图片

<style>
        .spirit_image{
            width: 24px;
            height: 25px;
            background: url("./images/taobao.png") no-repeat 0 -50px;
        }
    </style>

<div class="spirit_image"></div>

背景图片大小

background-size: contain;

过渡

为了让一个效果到另一个效果的过程没有很生硬，可以给元素添加过渡
谁会有效果变化，就给谁添加

<style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
            transition: all 1s;
        }

        .box:hover {
            background-color: transparent;
            width: 500px;
            height: 500px;
        }
    </style>

css基础使用

引入方式

外联式（实际开发）

行内式

嵌入式

选择器

标签选择器

类选择器（设置样式最常用类别）

并集选择器

交集选择器

id选择器

通配符选择器

后代选择器

子代选择器

伪类选择器

结构伪类

伪元素

字体

字号

文字粗细

字体样式

字体库

字体复合属性

文本

文本缩进

水平对齐

文本修饰

行高

行高居中

图片水平居中

背景

背景图片

背景图片位置

背景颜色

元素显示方式

行内块元素

行内块转换

盒子模型

边框

基础使用

圆角边框

内边距

外边距

标签居中

外边距合并

外边距塌陷

盒子阴影

浮动布局

基本使用

清楚浮动

添加.clearfix类

单伪元素清除浮动

双伪元素清除浮动

定位

静态定位

相对定位

绝对定位

子绝父相

定位居中

固定定位

显示层级

光标

隐藏

溢出隐藏

元素隐藏

透明度

opacity

边框合并

小三角

获得焦点

精灵图(雪碧图)

基本使用

背景图片大小

过渡

添加`.clearfix`类

`opacity`