css样式基础
CSS是层叠样式表( Cascading Style Sheets ) 的简称.有时我们也会称之为CSS 样式表或级联样式表。
CSS 是也是一种标记语言
CSS 主要用于设置HTML 页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。
css引入方式
1. 行内样式表
行内样式表（内联样式表）是在元素标签内部的style 属性中设定CSS 样式。适合于修改简单样式.
<div style="color:rgb(13, 255, 0); background-color: rgb(246, 255, 127);">hello world!</div>
2. 外部样式表
样式单独写到CSS 文件中，之后把CSS文件引入到HTML 页面中使用.放在<head>标签中，可以控制多个页面
1. 新建一个后缀名为.css 的样式文件，把所有CSS 代码都放入此文件中。
2. 在HTML 页面中，使用<link> 标签引入这个文件。
<link rel="stylesheet" href="外部样式表文件名.css" type="'text/css">| 属性 | 作用 |
|---|---|
| rel | 定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件 |
| href | 定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径 |
3. 内部样式表
所有的样式，都包含在<style> 标签内，表示是样式表 。
内部样式表（内嵌样式表）是写到html页面内部. 是将所有的CSS 代码抽取出来，单独放到一个<style> 标签中。
<style> 标签理论上可以放在HTML文档的任何地方，但一般会放在文档的<head>标签中
CSS 规则由两个主要的部分构成：选择器以及一条或多条声明。
选择器是用于指定CSS样式的HTML标签，花括号内是对该对象设置的具体样式
属性和属性值以“键值对”的形式出现
属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等
属性和属性值之间用英文 “:” 分开
多个“键值对”之间用英文 “;” 进行区分
①属性值前面，冒号后面，保留一个空格
②选择器（标签）和大括号中间保留一个空格
②建议样式选择器，属性名，属性值关键字全部使用小写字母
元素的显示模式
1. 块元素
常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>标签是最典型的块元素。
块级元素的特点：
①比较霸道，自己独占一行。
②高度，宽度、外边距以及内边距都可以控制。
③宽度默认是容器（父级宽度）的100%。
④是一个容器及盒子，里面可以放行内或者块级元素。
注意：
文字类的元素内不能使用块级元素,如<p>标签，<h1>~<h6>标签
2.行内元素
常见的行内元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span> 标签是最典型的行内元素。有的地方也将行内元素称为内联元素。
行内元素行内元素的特点：
①相邻行内元素在一行上，一行可以显示多个。
②高、宽直接设置是无效的。
③默认宽度就是它本身内容的宽度。
④行内元素只能容纳文本或其他行内元素。
注意：
链接里面不能再放链接
特殊情况链接<a> 里面可以放块级元素，但是给<a> 转换一下块级模式最安全
3. 行内块元素
在行内元素中有几个特殊的标签——<img />、<input />、<td>，它们同时具有块元素和行内元素的特点。有些资料称它们为行内块元素。
行内块元素的特点：
①和相邻行内元素（行内块）在一行上，但是他们之间会有空白缝隙。一行可以显示多个（行内元素特点）。
②默认宽度就是它本身内容的宽度（行内元素特点）。
③高度，行高、外边距以及内边距都可以控制（块级元素特点）。
4. 元素显示模式转换
转换为块元素：display:block;
转换为行内元素：display:inline;
转换为行内块：display: inline-block;
选择器
选择器分为基础选择器和复合选择器两个大类
基础选择器
基础选择器是由单个选择器组成的。
包括：标签选择器、类选择器、id 选择器和通配符选择器
1. 标签选择器
标签选择器：用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS 样式。
优点：能快速为页面中同类型的标签统一设置样式。
缺点：不能设计差异化样式，只能选择全部的当前标签。
2. 类选择器
要差异化选择不同的标签，单独选一个或者某几个标签，可以使用类选择器。
类选择器在HTML 中以class属性表示，在CSS 中，类选择器以一个点“.”号显示。
①类选择器使用“.”（英文点号）进行标识，后面紧跟类名（自定义，我们自己命名的）。
②可以理解为给这个标签起了一个名字，来表示。
③长名称或词组可以使用中横线来为选择器命名。
④不要使用纯数字、中文等命名，尽量使用英文字母来表示。
(1)在标签class 属性中写多个类名
(2)多个类名中间必须用空格分开
(3)这个标签就可以分别具有这些类名的样式
样式点定义，结构类调用。一个或多个，开发最常用。
3. id选择器
id 选择器可以为标有特定id 的HTML 元素指定特定的样式。
HTML 元素以id 属性来设置id 选择器，CSS 中id 选择器以“#" 来定义。
id 属性只能在每个HTML 文档中出现一次
样式#定义,结构id调用, 只能调用一次, 别人切勿使用.
优先级：id选择器 > 类选择器 > 标签选择器
复合选择器
复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的
1. 后代选择器
后代选择器又称为包含选择器，当标签发生嵌套时，内层标签就成为外层标签的后代。
写法：外层标签写在前面，内层标签写在后面，中间用空格隔开。对最后一个选择器的内容起作用
2. 子选择器
子选择器只能选择作为某元素的最近一级子元素。简单理解就是选亲儿子元素.
中间用大于号（>)隔开，大于号旁边可以有空格。对最后一个选择器的内容起作用
3. 相邻兄弟选择器
相邻兄弟选择器选择是同级元素，且两个元素是相邻的，拥有相同的父元素
使用加号（+）作为相邻兄弟结合符，结合符旁边可以有空格。对最后一个选择器的内容起作用
4. 通用兄弟选择器
通用兄弟选择器用来选择某个元素之后的所有兄弟元素
中间用波浪号（~）隔开，波浪号旁边可以有空格。对最后一个选择器的内容起作用
5. 并集选择器
并集选择器可以选择多组标签, 同时为他们定义相同的样式。
中间英文逗号（,）隔开
<head> <style type="text/css">/* 子选择器 */div ul {color: rgb(59, 245, 8);}/* 后代选择器 */div>ol {color: #00f2ff;}/* 相邻兄弟选择器 */div + p {color:rgb(226, 43, 226);}p + p + p {background-color: #f7fb76;}/* 通用兄弟选择器 */div ~ h3 ~ p {color:rgb(28, 0, 207);}/* 并集选择器 */h3,h4{color:#ff0000;}</style></head><body><div>盒子1</div><p>段落1</p><p>段落2</p><p>段落3</p><h3>标题3</h3><p>段落4</p><h4>标题4</h4><p>段落5</p><div><ol><li>列表项1</li><li>列表项2</li><li><ul><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul></li></ol></div>
</body>
6. 伪类选择器
伪类选择器用于向特定元素添加特殊状态的样式的一种选择器。它们用一个冒号（:）表示。
| 伪类名 | 描述 |
|---|---|
:hover | 用于鼠标悬停在元素上时的状态。 |
:active | 用于元素被激活（如点击）时的状态 |
:focus | 用于元素获得焦点时的状态，常用于表单元素。 |
:disabled | 用于禁用的表单元素 |
:checked | 用于被选中的 radio 或 checkbox 元素 |
|
| 用于选择某个元素的第一个或最后一个子元素 |
:nth-child() | 用于选择某个元素的特定序号的子元素 |
:not() | 用于排除某些元素 |
|
| 用于选择元素的第一行或第一个字母 |
::selection | 用于用户选中的文本 |
通配符选择器
通配符选择器也称全局选择器，其作用是定义网页中所有标记元素都使用同一种样式，用“ * ”表示。
CSS 的三大特性
1. 层叠性
样式冲突，遵循的原则是就近原则，哪个样式离结构近，就执行哪个样式
样式不冲突，不会层叠
2. 继承性
子标签会继承父标签的某些样式，如（text-，font-，line-这些元素开头的可以继承，以及color属性）
行高的继承性：
body {font:12px/1.5 Microsoft YaHei；
}行高可以跟单位也可以不跟单位
如果子元素没有设置行高，则会继承父元素的行高，即当前子元素的文字大小* 1.5
3. 优先级
当同一个元素指定多个选择器，就会有优先级的产生。
选择器相同，则执行层叠性
选择器不同，则根据选择器权重执行
| 选择器 | 权重 |
|---|---|
| 继承 或 * | 0，0，0，0 |
| 元素选择器 | 0，0，0，1 |
| 类选择器，伪类选择器 | 0，0，1，0 |
| ID选择器 | 0，1，0，0 |
| 行内样式 style="" | 1，0，0，0 |
| ！important 重要的 | 无穷大 |
权重是有4组数字组成,但是不会有进位。可以理解为类选择器永远大于元素选择器, id选择器永远大于类选择器,以此类推..
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0。
权重叠加：如果是复合选择器，则会有权重叠加，需要计算权重。