CSS基础——看这一篇就够了

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .box {
            width: 100px;
            height: 150px;
        }

        .red {

            background-color: red;
        }

        .green {

            background-color: green;
        }
    </style>
</head>

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

</html>

（3）标签选择器

HTML：设置id选择器，CSS： “#”来定义

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .box {
            width: 100px;
            height: 150px;
        }

        .red {

            background-color: red;
        }

        .green {

            background-color: green;
        }

        #blue {
            background-color: skyblue;
        }
    </style>
</head>

<body>
    <div class="box red"></div>
    <div class="box green"></div>
    <div class="box" id="blue"></div>
</body>

</html>

与类选择器的区别

类选择器（class）可多次使用，好比一个人可以有多个名字，同个名字可以被多个人使用
id选择器相当于身份证，具有唯一性，不可重复
d选择器和类选择器区别在于使用次数上
类选择器用的最多，id选择器一般用于页面唯一性的元素上，和JavaScript搭配使用

(4) 通配符选择器

“ * ”定义，表示选取页面中所有元素,通配符选择器不需要调用，自动给所有的元素使用样式
特殊情况才使用

 * {
            margin: 0;
            padding: 0;
        }

用于设置页面的内外边距

2.复合选择器

由两个或者多个基础选择器通过不同方式组合而成（更准确，高效的选择目标元素）

（1）后代选择器（包含选择器）

元素1 元素2 {样式声明}

元素1和元素2中间用空格隔开
元素1时父级，元素2时子级，最终选择的是元素2
元素2 可以是儿子也可以是孙子，是元素1的后代即可
元素1 和元素2可以是任意基础选择器

  h1 span {
            color: blue;
            font-size: 12px;
            font-weight: 400;
        }

（2）子选择器

只能选择最近一级的子元素

元素1>元素2 {样式声明}

元素1和元素2中间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2只能是亲儿子

  h1>span {
            color: blue;
            font-size: 12px;
            font-weight: 400;
        }



<h1> 沁园春·长沙 <span>【毛泽东】</span> </h1>

（3）并集选择器

可以选择多组标签，同时为他们定义相同的样式

元素1 ，元素2{样式声明}

元素1和元素2中间用逗号隔开
逗号为“和”的意思
通常用于集体声明


 .p1,
        .p3,
        .p5,
        .p7 {
            color: blue;
            font-size: 20px;
        }


<p class="p1">独立寒秋， <span>湘江北去</span> ，橘子洲头。</p>
   
    <p class="p3">鹰击长空 ， <span>鱼翔浅底</span> ，万类霜天竞自由。</p>
   
    <p class="p5">携来百侣曾游，忆往昔峥嵘岁月稠。</p>
   
    <p class="p7">指点江山，激扬文字，粪土当年万户侯。</p>

（4）伪类选择器

向选择器添加特殊的效果

用“：”表示——例 a:hover

  a:hover {
            background-color: #ff6700;
        }

伪类选择器

链接伪类选择器

a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover选择鼠标指针位于其上的链接
a:active选择活动链接（鼠标按下未弹起的链接）

注意事项

按照LVHA顺序：link，visited，hover，active
链接在浏览器中有默认样式，需要给链接单独指定样式

:focus 伪类选择器

选取获得焦点的表单元素
一般来说用于<input>类表单

三、基本属性

1.字体属性

1.1 字体系列 font-family

body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

各种字体之间必须使用英文的逗号隔开
多个单词组成的字体加引号
常见的字体：body{font-family:'Microsoft YaHei',tahoma,arial,'Hiragino Sans GB';}

1.2 字体大小 font-size

font-size:16px;

px（像素）大小是常用单位
谷歌默认大小16px
不同浏览器默认值不同，尽量给一个明确的值
body指定整个页面文字大小，标题除外

1.3 字体粗细 font-weight

font-weight: 400;

normal 默认值，不加粗
bold 加粗
100-900 400等同于normal，700等同于bold，数字后面不跟单位

1.4 文字样式 font-style

font-style:normal;

normal 默认值，不倾斜
italic 显示斜体字样

1.5 字体符合属性

格式：font : font-style font-weight font-size/line-height font-family;

使用font属性时，不能更换顺序，以空格隔开
不需要设置的属性可以省略，但必须保留font-size和font-family，否则font属性不起作用

2. 文本属性

2.1 文本颜色

color： red ；

预定义的颜色值：black，skyblue等
十六进制
RGB代码

2.2 文本对齐

text-align：center;

属性：

left	文本左对齐
right	文本右对齐
center	文本居中

2.3 装饰文本

text-decoration

属性：

none	默认没有下划线
underline	下划线
overline	上划线
line-through	删除线

2.4 文本缩进（首行缩进）

text-indent：2em;

属性：

