HTML
CSS的作用
一、
1、以统一的方式实现样式的定义
2、提高页面样式的可重用性和可维护性
3、实现了内容（HTML）和表示（CSS）的分离
HTML和CSS之间的关系
HTML：构建网页的结构
CSS ：构建HTML元素的样式
CSS的使用
- 1.内联样式 将样式声明在元素的style属性中
<p style="color;red（样式声明）">1</p>
1
样式声明 表示一个具体的显示效果，可以多个同时存在的，多个样式之间用 ； 进行隔开
每个样式声明都有两部分组成
color： 样式属性
red ： 属性值
2.内部样式表
1.在head里面加上一个 style标签
2.在style中添加任意多的样式
p{
样式声明；
}
选择器：规范了页面中哪些元素能够使用定义好的样式
1.
3.外部样式表
1.创建一个单独的样式表文件保存样式规则
在css文件夹下新建一个CSS文件 并在里面添加好样式
2.在需要使用得页面上添加 link 标签 进行引入
4.引入方式的优先级
就近原则 谁离这个标签进 最后就是谁的样式
“`
CSS样式表的特征
-
1、继承性
子级标签可以直接使用父级元素声明好的样式 （大部分的CSS样式是可以被继承）
2.层叠性
可以同时写多个样式
3.优先级
低： 浏览器的缺省值
中： 就近原则
高： 内联样式
4.！improtant规则
作用： 强制调整优先级 （一定是最后显示的）
打破了优先级规则
基础选择器
-
作用： 规范了页面中哪些元素能够使用定义好的样式
目的： 匹配页面元素（找到页面的元素）
1.通用选择器
作用：匹配页面中的所有元素
用法：*{}2.标签选择器
作用：匹配当前所有这一类的标签
用法 p{}3.类选择器
作用：由css定义好，可以被任意标记的class属性值进行引用的选择器
语法：
1.在标签内 加上class属性
2.在样式表中 .类名{} 进行引入
注意： 类名或者ID名 不能以数字开头
除了 _ -以外不能有其他的特殊字符4.ID选择器
作用：针对指定ID值的元素去定义样式
语法： 1.在标签内加上ID属性
2.在样式表中 使用 #ID名{} 进行引入优先级： id > class > p（标签）> *
权值;
标签选择器： 0,0,0,1
类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式 1,0,0,0
选择器的权值加到一起，大的优先；如果权值相同，后定义的优先**
复杂的选择器
-
1.群组选择器
作用：选择器声明式以 ， 分割 的选择器列表
2.后代选择器
后代： 只要是具备层级关系的元素
使用空格 隔开
3.子代选择器
子代：只具备一级层级的关系的元素
使用 > 隔开
尺寸属性
-
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 自动 内容溢出的时候会出现但是没有溢出的时候不出现
边框阴影
属性： box-shadow
h-shadow ：水平位置
v-shadow ：垂直位置
blur ：模糊距离
spread ：阴影尺寸
color ：颜色
inset ：将外阴影变成内阴影
样式汇总：
color：red 字体颜色
font-size 字体大小
font-family: 字体样式
background-color 背景颜色
width：宽度
height： 高度
font-family 字体的种类
font-size 字号
color 字体的颜色
font-weight 字体的粗细