CSS基本知识

CSS初识

CSS又名层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。
如果说HTML¹是房子的框架，那么CSS就是房子的装修

CSS的作用

1. 以统一的方式实现样式的定义

2. 提高页面样式的可重用性和可维护性

3. 实现了内容（HTML）和表示（CSS）的分离

   HTML和CSS之间有什么关系？

   HTML：构建网页的结构
   CSS ：构建HTML元素的样式
   

字体样式汇总

	color：red  字体颜色
	font-size   字体大小
	font-family:字体样式
	background-color  背景颜色
	width：宽度
	height： 高度

CSS的使用

1. 内联样式
   将样式声明在元素的style属性中

		<p style="color;red（样式声明）">1</p>

样式声明: 表示一个具体的显示效果，可以多个同时存在的，多个样式之间用 ； 进行隔开
每个样式声明都有两部分组成

		color：  样式属性
		red  ：  属性值

2. 内部样式表
   1.在head里面加上一个 style标签
   2.在style中添加任意多的样式
   p{
   样式声明；
   }
   选择器：规范了页面中哪些元素能够使用定义好的样式

3. 外部样式表
   1.创建一个单独的样式表文件保存样式规则
   在css文件夹下新建一个CSS文件 并在里面添加好样式
   2.在需要使用得页面上添加 link 标签 进行引入

引入方式的优先级: 就近原则 谁离这个标签进 最后就是谁的样式

CSS样式表的特征

1. 继承性
   子级标签可以直接使用父级元素声明好的样式 （大部分的CSS样式是可以被继承）
2. 层叠性
   可以同时写多个样式
3. 优先级
   低： 浏览器的缺省值
   中： 就近原则
   高： 内联样式

！improtant规则
作用： 强制调整优先级 （一定是最后显示的）
打破了优先级

CSS基础选择器

作用： 规范了页面中哪些元素能够使用定义好的样式
目的： 匹配页面元素（找到页面的元素）

1. 通用选择器
   作用：匹配页面中的所有元素
   用法：*{}

2. 标签选择器
   作用：匹配当前所有这一类的标签
   用法 p{}

3. 类选择器
   作用：由css定义好，可以被任意标记的class属性值进行引用的选择器
   语法：
     1.在标签内 加上class属性
     2.在样式表中 .类名{} 进行引入
    注意： 类名或者ID名 不能以数字开头
     除了 _ -以外不能有其他的特殊字符

   代码示例见下方复杂选择器👇

复杂的选择器

1. 群组选择器
   作用：选择器声明式以 ， 分割 的选择器列表
2. 后代选择器
   后代： 只要是具备层级关系的元素
   使用空格 隔开
3. 子代选择器
   子代：只具备一级层级的关系的元素
   使用 > 隔开

代码示例：

		<p class="p1">我是p1</p>
		<p class="p1" id="p2">我是p2</p>
		<p>我是p3</p>
		<table>
			<tr>
				<td>我是td</td>
			</tr>
		</table>

			<style type="text/css">
			/*通配符*/
			*{
				color: red;
				font-size: 100px;
			}
			/*id*/
			#p2{
				color: yellow;
			}
			/*类*/
			.p1{
				color: green;
			}
			/*标签*/
			p{
				color: black;
			}*/
			/*群组*/
			#p2,p,.p1,td{
				color: brown;	
			}
			/*后代*/
			table tr td{
				color: aquamarine;
			}
			/*子代*/
			table>tr>td{
				color: plum;
			}
		</style>

尺寸属性

1. 作用：用户设置元素的宽度和高度 单位为px 百分比
2. 宽度属性和高度属性
   width height 设置元素的宽高
   max-width max-height 最大的宽度 和 最大的高度
   min-width min-height 最小的宽度 和 最小的高度
3. 允许被修改高度和宽度的元素
   1.块级元素允许被设置宽高
   2.行内块大部分允许被设置宽高的 例如 表单控件 单选和复选 是不能修改尺寸
   3.存在width和height属性的元素 可以设置宽高的样式 img table
4. 溢出
   使用尺寸属性限制元素大小的时候，如果内容所需要的空间太小大于元素本身，会导致溢出效果
   属性：
   overflow
   visible：默认的效果 溢出可见
   hidden： 隐藏 溢出的时候隐藏
   scroll 滚动 当元素溢出的时候会出现滚动条 溢出时滚动条可用
   auto 自动 内容溢出的时候会出现但是没有溢出的时候不出现
   示例代码：

			.div {
				max-height: 600px;
				max-width: 600px;
				min-height: 200px;
				min-width: 200px;
				background-color: paleturquoise;
				width: 500px;
				height: 500px;
				overflow: auto;
				/*overflow: hidden;*/
				/*overflow: scroll;*/
				/*overflow: visible;*/
			}		

此为自动样式

边框阴影

	属性：  box-shadow
	h-shadow  ：水平位置
	v-shadow  ：垂直位置
	blur      ：模糊距离
	spread    ：阴影尺寸
	color     ：颜色
	inset     ：将外阴影变成内阴影

			div1{
				width: 500px;
				height: 500px;
				 background-color:burlywood;
				box-shadow: 5px 5px 5px 5px brown;
				margin: 0 auto;
			}

实现样式

总结

1. ！improtant规则轻易不要使用，因为这个规则打破了优先级规则，可能影响后期对网页的维护

2. id选择器在css里面尽量不要使用，因为在页面中只能有一个独一无二的id，所以css样式无法重用 ，加重编程负担，优先使用class类选择器，ID选择器可以在js中使用，如果在css中同时使用可能产生某些不可描述的错误

---

1. HTML ↩︎