Lesson3：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>
</head>
<body>
    <style>
        div {
            color:black;
            font-size: 30px;
        }
    </style>
    <div>hello</div>
</body>
</html>

先！+enter生产代码模板，再在body标签里面输入代码。后文将只展示body标签里面的代码。

3.2 行内样式表（内联样式）

直接把样式以style属性的方式，写到元素内部。只适合写简单样式，只针对某个标签生效。

缺点：不能写太复杂的样式。这种写法优先级较高，会覆盖其他的样式。

内联

c++：在编译一个被inline修饰的函数时，直接把函数里面的二进制指令给复制粘贴到调用位置，从而节省程序运行时的函数调用开销（调用的时候涉及到栈空间的变化，包括传参、记录返回值，程序跳转)

Java：由编译器自动决定是否要内联

3.3 外部样式

将css单独放到一个文件xxx.css里,再使用link标签将css文件引入进来。

优点：样式和结构彻底分离

缺点：受到浏览器缓存的影响，修改之后不一定生效。

浏览器缓存

是计算机中一种常见的提升性能的手段。

当浏览器访问一个页面的时候，会从浏览器中下载很多内容，包括但不限制于html、css、js、图片、字体、图标等等。通过网络下载，这件事情开销是比较大的，打开一个页面的时候也会比较久，加快访问速度的做法是减少下载的量。由于css、js、图片、字体等很少会改变，浏览器就会把第一次下载好的资源直接保存到本地磁盘上，如果后续再需要用到这些内容，就可以直接从磁盘上读取数据。通常情况下，从磁盘读取会比从网络读取快很多。

解决方案：

这些名字后面带的后缀就是为了解决这个问题。

这些后缀是16进制数据，都是程序自动生成的。如果代码不变，这些后缀也不变。如果改了代码，重新打包部署的时候就会生成新的后缀。
这个是有专门的打包工具的，例如webpack。后缀会自动生成，不太需要程序员干预

四、一些规范

4.1 大小写

css中不区分大小写，属性名都是纯小写。如果一个属性由多个单词构成，使用-来作为分割。

4.2 空格规范

