前端(四)
一、什么是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.并集的话 就是各算各的。