px	长度可以时负值
em	相对单位，相当于当前元素的1个文字大小

2.5 行间距

line-height：20px；

行间距为上间距+文本高度+下间距

3.背景

给页面元素添加背景样式

3.1 背景颜色

background-color：red；
默认背景颜色transparent(透明)

3.2 背景图片

background-image：url(链接)；

div {
            background: url(images/1.png);
        }

none 无背景图（默认）
url 使用相对或绝对地址指定背景图像

3.3 背景平铺

background-repeat：no-repeat；

repeat 背景图片平铺（默认）
no-repeat 不平铺
repeat-x 横向上平铺
repeat-y 纵向上平铺

3.4 背景图片位置

background-position：top center；

方位名词

两个值的顺序无关

指定一个方位名词，另一个值省略，则第二个值默认居中对齐

精确单位

参数值有精确的坐标，顺序一定是x在前
只指定一个数值，该数值为x坐标，另一个默认垂直居中

混合单位

参数值是精确单位和方位名词混合使用
第一个值是x坐标，第二个值是y坐标

3.5 背景图片固定(背景附着)

background-attachment：fixed；

scroll 背景图片随着对象内容滚动
fixed 背景图像固定

3.6 背景复合写法

background：背景颜色背景图片背景平铺背景图像固定背景图片位置

body {
            background: url(images/bg.jpg) no-repeat center top fixed;
        }

背景色半透明

background：rgba（0，0，0，0.3）

.subnav {
    float: left;
    width: 190px;
    height: 421px;
    background: rgba(0, 0, 0, .3);
}

rgba（red，green，blue，alpha）
最后参数为alpha（透明度），取值范围：0~1
可以把0.3写成.3
盒子背景半透明，盒子内容不受影响

四、引入方式

1.行内样式表（行内式）

在元素标签内部的style属性中设定CSS样式（适合修改简单样式）

<div class="red" style="background-color: red;">123</div>

style其实就是标签的属性
双引号，符合CSS规范
可以控制当前的标签样式
结构样式混乱

2.内部样式表（嵌入式）

将CSS代码抽取出来单独放到<style>标签中

 <style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>

一般放在<head>标签中，理论上可以放到任何地方
控制整个页面的元素样式设置
部分结构和样式相分离

3.外部样式表（链接式）

新建一个后缀为.css的样式文件，把CSS代码都放入此文件中

 <link rel="stylesheet" href="style.css">

在HTML页面中，使用<link>标签引入这个文件
<link rel="stylesheet" href="css文本路径">
结构和样式分离

五、元素显示模式

1.块元素

<h1~h6>,<p>,<div>,<ul>,<ol>,<li>

一行只能放一个块元素
可以设置宽度，高度
默认宽度是容器的100%
可以包含任何标签

注意：

<p>标签里面不能放块级元素，特别不能放<div>
h1~h6也是文字类块级标签，不能放其他块级元素

2.行内元素

<a>,<strong>,<b>,<em>,<i>,<del>,<s>,<u>,<span>

一行可以放多个行内元素
不能直接设置宽度高度
本身内容的宽度
只能容纳文本或者其他行内元素

注意：

链接里面不能再放链接
特殊情况链接<a>里面可以放块级元素
但是给<a>转换一下会计模式最安全

3. 行内块元素

<img/>,<input/>,<td>

同时具有块元素和行内元素的特点
一行可以放多个行内元素
可以设置宽度，高度,外边距及内边距
本身内容的宽度

4. 元素显示模式转换

display:block; 转换为块元素

display:inline;转化为行内元素

display:inline-block;转化为行内块

六、三大特性

1.层叠性

相同选择器设置相同的样式（解决样式冲突）

遵循就近原则
样式不冲突不会层叠

两个相同的样式会遵循就近原则执行更靠近元素的哪一个样式，下面代码中skyblue更靠近div，所以现实的颜色为蓝色

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        div {
            background-color: skyblue;
        }
    </style>
</head>

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

</html>

2. 继承性

（1）子标签会继承父标签的某些样式

子元素继承父元素的样式（例：text- ，font- ，line-等元素开头及color元素

（2）行高的继承性

font ：12px/1.5 microsoft yahei;

行高可以跟单位也可以不跟单位
子元素没有设置行高会继承父元素的行高
当前子元素的文字大小*1.5
body行高设为1.5，最大的优势是子元素可以根据自己的文字大小自动调节行高

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            font: 12px/1.5 'microsoft yahei';
        }
    </style>
</head>

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

</html>

2. 优先级

同一个元素指定多个选择器，会有优先级产生。

选择器相同，执行层叠性
选择器不同，根据选择器权重执行

选择器权重

