CSS必知必会

CSS概念

css的使用是让网页具有统一美观的页面，css层叠样式表，简称样式表，文件后缀名.css

css的规则由两部分构成：选择器以及一条或者多条声明

选择器：通常是需要改变的HTML元素

声明：由一个属性和一个值组成，每个属性有一个值，属性和值使用类似key：value的形式（如下方h1就是选择器，color就是属性，
rebeccapurple
就是值，属性和值成为一条声明）

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>h1{color:rebeccapurple;font-size:10px;
        }
    </style>
</head>
<body>
    <h1>Welcome CSS</h1>
</body>
</html>

CSS的引入

行内样式：在需要改变的标签内使用style属性，让style属性包含任何css的属性

注：缺点是缺乏整体统一性，不利于维护

 <h1style="background-color: blueviolet; font-size: 20px;">Welcome CSS</h1>

内部样式，在单个文档需要的特殊样式，如上方css概念中的例子，在文档头部使用style标签增加样式

注：可以让单个页面css代码具有统一性，但多个页面容易混乱

外部样式：当样式应用于多个页面，外部样式在每个需要使用的页面通过link标签链接到样式表。link标签在文档头部

建立一个
public.css
文件，写外部样式

p{

    color: aquamarine;

    font-size: 20px;

}

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <linkrel="stylesheet"href="./public.css">
</head>
<body>
    <p>产品</p>
</body>
</html>

选择器

全局选择器：优先级最低，一般做初始化样式

*{

    color: blue;

}

用通配符 *

元素选择器：选择页面所有相同类型标签，用于描述这些类型的共性，无论这个标签藏的多深都能被选择上

HTML文档中的p、div、img等等标签

p{

    color: blue;

}

类选择器：用圆点.来定义，针对相同类的标签，类名不能用数字开头，同一个标签可以使用多个类选择器，用空格隔开

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>.classone{color:red;font-size:30px;
        }.classtwo{background-color:black;height:100px;
        }
    </style>
</head>
<body>
    <h1class="classone classtwo">标题</h1>
</body>
</html>

ID选择器：针对特定id标签来使用，只能使用一次，用#来定义，不能用数字开头

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>#mytext{color:red;
        }
    </style>
</head>
<body>
    <pid="mytext">文本</p>
</body>
</html>

合并选择器：多个标签提取共同样式，减少重复代码

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>#mytext,.mytitle{color:red;
        }.mytitle{background-color:black;
        }
    </style>
</head>
<body>
    <pid="mytext">文本</p>
    <h1class="mytitle">标题</h1>
</body>
</html>

选择器优先级：行内样式 > ID选择器 > 类选择器 > 元素选择器

字体属性

包括颜色、大小、加粗、文字样式

颜色

<pstyle="color: red;">字体颜色</p>
<pstyle="color: #fff000;">字体颜色</p>
<pstyle="color: rgb(0,0,0);">字体颜色</p>
<pstyle="color: rgba(0, 0, 0, 1);">字体颜色</p>

大小

<pstyle="color: red;font-size: 30px;">字体颜色</p>

粗细

数值范围100-900，400是默认值，700等同于
bold

<pstyle="font-weight: bold;">字体颜色</p>
<pstyle="font-weight: bolder;">字体颜色</p>
<pstyle="font-weight: lighter;">字体颜色</p>
<pstyle="font-weight: 900;">字体颜色</p>

文字样式

<pstyle="font-style: normal;">字体颜色</p>
<pstyle="font-style: italic;">字体颜色</p>
<pstyle="font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;">字体颜色</p>

背景属性

属性	值
background-color	背景颜色
background-image	背景图片
background-positio	图片位置
background-repeat	图片填充
background-size	图片大小

background-repeat

属性	值
repeat	默认值
repeat-x	水平方向平铺
repeat-y	垂直方向平铺
no-repeat	不平铺

background-size
：可以使用数值设置宽度和高度，也可以使用百分比，最常用的是两个值cover（保持图片横纵比将图片覆盖背景最小大小），contain（保持图片横纵比将图片覆盖背景最大大小）

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>.box1,.box2{width:600px;height:600px;
        }.box1{background-image:url(./u=1175012548\,1449685026&fm=253&fmt=auto&app=138&f=JPEG.webp);background-repeat:no-repeat;background-size:cover;
        }.box2{background-color:rebeccapurple;background-position:left top;
        }
    </style>

</head>
<body>
    <divclass="box1">背景1</div>
    <divclass="box2">背景2</div>
</body>
</html>

文本属性

文本对齐方式：居中、靠左、靠右

<h1style="text-align: center;">h1</h1>
<h2style="text-align: left;">h2</h2>
<h3style="text-align: right;">h3</h3>

文本添加下划线、上划线和删除线

<h1style="text-decoration: underline;">h1</h1>
<h2style="text-decoration: overline;">h2</h2>
<h3style="text-decoration: line-through;">h3</h3>

文本大小写

<h1style="text-transform: capitalize;">h1</h1>
<h2style="text-transform: uppercase;">h2</h2>
<h3style="text-transform: lowercase;">h3</h3>

首行文本缩进

<h1style="text-transform: capitalize; text-indent: 100px;">h1</h1>

表格边框、颜色、边框折叠

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>table,td{border:1px solid red;
        }table{border-collapse:collapse<!-- 折叠边框 -->;padding:20px;
        }
    </style>
</head>
<body>
    <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>
    </table>
</body>
</html>

关系选择器

后代选择器：所有所有被A包含的B元素，用空格分开A B{ }

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>ul li{color:#fff000;
        }
    </style>
