【css】

本篇学习前端三剑客中的css，学习常见语法以及使用

---

1. css几种引入方式
2. css选择器
3. css常用属性
   字体相关
   文本相关
   背景相关
   圆角矩形

HTML，css，js都是在浏览器中运行的

HTML（了解各种标签）
java的类型是，静态强类型
JS的类型是，动态弱类型

css是层叠样式表
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结
构分离
样式：大小，位置，间距，颜色，字体，边框，背景···统称为样式，描述了一个网页啥样
层叠： 针对一个HTML的元素标签，可以同时使用多组css样式，多组样式会叠加在一起

css代码的语法规则

1.内部样式：之间把css嵌入到HTML中，放在style标签里
2.外部样式：把css写成一个单独.css文件，有HTML通过link标签引入过来
3.内联样式，直接把css属性写到元素的styple属性内

css选择器

div{
}
{}里面是一些具体的css样式（描述样式的详细情况），以键值对的方式组织，
键值对之间，使用；分割
键和值之间，使用：分割
多个键值对，可以放在一行，也可以分成多行放置

css的选择器：

1.标签选择器

使用标签名，把页面中所有同名标签的元素都选中
缺点：难以针对某个元素进行个性化定制

2.类选择器

css中创建一个类名，这个类名对应一组css属性
让指定的HTML元素应用这样的类名即可

一个类名是可以被多个标签引用的
类选择器是最常用，也是功能最丰富的一个选择器

3.id选择器

一个HTML标签，可以有一个id属性，这个属性的值，作为标签的“身份标识”，在页面中，也是唯一的，
同样也可以通过id选择器，把这个指定的元素获取到

4.复杂选择器

可以把上述三种基础结构选择器进行组合，同时能够体现出“标签的层次结构”

后代选择器，可以使用多个基础选择器使用 空格 分开
先找到所有.one的元素，再在.one后代里（子标签）里查找h3标签

对于一个页面特别复杂，就可以使用后代选择器，非常针对性的修改某个元素不必担心影响到其他部分的内容

css常见属性

很多没事多去查
多来点击两下

介绍一些常见的属性

和字体相关的属性

设置字体

 .font-family .two {
        font-family: '宋体';
   }

设置字体大小

p {
    font-size: 20px;
}

设置字体粗细

p {
 font-weight: bold;
    font-weight: 700;
}

设置文字样式

/* 设置倾斜 */
font-style: italic;
/* 取消倾斜 */
font-style: normal;

与文本相关的属性

设置文本颜色

color: red;
color: #ff0000;
color: rgb(255, 0, 0);

color的写法

1. 直接写一些表示颜色的单词（red，blue，green）
2. 使用RGB（光学三原色，红绿蓝）的方式进行表示
3. 使用十六进制的操作进行表示，本质上也是RGB表示
   使用6个十六进制数字，就可以表示RGB颜色了（俩个十六进制数字，就是一个字节）
   在使用时，#AABBCC这个格式的可以缩写成#ABC

设置文本对齐

控制文字水平方向的对齐.。
不光能控制文本对齐, 也能控制图片等元素居中或者靠右。

text-align: [值];

常用取值：

1. center: 居中对齐
2. left: 左对齐
3. right: 右对齐

设置文本修饰

text-decoration: [值];

常用取值：

1. underline 下划线. [常用]
2. none 啥都没有. 可以给 a 标签去掉下划线.
3. overline 上划线. [不常用]
4. line-through 删除线 [不常用]

设置文本缩进

控制段落的 首行 缩进

text-indent: [值];

注意：
单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
缩进可以是负的, 表示往左缩进. (会导致文字就冒出去了)

设置行高

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

line-height: [值];

和背景相关的

背景颜色

设置的背景图片默认是平铺的

background-color: [指定颜色]

背景图片

background-image: url(...);

注意:

1. url 不要遗漏.
2. url 可以是绝对路径, 也可以是相对路径
3. url 上可以加引号, 也可以不加。

背景平铺

background-repeat: [平铺方式]

重要取值:
repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺

默认是 repeat.

设置背景位置

background-position: x y;

修改图片的位置.

1. 方位名词: (top, left, right, bottom)
2. 精确单位: 坐标或者百分比(以左上角为原点)
3. 混合单位: 同时包含方位名词和精确单位

设置背景尺寸

background-size: length|percentage|cover|contain;

可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
也可以填百分比: 按照父元素的尺寸设置.
cover: 把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain: 把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域.

设置圆角矩形

通过 border-radius 使边框带圆角效果
基本语法：

border-radius: length;

如果当前的矩形，是一个正方形，并且border-radius的值恰好是边长的一半，此时就是正圆形

元素的显示属性

块级元素

display：block 块级元素（矩形的盒子）
display： linline 行内元素（一段文本）
display：none实现隐藏的效果
常见的元素
h1 - h6
p
div
ul
ol
li
…

特点:
独占一行
高度, 宽度, 内外边距, 行高都可以控制.
宽度默认是父级元素宽度的 100% (和父元素一样宽)
是一个容器(盒子), 里面可以放行内和块级元素.

行内元素

常见的元素:
a
strong
b
em
i
del
s
ins
u
span
…

特点:
不独占一行, 一行可以显示多个
设置高度, 宽度, 行高无效
左右外边距有效(上下无效). 内边距有效.
默认宽度就是本身的内容
行内元素只能容纳文本和其他行内元素, 不能放块级元素

css盒子模型

每一个 HTML 元素就相当于是一个矩形的 “盒子”
这个盒子由这几个部分构成
边框 border
内容 content
内边距 padding
外边距 margin

通过css就可以针对内边距，外边距，边框的样式进行设置

边框

border
可设置四边
设置边框会把元素撑大
可以对边框进行设置

/* 此时边框就不会撑大元素 */
            box-sizing: border-box;

*这样表示通配符选择器：这样能够选择所有元素
*{
box-sizing: border-box;
}

内边距

padding
也可以设置四边

外边距

margin
外边距，使用方法和padding基本一样
边框和其他元素边框之间

将margin的左右两边设为auto可以实现水平居中的效果
上下设为auto不能实现垂直居中

弹性布局

弹性布局的三个属性

1. 开启弹性布局：display ：flex
   开启弹性布局后，此时内部的子元素就会按照水平方向排列（子元素里面的子元素不受影响）

2. justift-content：设置水平方向的排列规则
   居中排列，靠左，靠右，分散开

3. align-items：设置垂直方向的排列规则