冒号后面带空格，选择器和 { 直接也有一个空格

五、选择器

5.1 选择器的作用

选中页面中的标签元素。先选中元素，才能设置元素的属性。

5.2 选择器的种类

5.3 基础选择器

5.3.1 标签选择器

能快速将同一类型的标签都选择出来，但是不能差异化选择。

5.3.2 类选择器

既可以选中一类元素，也可以差异化设置。使用最多的一种。

语法细节：

被水印盖住的字是：没有任何关系

5.3.3 id选择器

5.3.4 通配符选择器

5.3.5 基础选择器总结

	作用	缺点
标签选择器	能选中所有相同标签	不能差异化选择
类选择器	能选中一个或多个标签	根据需求选择，最灵活常用
id选择器	能选中一个标签	同一个id在一个html中只能出现一次
通配符选择器	选择所有标签	特殊情况下使用

5.4 复合选择器

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

选中父元素中的某个子元素

语法：元素1 元素2 {样式说明}

元素1和元素2要使用空格分割；

元素1是父级，元素2是子级，只选择元素2，不影响元素1.

5.4.2 子选择器

和后代选择器类似，但是只能选择子标签。

语法：元素1>元素2 {样式说明}

注意：使用>进行分割，只能选亲儿子，不选孙子元素

5.4.3 并集选择器

用于选择多组标签(集体声明)

语法：元素1，元素2 {样式说明}

注意：通过逗号分割多个元素、表示同时选中元素1和元素2、任何基础选择器都可以使用并集选择器、并集选择器建议竖着写，每个选择器占一行，最后一个选择器不能加逗号

5.4.4 伪类选择器

（1）链接伪类选择器

a:link：选择未被访问过的链接

a:visited：选择已经被访问过的链接

a:hover：选择鼠标指针悬停上的链接

a:active：选择活动链接（鼠标按下了但是未弹起）

Q：如何让一个已经被访问的链接恢复成未被访问的状态？

清除历史记录即可。ctrl+shift+delete

Q：注意事项

按照LVHA的顺序书写，例如把active拿到前面去，就会导致active失效。

浏览器的a标签都有默认样式，一般实际开发中都需要单独制定样式。

实际开发中主要给链接做一个样式，然后给hover做一个样式。link、visited、active用的不多。

（2）:force伪类选择器

选取获取焦点的input表单元素

被选中表单的字体是红色的。

5.4.5 复合选择器总结

	作用	注意事项
后代选择器	选中后代元素	可以是孙子元素
子选择器	选择子元素	只能选亲儿子，不能选孙子
并集选择器	选中相同样式的元素	更好的做到代码重用
链接伪类选择器	选中不同状态的链接	重点掌握a:hover的用法
:focuse伪类选择器	选择被选中的元素	重点掌握input:focus的用法

六、字体属性

6.1 设置字体font-family

字体名称可以用中文, 但是不建议

多个字体之间使用逗号分隔. (从左到右查找字体, 如果都找不到, 会使用默认字体. )

如果字体名有空格, 使用引号包裹.

建议使用常见字体, 否则兼容性不好.

6.2 大小font-size

不同的浏览器默认字号不一样, 最好给一个明确值. (chrome 默认是 16px)

可以给 body 标签使用 font-size

要注意单位 px 不要忘记.

标题标签需要单独指定大小

实际上设置的是字体中字符框的高度，实际的字符字形可能比这些框高或矮

6.3 粗细font-weight

可以使用数字表示粗细，700==bold，400是不变粗，即400==normal，

字体的取值范围是100-900

6.4 文字样式font-style

设置倾斜：italic

取消倾斜：normal

在实际中，很少把某个文字变倾斜，但是经常要把em改成不倾斜

七、文本属性

7.1 文本颜色color

color属性的取值：

①预定义的颜色值（直接是单词）。

②十六进制形式（有一种简化表示方法，如#AABBCC-》ABC，三个部分必须同时满足叠字情况，才可以省略）。

③RGB方式。

7.2 文本装饰text-decoration

常用取值：

underline：下划线，常用

none：啥都没有，可以给a标签去掉下划线。

overline：上划线，不常用

line-through：删除线，不常用

7.3 文本缩进text-indent

控制段落首行的缩进，其他行不受影响。

单位可以用px或者em。

使用px作为单位，因为不知道一个字是由多少像素确定的，所以无法将缩进调整为多少px。可以使用font-size确定字体的大小，再设置缩进。

更推荐使用em。em是一种相对单位。1em表示和当前字体一样大，假设1em=7px，2em=14px。

7.4 行高line-height

行高指的是上下文本行之间的基线距离。

行高=上边距+下边距+字体大小=文字大小+行间距

行高也可以取normal等值。具体取值与浏览器有关。

行高和元素高度相同，可以实现文字居中对齐。

7.5 文本对齐text-align

center：居中对齐

left：左对齐

right：右对齐

八、背景属性

8.1 背景颜色background-color

默认是transparent透明的，可以通过设置颜色的方式修改。

8.2 背景图片background-image

background-image：url(·····)

url：不要漏写，可以是绝对路径也可以是相对路径，url可以加上引号也可以不加

8.3 背景平铺background-repeat

取值：

repeat：平铺（默认）

no-repeat：不平铺

repeat-x：水平平铺

repeat-y：垂直平铺

背景颜色和背景照片可以同时存在。背景图片在背景颜色的上方。

8.4 背景位置background-position

参数有三种风格：

1. 方位名词: (top, left, right, bottom)

2. 精确单位: 坐标或者百分比(以左上角为原点)

3. 混合单位: 同时包含方位名词和精确单位

如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)

如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )

如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200

如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.

如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂
直居中)

8.5 背景尺寸background-size

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px

也可以填百分比: 按照父元素的尺寸设置.

cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无
法显示在背景定位区域中。

contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

九、圆角矩形border-radius

9.1 基础操作

border-radius：length，length是内切圆的半径。

9.2 生成圆形

让 border-radius的值为正方形宽度的一半即可。

9.3 补充

border-radius是一个复合写法，实际上可以针对四个角分别设置。

border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius（顺时针排列）

十、元素的显示模式

10.1 块级元素

常见的元素：h1-h6、p、div、ul、ol、li······

特点：

注意：文字类的元素内不能使用块级元素，如p标签主要用于存放文字，内部不能存放块级元素，尤其是div

10.2 行内元素

常见元素：a、strong、b、em、i、del、s、ins、u、span····

特点：

常见的坑：如尝试给一个a标签设置宽度高度

注意：a标签中不能再放a标签，虽然chrome不报错，但是最好不要这样做

a标签里面可以放块级元素，但是更建议先把a转换为块级元素

10.3 行内块元素inline-block，比较少见

典型的就是img标签，不独占一行、可以设置尺寸

10.4 改变显示模式

使用display把行内元素和行内块元素转为块级。但是很少将块级元素转为行内元素。

10.5 盒模型

html元素，都是一个个矩形盒子。

这个规则主要针对块级元素，对于行内元素不考虑。

10.6 边框border

10.6.1 基础属性