</head>
<body>
    <ul>
        <li>A</li>
        <li>B</li>
    </ul>
</body>
</html>

子代选择器：只对所有A标签的直接子标签B起作用，A>B{ }

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>div>span{color:#fff000;
        }
    </style>
</head>
<body>
    <div>
        <span>A</span>
        <h1><span>B</span></h1>
        <span>C</span>
    </div>
</body>
</html>

相邻兄弟选择器：选择紧跟A标签后的B元素，选择向下相邻的第一个兄弟元素， A+B{ }

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>span+p{color:#fff000;
        }
    </style>
</head>
<body>
    <div>
        <span>A</span>
        <p>B</p>
        <p>C</p>
    </div>
</body>
</html>

通用兄弟选择器：选择A之后的所有兄弟元素B作用多个，A~B{ }

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>span~p{color:#fff000;
        }
    </style>
</head>
<body>
    <div>
        <span>A</span>
        <p>B</p>
        <p>C</p>
    </div>
</body>
</html>

盒子模型

css的盒子包括外边距（margin），边框（border），内边距（padding），实际内容（content）

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>div{width:100px;height:100px;background-color:yellow;padding:50px 10px;border:5px solid red;margin:80px;
        }
    </style>
</head>
<body>
    <div>content</div>
</body>
</html>

弹性盒子模型

弹性盒子是由弹性容器和弹性子元素组成，弹性容器通过设置display属性值为flex来定义弹性容器，弹性盒子只对弹性子元素生效

通过flex-direction来设置子元素在容器中的位置（默认水平排列）row左对齐；row-reverse翻转右对齐；column纵向排列；column-reverse翻转纵向排列

子元素可以通过flex来分配空间

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>.container{width:500px;height:500px;background-color:black;display:flex;justify-content:center;align-items:center;
        }.box1,.box2,.box3{width:100px;height:100px;
        }.box1{background-color:red;flex:10%;
        }.box2{background-color:yellow;flex:30%;
        }.box3{background-color:blue;flex:60%;
        }
    </style>
</head>
<body>
    <divclass="container">
        <divclass="box1"></div>
        <divclass="box2"></div>
        <divclass="box3"></div>
    </div>
</body>
</html>

浮动

增加一个浮层来放置内容

float的值	值描述
left	向左浮动
right	向右浮动

浮动以后相当于在页面增加一个浮层来放置内容

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>.box1{width:100px;height:100px;background-color:red;float:left;
        }.box2{width:200px;height:200px;background-color:yellow;
        }
    </style>
</head>
<body>
    <divclass="box1"></div>
    <divclass="box2"></div>
</body>
</html>

清除浮动

浮动元素会造成父元素高度塌陷，如下方例子，不设置父元素的高度，浮动就无法把父元素撑起来

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>.box1{width:200px;background-color:red;
        }.box2{width:100px;height:100px;background-color:yellow;float:left;
        }
    </style>
</head>
<body>
    <divclass="box1">
        <divclass="box2"></div>
    </div>
</body>
</html>

解决方案可以设置父元素的高度，也可以通过清除浮动，通过在父标签加overflow：fidden

.box1{

    width: 200px;

    background-color: red;

    overflow: hidden;

    clear: both;

}

除了造成父元素塌陷，同样也会影响后续元素，例子如下，我们同样无法看到box3，因为被浮动的box2遮挡

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>.box1{width:200px;background-color:red;overflow:hidden;clear:both;
        }.box2{width:100px;height:100px;background-color:yellow;float:left;
        }.box3{width:100px;height:100px;background-color:black;
        }
    </style>
</head>
<body>
    <divclass="box1">
        <divclass="box2"></div>
        <divclass="box3"></div>
    </div>
</body>
</html>

解决方法就是，在需要处理的地方加上clear:both

.box3{

    width: 100px;

    height: 100px;

    background-color: black;

    clear: both;

}

定位

position的值	值描述
relative	相对定位
absolute	绝对定位
fixed	固定定位

设置后可以通过left、top、right、bottom来调整，每用一个position就会增加一个浮层：

固定定位是不会随着页面移动变动位置的，永远在固定位置

相对定位和绝对定位是根据具有定位的父元素进行定位的，如果父级没有定位就会根据页面来定位

相对定位是不脱离文档流的，绝对定位和固定定位都是脱离文档流的

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>div{width:100px;height:100px;background-color:red;position:relative;left:100px;top:100px;
        }.box1{width:100px;height:100px;background-color:black;position:absolute;left:100px;top:300px;
        }
    </style>
</head>
<body>
    <div></div>
    <divclass="box1"></div>
</body>
</html>

调整位置顺序通过z-index，如下方例子，原本是黑色遮盖红色，如果想调整为红色在上，只需要增加z-index

<!DOCTYPE html>
<htmllang="en">
<head>
    <metacharset="UTF-8">
    <metahttp-equiv="X-UA-Compatible"content="IE=edge">
    <metaname="viewport"content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>div{width:100px;height:100px;background-color:red;position:relative;left:100px;top:100px;

        }.box1{width:100px;height:100px;background-color:black;position:absolute;left:100px;top:100px;
        }
    </style>
</head>
<body>
    <div></div>
    <divclass="box1"></div>
</body>
</html>

z-index大的值在上方

div{

    width: 100px;

    height: 100px;

    background-color: red;

    position: relative;

    left: 100px;

    top: 100px;

    z-index: 2;



}

.box1{

    width: 100px;

    height: 100px;

    background-color: black;

    position: absolute;

    left: 100px;

    top: 100px;

    z-index: 1;

}