CSS基础（一）

1、CSS 是什么

即层叠样式表，HTML负责结构，而CSS则美化HTML，添加各种样式如：宽高间隔、大小颜色、动画及其他装饰效果

2、引入方式

引入方式共有三种：

行内样式：写在标签元素里面，以 style="" 形式，优先级最高（不推荐，显得太过于复杂）
内联样式：写在 <style></style> 这对标签中，样式少的话直接写在这里
外联样式：写在.css文件中，然后用 <link src=""> 引入样式（推荐，不过还有@import）

link 与 @import 移入方法的区别：
1、加载子资源的限制
link是XHTML的标签，处理加载CSS文件外，还可以加载RSS等其他事物，如加载模板
而 @import 只能加载css文件
2、加载方式
link 引入css文件，在页面载入时同时加载，即同步加载
@import 引用css文件，需要等到页面完全载入后，再加载css文件，即异步加载
3、兼容性
link 是XTHML 的标签，没有兼容问题
@import 是在css2.1 中提出来的，不支持低版本的浏览器
4、改变样式
link标签是DOM元素，支持使用JS控制DOM和修改样式
@import 是方法，不支持控制DOM和修改样式

3、CSS选择器

CSS选择器分为简单选择器和复合选择器

CSS选择器(1).png

简单选择器

简单选择器一般包含： 标签选择器、类选择器、id选择器、通配符选择器

标签选择器：就是以 div、span、p等标签作为选择器
类选择器：.colorRed {}，为标签添加该类就可以添加该样式
id选择器：#colorRed {} ，拥有该id样式的那个标签就拥有该样式（唯一）
通配符选择器：* {}，作用范围是整个页面，一般用作CSS初始化

注意：

类选择器可以用在不同的标签上；类名就像人的名字，可以多人使用同一个名字，所以类选择器可以用在多个标签
id选择器一般用在唯一性的标签；id 就像人的身份证号，每一个人都有一个唯一的身份证号，所以每一个标签的id也是唯一的，所以一个id选择器只用在一个标签

所以，类选择器和id选择器最大的区别是使用次数

复合选择器

复合选择器是建立在简单选择器的基础之上的，它是由两个或两个以上的选择器组合而成的

1、后代选择器

ul li { ... }

两个元素以空格隔开，意思是ul标签中的所有li标签
第二个可以是儿子元素，也可以是孙子元素，只要是在ul中的就行
可以层层嵌套，多个简单选择器

2、子选择器

div > p { ... }

选择离div最近的一级子元素p，孙子元素p 甚至更远的都不选中
注意：p 必须是亲儿子

3、并集选择器

p, a { ... }

所谓并集就是两个并列的，即p 和 a 都添加该样式
两个标签之间用逗号(,)隔开，可以理解为 和

4、伪类选择器

伪类选择器就是向某个选择器添加特殊的效果，其格式就是选择器后面加上冒号(:)

链接伪类选择器

a:link { ... }      /* 选择所有未被访问的链接 */
a:visited { ... }   /* 选择所有已被访问的链接 */
a:hover { ... }     /* 选择鼠标指针位于其上的链接 */
a:active { ... }    /* 选择活动链接(鼠标按下未弹起的链接) */

focus 伪类选择器

该选择器用于获取焦点的表单元素，一般情况下也是用于表单元素

/* 表单获取焦点时 修改颜色 */
input:focus { color:blue }

用得比较少

权重

CSS中优先级如下：

!important > 内联样式style > id (权重100) > class（权重10） > 标签（权重1）

4、字体、文本属性

字体、文本属性.png

字体样式

1、font-family：定义文本的字体系列

常见的字体系列：

`body {font-family: Arial, 'Microsoft YaHei', Tahoma, 'Hiragino Sans GB';}`

2、font-size：字体大小

px 像素是我们最常用的单位，还有 em、rem
1. em：相对容器字体大小，且会继承父元素的字体大小
2. rem：相对于根元素（通常是HTML元素）字体的大小
谷歌浏览器默认是 16px

3、font-weight：字体粗细

/* 粗体 */
p { 
    font-weight: bold 
}

默认值：normal，等同于 400
粗体：bold，等同于 700

推荐用数字，并且数字不加单位

4、font-style：文字样式

p { 
    font-size: normal 
}

normal：默认值，浏览器会显示标准的字样
italic：显示斜体

这个平时用得较少，反而要给斜体标签（em、i）改为不倾斜

5、font：字体复合属性

p { 
    font: font-style font-size font-weight font-family;
}

注意：不能更换顺序

文本属性

1、文本颜色

color：定义文本颜色

p {
    color: red;    
}

颜色属性值表示方式：

预定义的颜色值：red、blue 等
十六进制：#333333、#ffffff 等
RGB：rgb(255, 0, 0)

2、对齐文本

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

div {
    text-align: center;
}

left：左对齐
right：右对齐
center：居中对齐

3、装饰文本

text-decration：添加到文本的修饰，如：上划线、下划线、删除线

a {
    text-decration: none        
}

none：默认值，即没有装饰线
underline：下划线，链接a会自带下划线
overline：上划线
line-through：删除线

