什么是CSS?
Cocasding Style Sheet 层叠样式表
作用:用于修饰HTML标签.
四种使用CSS的方式
外链式CSS方式
<link href="1.css" type="text/css" rel="stylesheet" />
导入式CSS方式
<style>
@import url('1.css');
此处可以继续书写其他的CSS样式;
</style>
嵌入式CSS样式
<style>
body{
background-color:cyan;
}
</style>
内联式CSS方式
<body style="background-color:green">
CSS导入方式优先级
采用就近原则，什么样式表离元素最近，优先使用这个样式表
优先采用内联式，嵌入式，外链式，哪个离元素近用哪个
在样式后面加 ！important则该样式为最终样式
CSS选择器的分类
HTML选择器 元素选择器
页面中的每个标签名称都可以作为CSS的一个选择器使用,使用该类选择器可以选中页面中所有的同名标签添加样式.
样式相同的标签可以用逗号分开
class选择器 类选择器
为需要添加样式的标签,添加class属性且同时指定相同的class名称,在书写CSS时,可以使用.和名称来选中所有具有该class属性的元素添加样式.
可以给同一个元素加上多个类选择器，中间用空格隔开
ID选择器
为需要添加样式的标签,添加id属性并且同时指定id名称(id名称必须全页面唯一),在书写CSS样式时,可以使用#和名称来选中该id的元素添加样式
组合选择器
如果多个选择器使用相同的CSS样式,那么我们可以吧他们的选择器放在一起,使用逗号分隔,设置一份CSS样式即可,这就是组合选择器.
关系选择器 后代选择器
在选定元素时,可以先选定当前元素的父元素或者其他外部元素,在选中制定名称的元素,这时候,除了当前父元素或者其他外部元素内的当前元素受影响之外,其他和当前元素同名的元素都不会受影响.
通用选择器
*表示选中所有元素.
一般配合关系选择器选中制定标签内部的所有标签
另外可以用来进行样式重置操作!
*{
margin:0;
padding:0;
list-style:none;
border:0
}
伪元素选择器 目前来说表示一个元素的不同的状态
伪元素选择器是针对一个元素的不同状态进行的设定.常见于a标签
a:link 设置默认连接状态
a:hover 设置鼠标经过连接的状态
a:active设置鼠标点击连接时的状态
a:visited设置访问过的连接的状态
其他元素基本都可以使用hover状态的样式设定,浏览器>=IE8
属性选择器
针对文本框的类型可以通过input[type=类型名]为相同类型的文本框添加样式
CSS的属性
字体属性
font-size 设置字体大小属性
值为长度单位.
font-style 设置字体的风格(是不是斜体)
normal正常字体 italic 斜体
font-weight 设置字体的粗细
normal 正常字体 bold 粗体 100正常 800粗
font-family 设置字体类型
字体名称值 可以设置多种字体,使用逗号分隔,浏览器会使用最先可以支持的字体,如果都不支持只能使用系统默认字体.
font-variant 设置是否为小型大写字母
normal 正常字体 small-caps 小型大写字母
color 设置字体的颜色
颜色值:
英文单词:
rgb模式:
hex模式: #F90表示#FF9900 必须三位变六位
font 综合字体属性设置 不用学
原因该属性有太为严苛的顺序条件,不便记忆和使用.
长度单位:
px 像素
% 百分比
em 一个汉字的大小
ex 一个英文x的大小
背景属性
background 背景综合属性 推荐使用
可以设置所有的背景样式,没有顺序要求
background-color 设置元素的背景颜色
值为颜色取值即可.
background-image 设置元素的背景图片
格式:background-image:url(图片地址)
background-position 设置背景图片的位置
background-position:和左侧的距离 和顶部的距离
距离值可以使用任意长度单位表示,像素,百分比等.
还可以英文单词表示
水平方向 left center right
垂直方向 top center bottom
注意:长度单位可以为负数,负数表示反向距离.
该属性如果只有一个值,则另外方向默认居中.
该属性具有两个派生紫属性: 取值和父属性一直
background-position-x:设置水平方向背景的距离
background-position-y:设置垂直方向背景的距离
background-repeat 设置背景图片是否重复
repeat 默认重复
repeat-x 横向重置
repeat-y 纵向重复
no-repeat 不重复
background-attachement 设置背景图片的绑定方式
scroll 默认值 图片跟随内容滚动
fixed 绑定 图片固定不随内容滚动
盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MaOvhhjp-1574735570825)(./box.png)]
盒子模型属性1 边框属性
border 边框综合属性
border:颜色 宽度 风格 (没有顺序要求)
同时设置四个方向的边框的 颜色,风格和宽度.
根据方向划分出四个属性
border-top: 设置元素顶部边框的颜色风格和宽度
border-bottom:设置元素底部边框的颜色风格和宽度
border-left:设置元素左侧边框的颜色风格和宽度
border-right:设置元素右侧边框的颜色风格和宽度
根据值划分三个属性
border-width:同时设置四个边的宽度
border-style:同时设置四个边的风格
border-color:同时设置四个边的颜色
根据值和属性划分
border-top-width:设置顶部边框的宽度
border-top-style:设置顶部边框的样式
border-top-color:设置顶部边框的颜色
border-bottom-width:设置底部边框的宽度
border-bottom-style:设置底部边框的样式
border-bottom-color:设置底部边框的颜色
border-left-width:设置左侧边框的宽度
border-left-style:设置左侧边框的样式
border-left-color:设置左侧边框的颜色
border-right-width:设置右侧边框的宽度
border-right-style:设置右侧边框的样式
border-right-color:设置右侧边框的颜色
盒子模型属性2 内补白
padding 设置元素四个方向的内补白
格式1: padding:值1 四个方向都是值1
格式2: padding:值1 值2 上下使用值1 左右使用值2
格式3: padding:值1 值2 值3 上值1 左右值2 下值3
格式4: padding:值1 值2 值3 值4 按照上右下左分配值1-值4
padding-left:设置元素左侧的内补白
padding-right:设置元素右侧的内补白
padding-top:设置元素顶部的内补白
padding-bottom:设置元素底部的内补白
注意:padding可以用来撑开内联元素,相当于给内联元素设置宽度和高度.
盒子模型属性3 外间距
margin:设置四个方向的外间距
格式1: margin:值1 四个方向都是值1
格式2: margin:值1 值2 上下使用值1 左右使用值2
格式3: margin:值1 值2 值3 上值1 左右值2 下值3
格式4: margin:值1 值2 值3 值4 按照上由下左分配值1-值4
margin-left:设置元素左侧的外间距
margin-right:设置元素右侧的外间距
margin-top:设置元素顶部的外间距
margin-bottom:设置元素底部的外间距
盒子之间的关系
标准文档流
- 文本元素按从上到下，从左到右的格式布局
- 块级元素按从上到下依次排列
- 内嵌元素按从左到右依次排列
定位属性
position属性贵定元素定位
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位 包含的块是视窗本身
显示属性
display = "none" 元素不会占用空间
visibility = "hidden" 元素会占用空间
内容超出容器
overflow：scroll超出部分显示滚动条
overflow：hidden隐藏
内嵌元素转换成块元素
display: block
3438
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
