CSS样式

一、CSS 样式

1、内部样式表（内嵌样式表）

是写到html页面内部，是将所有css代码抽出，单独放到一个<style>标签中

<style>
	div {
		color:red;
		font-size:12px;
		}
</style>

• style标签理论上可以放在html文档任何地方，但一般会放文档的head标签中
• 这种方式可以方便控制当前这个页面中的元素样式设置
• 代码结构清晰，但没有实现结构与样式完全分离
• 使用内部样式表设定css，通常也被称为嵌入式引入，练习时常用

2、行内样式表（内联样式表）

在元素标签内部的style属性中设定css样式，适合修改简单样式

<div style="color:red;font-size:12px">白茶清欢无别事</div>

• style其实就是标签属性
• 在双引号中间，写法一复合css规范
• 可控制当前标签设置样式
• 书写繁琐，没有体现结构与样式相分离的思想，不推荐大量使用，只有对当前元素添加简单样式时考虑使用
• 使用行内样式表设定css，通常被称为行内式引入

3、外部样式表

二、CSS 特性

1、基础特性

① 统一性

统一的样式属性设置html样式

1. CSS将所有元素将所有的元素都添加了一个 style 属性，以后与样式（表现形式）相关的所有内容全部找style 属性，它可以一次性设置好
2. 在这个 style 属性里面，它有统一的属性名和属性值，针对所有的元素都可以进行设置，这样就避免了之前在HTML里面，某些元素无法设置样式的问题

② 便捷性

CSS操作起来非常方便。CSS提供了大量的选择器，这些选择器可以批量的或单个的选中页面上面的元素，然后进行相应的样式操作。

③ 分离性

在网页里面，我们的结构代码是HTML，样式代码是CSS，它们两个应该可以进行相互分离。而在之前的HTML里面它是通过标签来完成的，它们的代码是不可侵害的，当我们把CSS样式单独分离出来以后，其实可以实现一个CSS样式控制多个页面，这样极大的简化了我们的工作量。

<link href="./css/login.css" rel="stylesheet" type="text/css">

• href 指的是链接CSS的地址

• rel 指的是引用类型为样式表

• type 指的是文件类型是CSS文件

  也可以通过命令来进行导入

<style type="text/css">
	@import url("./css/login.css");
</style>

2、高特特性

① 层叠性

是一个元素的样式应该是通过不同的设置堆叠起来的，它可以像搭积木一样，不停的去堆叠。

相同选择器给设置相同样式，此时一个样式就会覆盖（层叠）另一个冲突的样式，层叠性主要解决样式冲突问题。

原则

1. 样式冲突，遵循的原则是就近原则，哪个样式离结构近就执行哪个样式
2. 样式不冲突，不会层叠

② 继承性

当我们在父级元素上面设置一个样式以后，子级元素同样会应用到这个样式。

子标签会继承父标签的某些样式，如文本颜色和字号。

CSS里面上面的元素是可以被默认的继承下来的，但是如果想主动的去继承，也是可以的，只要在当前的属性值上面设置 inherit。

• 恰当的使用继承可以简化代码，降低css样式的复杂性
• 子元素可以继承甫一上市样式（text-，font-，line-这些元素开头的可以继承，以及color属性
• 不能继承的属性有

<style>
/*
	background-
display/position/float/border/margin/padding/width/height
*/
</style>

③ 行高的继承性

<style>
	body {
		font-size:12px;
		font-family:1.5 Microsoft TaHei;
	}
</style>

• 很高可以跟单位也可以不跟单位
• 如果子元素没有设置行高，则会继承父元素的行高为1.5
• 此时子元素的行高是：当前子元素的文字大小*1.5
• body行高1.5 这样写法最大优势就是里面子元素可以根据自己的文字大小自动调整行高

<style>
	body{
		color: pink;
		/* font:12px/24px 'Microsoft TaHei'; */
		font:12px/1.5 'Microsoft TaHei';
		}
	div{
		/* 子元素继承了父元素body的行高1.5
		这个1.5就是当前元素文字大小 font-size 的1.5倍
		所以当前div的行规就是21像素 */
		font-size:14px;
	}