常用 text-decration: none 去除链接的自带的下划线

4、文本缩进

text-indent：用于指定文本第一行缩进，常用于段首

p {
    text-indent: 32px;
}

默认一个字是16px，缩进两个字就是32px
也可以使用 2em，相对缩进

5、行间距

line-height：用于设置行高

p { line-height: normal }
p { line-height: 26px }
p { line-height: 1.5 }
p { line-height: 1.5em }
p { line-height: 150% }

normal：默认值
26px：字体高为16px，那么行距就是10，上下各5px
数字：行高就是 数字 * 字体大小，所以1.5就是 29px
em：浏览器字体默认是16px，那么1.5em就是29px
百分比：百分比 * 字体大小

推荐使用数字型的

5、CSS 显示模式

1、块元素

<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li> 等

特点：

自己独占一行
大小、内外边距可以随便改
宽度默认是父级容器的100%
块元素里面可以放块级元素或行内元素

注意：

段落标签<p>比较特殊，它是用来放文字，里面不能放块级元素，特别是div
<h1> ~ <h6> 也是

/* 将元素转换为块级元素 */
span { display: block }

2、行内元素

常见的行内元素有 <span> 、<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>等，

有的地方也称为 内联元素

特点：

相邻行内标签在一行上显示，一行可以显示多个
宽高设置无效，默认宽度是它本身内容的宽度
行内元素只能容纳文本或者其它行内元素

注意：

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

/* 将元素转换为行内元素 */
div { display: inline }

3、行内块元素

行内块元素就那么几个： <img>、<input>、<button>、<td> ，它同时具有行内元素和块级元素一些特性

<img> 是一个行内块元素

特点：

相邻元素在一行显示，一行显示多个行内块元素，但是它们之间没有缝隙（行内元素特点）
默认宽度就是它本身内容的宽度（行内元素特点）
宽高、内外边距都是可以修改的

总的来说，行内块元素就是一行可以容纳多个元素，而这些元素又可以修改宽高

/* 将元素转换为行内块元素 */
ul li {
    display: inline-block;
}

6、盒子模型

盒子模型.png

CSS 盒子模型本质上是一个盒子，包括边框、外边距、内边距和实例内容

盒子的实际大小是由外边距、内边距、内容决定的

即 盒子大小 = 边框 + 内边距 + 实际内容

1、边框

border-width：边框粗细，单位为px
border-style：边框样式
1. solid：实线边框，最常用
2. dashed：虚线边框
3. dotted：点线边框
border-color：边框颜色

我们一般都是简写：

border : 2px solid red;

顺序不可以更改
也可以单独设置上下、左右边框

还可以设置边框圆角

border-redius: length

length：可以是 数值 + px ，或者是百分比
还可以单独设置某个圆角，如上左角：border-top-left-radius

2、外边距

外边距即盒子与盒子之间的外部距离，可以单独设置上下左右外边距，也可以简写：

/* 分别设置上下左右外边距 */
margin: top right bottom left

/* 设置 上、左右、下 */
margin: top left-right bottom

/* 设置上下、左右外边距 */
margin: top-bottom left-right;

外边距典型的应用：设置元素居中显示
前提：该元素必须设置width
margin: 0 auto：上下为0，左右居中

3、内边距

内边距即盒子的内部距离，可以单独设置上下左右内边距，也可以简写：

/* 分别设置上下左右外边距 */
padding: top right bottom left

/* 设置 上、左右、下 */
padding: top left-right bottom

/* 设置上下、左右外边距 */
padding: top-bottom left-right;

注意：设置内边距会撑大盒子

4、外边距合并

对于两个嵌套关系（父子关系）的块元素，它们有各自的上外边距，但是这两个嵌套的元素的其外边距时合并的，当任意一个的margin改变，另一个会随着改变

#a {
    width: 300px;
    height: 100px;
    background-color: red;
    overflow: hidden
    /* border-top: 1px solid #fff; */
    /* padding-top: 1px; */
}

#b {
    width: 200px;
    height: 300px;
    background-color: blue;
    margin: 100px;
}

<div id="a">
    <div id="b"></div>
</div>

解决方法：

为父元素定义上边距
为父元素定义上内边距
为父元素添加 overflow: hidden;

7、CSS 三大特性

CSS有三大特性：层叠性、继承性、优先性

7.1 层叠性

当出现相同选择器给相同的属性设置不同属性值时，就会出现冲突，而层叠性就是为了解决这种冲突的

如果样式冲突，就会采取就近原则，哪个写在后面，就执行哪个样式

div {
    color: red;
}

div {
    color: pink;
}

像这样会执行后面那个，也就是粉红色

7.2 继承性

继承性就是子标签会继承父标签的某些样式

可继承：text-、font-、line- 这些元素开头的，还有color
不可继承：border、padding、margin、width、height

总的来说，跟字体相关的样式通常可以继承，与尺寸大小相关的样式通常不可继承

7.3 优先性

当同一个元素指定多个选择器的时候，通常会有优先级的产生

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

!important > style（内联）> Id（权重100）> 类、伪类、属性选择器（权重10）> 属性、标签选择器（权重1）