HTML中引入CSS样式
- 行内样式
- 内部样式
- 外部样式
- 3种样式的优先级
- 行内样式 --> 内部样式 --> 外部样式
css的选择器
- 基本选择器
- 标签选择器
- 类选择器
- ID选择器
- 3种选择器的优先级
- ID选择器 --> 类选择器 --> 标签选择器
- 高级选择器
- 层次选择器
- 后代选择器
- 子选择器
- 相邻兄弟选择器
- 通用兄弟选择器
- 属性选择器
编辑网页文本
- 字体样式
font的书写
- 字体类型
font-family: - 字体大小
font-size: - 字体风格
font-style: - 字体粗细
font-weight: - 字体属性集合
- 顺序:字体风格 --> 字体粗细 --> 字体大小 --> 字体类型
- 实例
span{font:oblique bold 12px '楷体' ;}
- 排版网页文本
- 文本颜色
color:
- 颜色名称
- 十六进制
- RGB
- RGBA
- 水平对齐
text-align:
- 把文本列到左边
left; - 把文本列到右边
right; - 把文本列到中间
center; - 两端对齐
justify
- 首行缩进
text-indext:
- 2个字符
2em; - 24像素
24px;
- 行高
line-height:
- 12像素
12px;
- 文本装饰
text-decoration:
- 默认值,标准文本
none; - 设置文本的下划线
underline; - 设置文本的上划线
overline; - 设置文本的删除线
line-through;
使用CSS的超链接样式设置伪类链接在不同状态下的样式
- 列表样式
- 列表样式
list-style-type:
- 无标记符号
none; - 默认实心圆
disc; - 空心圆
circle; - 实心正方形
square; - 数字
decimal;
- 列表图片
list-style-image: url(图片地址); - 列表位置
list-style-position:
- 项目以内
inside; - 项目以外
outside;
- 背景样式
- 背景属性
- 背景颜色
background-color: - 背景图像
background-image; - 背景定位
background-position; - 背景重复方式
background-repeat;
盒子模型
- 盒子模型概念
- 盒子模型本质上是一个盒子,封装周围的HTML元素
- 盒子模型的使用
- 边框
border
- 边框颜色
border-color:red - 边框宽度
border-width:12px - 边框样式
border-style:
- 默认值
none; - 点线
dotted; - 实线
solid; - 双边框
double;
- 同时设置
border:1px solid #F000;
- 外边距
margin
- 外边距上
margin-top:12px - 外边距右
margin-right:12px - 外边距下
margin-bottom:12px - 外边距左
margin-left:12px - 网页居中对齐的必要条件
1. 块元素
2. 固定宽度
- 内边距
padding
- 内边距上
padding-top:12px; - 内边距右
padding-right:12px; - 内边距下
padding-bottom:12px; - 内边距左
padding-left:12px;
dispaly属性
- 默认值
dispaly:none; - 行内元素
dispaly:inline; - 块元素
dispaly:block; - 行内块元素
dispaly:inline-block;
- 常见的网页布局
- 上 下结构
- 上 中 下结构
- 上 左右 下结构 (1-2-1)
- 上 左中右 下结构 (1-3-1)
浮动
- 浮动属性
float:
- 向左浮动
left; - 向右浮动
right; - 不浮动
none;
- 清除浮动
clear:
- 左侧不允许浮动
clear:left; - 右侧不允许浮动
clear:right; - 左右两个不允许浮动
clear:both; - 默认值,允许两侧浮动
clear:none;
- 解决父级边框塌陷的四种办法办法
- 设置父元素的高度
height:1400px;弊端:元素固定高度会降低扩展性 - 浮动元素后面加空
<div></div>弊端:如果需要多个空<div></div>,容易造成标签冗余 - 父级添加
overflow属性.father{overflow:hidden; border:1px #000 solid;}弊端:下拉列表框的场景不能使用 - 父级添加伪类after
.class:after{ content:''; display:block; clear:both; }写法稍微复杂一点,但是没有副作用,推荐使用
定位网页元素
- 定位属性
position:
- 默认值,没有定位
position:static; - 相对定位
position:relative;
- 偏移方向
- 偏移设置
poition:relative; top:12px; left:20px;-
poition:relative; right:12px; bottom:20;两种方式,用哪种都行.
- 相对定位的特性:
相对于自己的初始位置来定位,元素发生位置偏移后,它原来的位置会被保留下来.层级越高,可以把标准文档流中的元素及浮动元素覆盖在下边. - 相对定位的使用场景:
相对定位一般情况下很少自己单独使用,都是配合绝对定位使用,为绝对定位创造定位父级而又不设置偏移量.
- 绝对定位
position:aboslute;
- 偏移设置
poition:relative; top:12px; left:20px;poition:relative; right:12px; bottom:20;
- 绝对定位的特性:
- 绝对定位时相对于他的父级定位的位置来定位.如果没有设置父级定位,则相对浏览器窗口来定位
- 元素位置发生偏移后,原来的位置不会被保留.
- 层级提高,可以把标准文档流中的元素及浮动元素盖在下边
- 设置绝对定位的元素脱离文档流
- 绝对定位的使用场景:
- 下拉菜单
- 焦点图轮播
- 弹出数字气泡
- 特别花边等场景
- 固定定位
position:fixed;
- 类似于绝对定位,不过区别在于定位的基准不是祖先元素,而是浏览器窗口
- 固定定位的特性:
- 相对浏览器窗口来定位
- 偏移量不会随滚动条的移动而移动
- 固定定位的使用场景:
- 固定广告
- 返回顶部图标
- 吸顶导航栏等
- 定位元素的堆叠顺序
z-index:整数; - 设定网页元素的透明度
opacity:x;
- X 取值范围 0~1之间.
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
