前端（四）

前端（四）

一、什么是CSS

CSS定义：CSS 层叠样式表，级联样式，简称才是样式表
实现了内容和表示的分离
CSS和HTML之间的关系
HTML是负责网页的结构
CSS 是负责构建HTML元素的样式
CSS作用：
1.以统一的方式实现样式的定义
2.提高页面样式的可重用性和可维护性

二、CSS的使用

1.内联样式（行内样式）

将样式声明在元素的style属性中
语法：
<p style=“color: red;”>
注意：所有的样式都必须在双引号之内并且中间用分号进行分隔

2.内部样式

将样式声明定义在页面的Style属性中
步骤：
1.在head标签里面添加一个style标签
2.在style中书写样式
语法：
<style type=“text/css”>
p{
/字体的颜色/
color: green;
/字体的大小/
font-size: 80px;
/文字的字体样式/
font-family: “华文彩云”;
}
</style>

3.外部样式表

步骤：创建一个新的CSS文件
创建和HTML文件的关联
书写样式
<link href=“css/style01.css” type=“text/css” rel=“stylesheet”/>

三、CSS样式表的特征

继承性:

1、子级元素可以直接使用父级元素声明好的样式（这里不是所有的样式都可以被继承）

层叠性:

一个匀速可以声明多个样式
注意：如果样式不冲突，多个样式规则中的样式可以层叠为一个。

优先级:

样式定义产生冲突时按照不同的样式使用“优先级”来应用样式
在们三种引入方式中谁的优先级最高（行内样式表）
低：浏览器缺省值
中：外部样式表或者内部样式表
高：内部样式表

！improtant

作用：显示调整样式的优先级
语法：属性名称： 值！improtant
注意： IE浏览器 8 以下 不支持的
破坏了优先级规则

四、CSS基础选择器

1.通用选择器

作用：匹配到页面中所有的元素
语法：*{样式1；样式2；}
优点：一个样式整个页面都可以被改变
缺点：效率低，尽可能的少用

2.标签选择器

作用：定义页面的某一个标签的默认样式
语法： 标签名{样式1；样式2}

3.类选择器

作用：由CSS定义好，可以被任意标记的Class属性值进行引用的选择器
语法： 1.在标签中添加 class属性 并且给他一个名字
2.在style中 用.类名{}方式进行样式编写
注意：类名：不能以数字开头，除了 _ , - 以外的特殊符号都不能使用

4.ID选择器

作用：针对指定id值得元素去定义样式
语法： 1.在元素中定义id属性
2.在style中用#id名进行样式编写
注意： id是唯一的
一定要对应页面某个元素的id值
class里面可以同时存在多个类名但是id不能存在多个id名
优先级 ID > 类 > 标签 > *

5.群组选择器

作用：选择器声明 以 ， 隔开的选择器列表
语法：
选择器1，选择器2，。。。。{样式1,；样式2}
ps：不同的选择器都可以被选中（都可以连着用）

6.后代选择器

后代：只要具备层级关系的元素，被嵌套的都可以称为后代元素
语法：
#div1 span{}
注意：中间用空格隔开，并且他们只能是父子级的关系

7.子代选择器

子代：只具备一级层级关系的子元素，被嵌套的（被包括的）称之为子代元素
语法 ： #div2 > span{}

8.伪类选择器

1.hover

9. 选择器的优先级

选择器的类型 权值
元素选择器 0,0,0,1
类选择器 0,0,1,0
伪类选择器 0,0,1,0
id选择器 0,1,0,0
内联样式 1,0,0,0
注意：选择器的权值加到一起 大的是优先 如果权值相同的话，后定义的优先

五、尺寸属性

作用：用户设置元素的宽度和高度 单位为 px（像素） 和 百分比%
宽度属性：
width：设置元素的宽度
min-width：设置最小的宽度
max-width：设置最大的宽度
高度属性：
height：设置元素的高度
min-height：设置元素最小的高度
max-height：设置元素的最大的高度
允许被改变高度和宽度的元素
1.块级元素时可以设置宽高的
2.大部分行内块元素时可以设置宽高的
input 单选多选框
3.存在width和height属性是可以设置宽高的
img table

溢出

使用尺寸属性限制元素的大小时，如果内容所需要的空间大小大于
元素本身，会导致溢出的效果
语法：overflow:
overflow-x: 处理横向溢出
overflow-y: 处理纵向溢出
溢出处理:
visible 默认效果 溢出可见
hidden 溢出隐藏
scroll 滚动，元素会出现滚动条当内容溢出的时候，滚动条可用
auto 自动（自适应） 内容溢出的时候会出现滚动条 没有溢出的时候是不出现的

边框阴影

属性: box-shadow
h-shadow 必须填的 阴影的水平偏移距离 正数的 右边 负数 左偏移
v-shadow 必须天的 垂直的偏移距离 + 下 - 上
blur 模糊距离 必须是正数
color 颜色
spread 阴影的大小
inset值 将默认的外阴影变成内阴影
轮廓:
作用： 绘制元素周围的一条线，位于边框外的
语法：
outline-width：*/
/outline-width: 10px;
outline-style: solid;
outline-color: yellow;
outline: none;/
outline: 1px solid red;

背景属性

1.背景颜色

background-color: #000000 英文单词 transparent（透明色）
注意：背景颜色会填充到元素的内容区域、内边距区域 和 边框区域
/背景颜色/
background-color: red;
/*背景图片
默认的效果平铺
* */
background-image: url(img/day04.jpg);
/*修改平铺
repeat:默认的平铺
repeat-x ：水平平铺
repeat-y：垂直平铺
no-repeat：不平铺
* */
background-repeat:repeat;
/*背景图片的尺寸
cover :覆盖 撑满整个元素
contain：将背景图片放大 直到背景图像的下边或者右边有一个边缘碰到我们的元素为止
value1 value2 单位是px
value% value% 采用当前元素的宽度和高度的百分比进行缩放
* * */
background-size: 50% 50%;
/*背景图片的固定
fixed: 背景固定
* */
background-attachment: scroll;

六、盒子模型

1.元素的分类

1、块级元素：独占一行，对宽高生效，如果不给宽度撑满整行，如果不给
高度随着内容的增长而增长
2、行内元素：可以多个标签存在一行，对宽高不生效完全依靠内容去撑起宽高
3、行内块元素： 结合了行内和块级元素的特点，不仅是可以设置宽高而且还可以多个标签
存在一行。
4、如果有需要的话 可以运用display进行强转
inline 行内元素
block 块级元素时可以设置宽高的
inline-block 行内块元素：
none 不显示

2.外边距 内边距 边框 内容

W3C标准的盒子模型中 元素在网页中所占的位置的实际宽度

**PS:**注意：

1.如果是两种相同优先级 为同一个元素 同一个属性设置 的话，是哪个写在代码靠后 最终就按那个的样式
2.交集选择器的优先级 所有优先级 加起来 运算 然后比较
3.并集的话 就是各算各的。