10.6.2 边框会撑大盒子

设置的width和height是不包含边框的部分。如果没有标签，此时的尺寸就和设置的是一样的。如果有了边框，整个元素就会被撑大了。这种设定是非常不方便的，在进行页面布局时计算起来是非常麻烦的。更希望在设置尺寸时能够包含边框。

box-sizing：默认值是content-box，尺寸不包含边框。将其设置为border-box，就可以解决该问题。

10.6.3 内边距padding

默认内容是顶着边框来放置的，可以使用padding设置内容和边框之间的距离。

给四个方向都加上内边距：

padding-top、padding-bottom、padding-left、padding-right

内边距也会撑大盒子，采用box-sizing:border-box可以使内边距不再撑大盒子。

10.6.4 外边距

10.6.5 块级元素水平居中

居中的前提：

指定宽度（如果不指定宽度，默认和父元素一致）、把水平margin设置为auto

margin:0 auto 是块级元素居中

text-align：center，是让行内或者行内块元素居中的

10.6.6 垂直居中

不能使用上下margin为auto的方式。

在css里面，将子元素设置为垂直居中是个比较复杂的事情，暂时不做介绍。

10.7 去除浏览器默认样式

浏览器会给元素加上一些默认的样式，尤其是内外边距。不同的浏览器的默认样式存在差别。为了保证代码在不同的浏览器上都能按照统一的样式显示，往往会去除浏览器的默认样式。

十一、弹性布局

11.1 布局的相关概念

布局：是指在一个界面内，把元素放在哪个位置。布局不仅仅是页面要布局，桌面程序的开发、移动端APP的开发都涉及到布局问题。

在早期，布局就是单纯的计算位置的坐标，非常不便，容易算错，一旦窗口大小发生了变化，页面就变了。1991年，出现了两个黑马，一个是QT一个是MFC。

常用的布局：表格、float(一种线性布局，坑比较多)、flex(功能更强大的线性布局，很多网页都在使用)、grid(网格布局，属于二维的布局方式，当前还没有普及)

弹性布局是页面布局的一种比较现代化的方式，在老的浏览器上是不支持的，如IE6、IE7

11.2 flex布局基本概念

11.2.1 flex布局定义

flex是flexible box的缩写，意思是弹性盒子。任何一个HTML元素，都可以指定为display:flex弹性布局。

flex布局的本质是给父盒子添加display:flex属性，来控制子盒子的位置和排列方式。

11.2.2 基础概念

被设置为display:flex属性的元素，称为flex container。

他的所有子元素称为该容器的成员，称为flex item；孙子元素不行，可以给子元素再写一个flex。

flex item可以纵向排列，也可以横向排列，称为flex direction(主轴)

11.2.3 注意事项

当给父元素设置这个属性，此时父元素里面的元素都要遵守弹性布局规则，子元素的float、clear、vertical-align都会失效。里面的子元素就不再按照块级元素、行内元素的规则来排列了。

11.3 display:flex 设置在父元素上，开启flex布局。

display:flex

11.4 justify-content：控制元素在水平方向上如何排列（主轴方向）

值	描述
flex-start	默认值。项目位于容器的开头
flex-end	项目位于容器的结尾
center	项目位于容器的中央
space-between	项目在行与行之间留有间隔
space-around	项目在行之前、行之间和行之后留有空间

11.5 align-items：控制元素在垂直方向如何排列(侧轴方向).

值	描述
stretch	默认值。行拉伸以占据剩余空间
center	在弹性容器的中央对行打包
flex-start	在弹性容器的开头对行打包
flex-end	在弹性容器的结尾对行打包
space-between	行均匀分布在弹性容器里
space-around	行均匀分布在弹性容器里，两端各占一半

11.6 felx布局经典案例-圣杯布局

很多很多页面，都是按照这种圣杯的方式来布局的。

<!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>
    <link rel="stylesheet" href="./css1.css">
</head>
<body>
    <style>
        * {
            margin: none;
            padding: none;
            box-sizing: border-box;
        }
        .header,
        .footer {
            width: 100%;
            height: 30px;
            background-color: pink;
        }
        .body {
            width: 100%;
            height: 240px;
            display: flex;
            justify-content: space-between;
        }
        .body .left{
            width: 30px;
            background-color: gray;
        }
        .body .right{
            width: 30px;
            background-color: green;
        }
        .body .center{
            width: calc(100% - 60px);
            background-color: rgb(208, 100, 100);
        }
    </style>
    <div class="header">顶部</div>
    <div class="body">
        <div class="left">左边</div>
        <div class="center">中间</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">底部</div>
</body>
</html>