继承或者“ * ”	0，0，0，0
元素选择器	0，0，0，1
类选择器，伪类选择器	0，0，1，0
ID选择器	0，1，0，0
行内样式style=""	1，0，0，0
！important	无穷大

注意点

       权重由4位数字组成，不会进位
       等级判断从左到右
       继承的权重是0
       如果元素没有直接选中，不管父元素权重多高，子元素继承的权重都为0权重叠加

权重叠加

复合选择器，会有权重叠加，需要计算权重

           dix ul li 0,0,0,3
           .nav ul il    0,0,1,2
           a:hover 0,0,1,1
           .nav a 0,0,1,1

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .box {
            background-color: skyblue;
        }

        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            font: 12px/1.5 'microsoft yahei';
        }
    </style>
</head>

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

</html>

七、盒子模型

网页布局本质——利用css摆盒子
准备好相关的网页元素，基本上是盒子，利用css设置好盒子样式，摆到相应位置，往盒子装内容

1. 组成

1.1 boder边框

border-width	边框粗细	单位 px
border-style	边框样式	soild 实线边框 dashed 虚线边框 dotted 点线边框
border-color	边框颜色

复合写法：border: 1px solid red; 没有顺序

边框分开写法

border-top: 1px solid red; 只设定上边框
border-bottom: 1px solid red; 只设定下边框
border-left: 1px solid red; 只设定左边框
border-right: 1px solid red; 只设定右边框

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            border-top: 2px solid pink;
            border-bottom: 2px solid red;
            border-left: 2px solid greenyellow;
            border-right: 2px solid blueviolet;
        }
    </style>
</head>

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

</html>

表格的细线边框：

border-collapse:collapse; 表示相邻边框合并在一起

注意：
边框影响盒子实际大小测量盒子时要减去边框宽度

1.2 padding内边距

padding-left	左内边距
padding-right	右内边距
padding-top	上内边距
padding-bottom	下内边距

复合格式：

padding:5px;	代表上下左右都有5像素内边距
padding:5px 10px;	代表上下有5像素，左右有10像素
padding:5px 10px 20px;	代表上内边距5像素，左右内边距10像素下内边距20像素
padding:5px 10px 20px 30px;	代表上内边距5像素，右内边距10像素，下内边距20像素，左内边距30像素顺时针

盒子受影响情况：

会影响盒子大小

盒子已经有了高度和宽度，再指定内边距，会撑大盒子，内边距padding影响盒子实际大小

解决方法：要保证盒子和效果图像大小保持一致，则让width/height减去多出来的内边距大小

不会影响盒子大小的情况

盒子本身没有设置width/height属性，此时padding不会撑开盒子

1.3margin外边距

margin-left	左外边距
margin-right	右外边距
margin-top	上外边距
margin-bottom	下外边距

复合格式：

margin:5px;	代表上下左右都有5像素外边距
margin:5px 10px;	代表上下有5像素，左右有10像素
margin:5px 10px 20px;	代表上外边距5像素，左右外边距10像素下内边距20像素
margin:5px 10px 20px 30px;	代表上外边距5像素，右外边距10像素，下外边距20像素，左外边距30像素顺时针

块级盒子水平居中

           盒子必须指定宽度
           盒子左右的外边距都设置为auto
           行内元素或者行内块元素水平居中给父元素添加text-align:center即可

写法： margin: 0 auto ;

外边距合并

1.相邻块元素垂直外边距的合并

上下两个块元素都设置了外边距，取两个值中的较大者

解决方案：尽量只给一个盒子添加margin值

2. 嵌套块元素垂直外边距的塌陷

对于两个嵌套关系（父子关系）的块元素，父元素有上外边框，子元素也有上外边框，此时父元素会塌陷较大的外边距值

解决方案：

                       可以为父元素定义上边框
                       可以为父元素定义上内边框
                       可以为父元素添加overfiow:hidden
                       浮动盒子没有外边距合并问题

清除内外边距
不同浏览器带有不同的默认内外边距，清除网页元素的内外边距

* {
margin: 0; /* 清除外边距 */
padding: 0; /* 清除内边距 */
}

注意：
行内元素为了照顾兼容性，尽量只设置左右内外边距，不设置上下内外边距
但是转化为块级或者行内块元素就行

2. 圆角边框

border-radius:lenght;

参数值可以是数值也可以是百分比形式
矩形：设置为高度的一半
简写：左上角 border-top-left-radius
右上角 border-top-right-radius
右下角 border-bottom-right-radius
左下角 border-bottom-left-radius

3. 盒子阴影

box-shadow

h-shadow	必需，水平阴影
v-shadow	必需。垂直阴影的位置。允许负值
blur	可选。模糊距离（虚实）
spread	可选。阴影的尺寸
color	可选。阴影的颜色
inset	可选。将外部阴影（outset）改为内部阴影

注意：