CSS基础（一）

1、CSS 是什么

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

2、引入方式

引入方式共有三种：

1. 行内样式：写在标签元素里面，以 style="" 形式，优先级最高（不推荐，显得太过于复杂）
2. 内联样式：写在 <style></style> 这对标签中，样式少的话直接写在这里
3. 外联样式：写在.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选择器分为简单选择器和复合选择器

简单选择器

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

1. 标签选择器：就是以 div、span、p等标签作为选择器
2. 类选择器：.colorRed {}，为标签添加该类就可以添加该样式
3. id选择器：#colorRed {} ，拥有该id样式的那个标签就拥有该样式（唯一）
4. 通配符选择器：* {}，作用范围是整个页面，一般用作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、字体、文本属性

字体样式

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> 等

特点：

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

注意：

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

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

2、行内元素

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

有的地方也称为 内联元素

特点：

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

注意：

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

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

3、行内块元素

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

<img> 是一个行内块元素

特点：

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

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

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

6、盒子模型

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）