</style>

④ 优先级

• 第一部分：层叠的优先级
  继承样式<默认样式<(内部样式块/外部样式表)<行内样式(style属性里的样式)
• 第二部分：选择器的优先级
  选择器的优先级遵守一个公式的计算，去得到当前选择器的权重值，谁的值大，就听谁的

优先级权重相同的选择器里面，我们采用后面的覆盖前面的原则。
在上面的优先级权重里面，权重值不可以实现进位，也就是11个标签选择器权重相加也不可能大于class选择器，

权重叠加：复合选择器会有权重叠加，需要计算权重

注意：

1. 权重是有四组数字组成，不会有进位
2. 类选择器永远大于元素选择器，id选择器永远大于类选择器
3. 等级判断从左向右，如某位数字相同，则判断下一位
4. 通配符和继承权重为0，标签选择器为1，类（伪类）选择器为10，id选择器100，行内样式1000，！important无穷大
5. 继承权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素得到的权重都是0
6. a链接浏览器默认制定了一个样式

3、元素显示模式

作用：网页标签非常多，不同地方会用到不同类型的标签，了解它们的特点可以更好的布局我们的网页。

元素显示模式就是元素（标签）以什么方式进行显示，如：

元素分为块元素和行内元素两种类型

① 块元素

常见块元素h1-h6，p，div，ul，ol，li，其中div是典型的块级元素

特点：

1. 独占一行
2. 宽高、内外边距可以控制
3. 宽度默认是容器（父级宽度）的100%，高度默认为0，同
   时高度也可以由里面的容来撑开
4. 是一个容器及盒子，里面可以放行内元素或者块级元素
5. 块级元素自身如果需要居中可以在自身添加一个 margin:auto

注意：

• 文字类的元素内不能使用块级元素
• p标签主要用于存放文字，因此p里面不能放块级元素，特别是不能放div
• h1-h6都是文字类块级标签，里面也不能放其他块元素

② 行内元素

常见行内元素a、strong、b、em、i、del，s、ins、span，其中span是典型的行内元素，也称内联元素

特点：

1. 心灵行内元素在一行，一行可以显示多个
2. 宽高设置无效
3. 默认宽度是内容本身宽度
4. 只能容纳文本或其他行内元素
5. 行内元素如果想要实现左右居中则必须在外层的块级元素或行内块级元素上面设置 text-align:center

注意:

• 链接里面不能再放链接
• 特殊情况链接a里面可以放块级元素，但是给a转换一下块级最安全
• 不能在行内元素自己上面设置 text-align:center ,这样是没有效果的
• 必须设置在外层元素上面
• 外层元素必须是块级元素或行内块级元素
• 行内元素如果在代码里面换行了，则会在页面上面呈现出一个空格位
• 行内元素不遵守标准的盒子模型规范，它没有margin-top与margin-bottom。但是它有marginleft与margin-right
• . padding-left/padding-right正常，padding-top与padding-bottom也有效果，也可以撑开自身，但是它撑不开外部的元素

③ 行内块级元素

它既具备块级元素的特征又具备行内元素的特征，img、input、td，同时具备块元素和行内元素特点

特点：

1. 和相邻行内元素（行内块）在一行上，但它们直接会有空白缝隙，一行可以显示多个
2. 默认宽度是内容本身宽度
3. 宽高，内外边距可以控制
4. 行内块级元素在代码里面换行了，页面上面也会呈现出一个空格位
5. 行内块级元素如果要实现左右居中，它遵守行内元素的标准，在外层的块级元素或行内块级元素上面去设置 text-align:center

④ 总结

⑤ 显示模式转换

一个模式的元素需要另外一种模式的特性
① 转换为块元素：display: block;
② 转换为行内元素：display: inline;
③ 转换为行内块：display: inline-block;