学习CSS2021-07-20

字体

font-weight 粗细
font-style 字体样式 有italic斜体 normal 正常
font-size 字号 px
font-family 字体

字体粗细

CSS使用font-weight属性设置文本字体的粗细。

font：综合设置字体样
基本语法:
选择器{font:font-style font-weight font-size/line-height font-family}；
ps: font-size font-family属性必须保留

文本

颜色

color属性用于定义文本的颜色。

水平对齐

text-align属性用于设置元素内文本内容的水平对齐方式。

装饰文本

text-decoration属性规定添加到文本的修饰。可以给文本添加下划线、删除线、上饿等。

文本缩进

text-indent压性用来指定文本的第一行的福甚，通常是将段落的首行缩进。

em是一个相对单位，就是当前元素( font-size)1个文字的大小,如果当前元素没有设置大小，则会按照父元素的1个文字大小。

行间距

行间距(line-height)包括：上间距、文本高度、下间距

选择器

选择器：选择标签
选择器 {属性：值}
选择器分为基础选择器和复合选择器

基础选择器

基础选择器包括：

标签选择器（使用HTML标签名称作为选择器）

类选择器（差异化选择不同的标签，单独选择一个或多个标签；长名称或词组使用中横线-连接）

id选择器

通配符选择器（*）

类选择器

语法：.类名{属性1:属性值1;…}
一个标签可以使用多个类名：例如<div class=”red font35”>xxxxx

id选择器

#id{属性:属性值…}通过#定义，结构id调用，只能调用一次

通配符选择器

* {属性:属性值…}

id选择器和类选择器的区别：

类选择器（class）可重复使用，id选择器只可使用一次

复合选择器

包括：后代选择器√（包含选择器）、子选择器、并集选择器、伪类选择器等等

后代选择器

后代选择器又称为包含选择器，可以选择父元素里面子元素。其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代.
语法：

元素1 元素2 {样式声明}
也可以元素1 元素2 元素3 …{样式声明}

上述语法表示选择元素1里面的所有元素2(后代元素).

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

子选择器

子元素选择器（子选择器）只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
语法：

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

上述语法表示选择元素1里面的所有直接后代(子元素)元素2。

元素1和元素2中间用大于号隔开
元素1是父级，元素2是子级，最终选择的是元素2
元素2必须是亲儿子，其孙子、重孙之类都不归他管.你也可以叫他亲儿子选择器

并集选择器

并集选择器可以选择多组标签,同时为他们定义相同的样式。通常用于集体声明.
并集选择器是各选择器通过英文逗号(，)连接而成，任何形式的选择器都可以作为并集选择器的一部分。

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

上述语法表示选择元素1和元素2

元素1和元素2中间用逗号隔开
逗号可以理解为和的意思
并集选择器通常用于集体声明

伪类选择器

：用于向某些选择器添加特殊的效果 用冒号（:）表示

链接伪类选择器

注意事项:1.为了确保生效，请按照LVHA的循顺序声明：link -:visited -:hover -:active.
2.因为a链接在浏览器中具有默认样式，所以在实际工作中都需要给链接单独指定样式。

focus伪类选择器

focus伪类选择器：用于选取或得焦点的表单元素

样式表

CSS的三种样式表：
1.行内样式表（行内式）
2.内部样式表（嵌入式）
3.外部样式表√（链接式）

内部样式表

内部样式表(内嵌样式表）足写到html页面内部.是将所有的CSS代码抽取出来，单独放到一个< styde>标签中。

< style>标签理论上可以放在HTML文档的任何地方，但一般会放在文档的< head>标签中

通过此种方式，可以方便控制当前整个页面中的元素样式设置

行内样式表

行内样式表(内联样式表）是在元素标签内部的style属性中设定CSS样式。适合于修改简单样式.

1.style其实就是标签的属性
2.在双引号中间，写法要符合CSS规范

3.可以控制当前的标签设置样式
4.由于书写繁琐，并且没有体现出结构与样式相分离的思想，所以不推荐大量使用，只有对当前元素添加简单样式的时候，可以考虑使用

外部样式表

实际开发都是外部样式表，适合于样式比较多的情况.核心是:样式单独写到CSS文件中，之后把CSS文件引入到HTML页面中使用.
引入外部样式表分为两步:
1.新建一个后缀名为.css的样式文件，把所有CSS代码都放入此文件中。2.在 HTML页面中，使用< link>标签引入这个文件。

图片居中对齐

是需要让其上一级标签添加居中对齐的代码