CSS

CSS

• Casecading 层叠 Style样式 Sheet表，作用：美化页面

CSS的引入方式

• 有三种引入方式：

1. 内联样式： 在标签的style属性中添加样式代码，不能复用

    <h1 style="color: red">内联样式</h1>
   

2. 内部样式： 在head标签里面添加style标签，在标签体内通过选择器给元素添加样式， 好处：是可以在当前页面复用， 坏处：只能在当前页面复用

3. 外部样式： 在单独的css文件中添加样式代码，然后通过link标签把css文件引入，好处：可以多页面复用

引入方式的优先级： 内联优先级最高，内部和外部相同后执行覆盖先执行的(看link和style标签的前后顺序)

选择器

1. 标签名选择器

• 匹配指定标签名称的所有标签
• 格式： 标签名{样式代码}

2. id选择器

• 匹配指定id的某一个元素
• 格式： #id{}

3. 类选择器

• 匹配指定class的某一类元素
• 格式： .class{}

4. 分组选择器

• 将多个选择器合并成一个选择器
• 格式： div,#abc,.c1{}

5. 属性选择器

• 通过属性的名称和值去选择匹配的元素
• 格式： div[属性名=‘值’]
      或： [属性名=‘值’]
      或： [属性名=“值”]

6. 子孙后代选择器

• 格式： div div span{}
• div里面的div里面的所有span

7. 子元素选择器

• 格式： div>div>span{}
• div里面的div里面的子元素span

8. 伪类选择器

• 用于选择元素的状态： 未访问link 访问过visited 悬停hover 点击active
• 格式：a：link{}

9. 任意元素选择器

• 选中页面中所有的元素
• 格式： *{}

颜色的赋值方式

• 三原色：红绿蓝 red green blue 每个颜色的取值0-255

1. 颜色单词 red
2. 6位16进制赋值 #ff0000 （用的最多）
3. 3位16进制赋值 #f00
4. 3位10进制赋值 rgb(255,0,0)
5. 4位10进制赋值 rgba(255,0,0,1) a=alpha透明度取值0-1 值越小越透明

背景图片

	/* 设置背景图片 */ 
	background-image: url("../imgs/1.jpg");
	/* 背景图片宽高 */
	background-size:100px 100px;
	/* 禁止重复 */
	background-repeat: no-repeat;
	/* 控制位置 left/right/top/bottom/center 
		通过百分比控制位置  */
	background-position: 90% 90%;

布局相关样式（盒子模型）

• 盒子模型： 宽高+外边距+边框+内边距

宽高

• width、height：赋值方式两种： 1. 像素 2. 上级元素百分比
• 行内元素不能修改宽高，由内容决定

外边距

• 什么是外边距：元素距上级元素或相邻兄弟元素的距离称为外边距
• 赋值方式：

		/* 单独给某一个方向添加外边距 
		margin-left/top/right/bottom*/
		/* margin-top: 50px;
		margin-left: 30px;
		margin-bottom: 20px; */
		/* margin: 50px; */ /* 四个方向全是50 */
		/* margin: 20px 40px; */ /* 上下20 左右40 */
		/* margin: 0 auto; *//* 水平居中  */
		/* margin: 10px 20px 30px 40px; */ /* 上右下左 顺时针 */

• 块级元素上下相邻 同时添加下外边距和上外边距 取最大值， 行内元素左右相邻，同时添加左外和右外 相加

两个元素之间的外边距：上下相邻取最大 左右相邻相加

• 行内元素上下外边距无效
• 当元素的上边缘和上级元素上边缘重叠时，给元素添加上外边距， 会出现粘连问题，给上级元素添加overflow：hidden 解决

边框

• border: 边框粗细 边框样式 颜色;
• border-left/right/bottom/top:边框粗细 边框样式 颜色;
  border: 1px solid black;
• 行内元素边框全部生效，影响元素所占宽度 但不影响元素所占高度

内边距

• 什么是内边距：元素边框距内容的距离
• 给元素添加内边距会影响元素的宽高

元素的实际宽高是定义的宽高加内边距

• 如果移动的是元素的子元素则给子元素添加外边距，如果移动的是元素的文本内容则只能使用内边距
• 行内元素内边距全部生效，影响元素所占宽度 但不影响元素所占高度

设置的宽高默认状态只是内容的宽高，若给它加了边框、内外边距，整个盒子占位都会增大，有时候会出现超出我们预设的情况，加一句box-sizing:border-box;可以固定整个盒子模型的宽高，调整内外边距和边框盒子整体大小不会变化。

特殊的行内元素

1. 宽高：不能修改宽高
2. 外边距： 上下无效
3. 边框：不影响所占高度
4. 内边距：不影响元素所占高度

文本相关

1. 文本水平对齐方式
   text-align: left/right/center
2. 文本修饰
   text-decoration:overline/underline/line-through/none
3. 文本颜色
   color:red;
4. 文本阴影
   text-shadow: 颜色 x偏移值 y偏移值 浓度（值越大越模糊）
5. 行高
   line-height:30px;

字体相关

	/* 字体大小 */
	font-size: 30px;
	/* 字体加粗 */ 
	font-weight: bold/normal;
	/* 斜体 */ 
	font-style: italic;
	/* 字体设置 */
	font-family: "黑体";

CSS的三大特性

1. 继承性： 元素可以继承上级元素的文本和字体相关的样式，个别标签自身特有的样式不受继承影响如：超链接a标签的字体颜色、h1-h6的字体大小。
2. 层叠性： 当不同选择器选择到同一个元素的时候，如果作用的样式不同则所有样式全部层叠到一起（全部生效），如果作用的样式相同则由优先级决定
3. 优先级：作用范围越小 优先级越高， id>class>标签名>继承(间接选中)

元素的显示方式display

• block: 块级元素默认的显示方式， 可以修改宽高
• inline: 行内元素默认的显示方式， 可以共占一行 ，不可以修改高度，上下外边距无效
• inline-block: 行内块 ，可以修改宽高也可以共占一行

行内元素垂直对齐方式vertical-align

• 上对齐 vertical-align：top
• 下对齐 vertical-align： bottom
• 中间对齐 vertical-align：middle
• 基线对齐 vertical-align：baseline（默认）