CSS(Cascading Style Sheets)层叠样式表
为网页添加样式
术语解释
‘’‘css
h1{
color:red;
background-color:lightblue;
text-align: center;
}
‘’’
CSS规则 = 选择器 + 声明块
选择器
选择器:选中元素
- ID选择器:选中的是对应ID值的元素
- 元素选择器
- 类选择器
声明块
出现在大括号中
声明块中包含很多声明(属性)
CSS书写位置
- 内部样式表
书写在style样式中 - 内联样式表,元素样式表
直接书写在元素的style属性中 - 外部样式表[推荐]
将样式书写到独立的CSS文件中
1). 外部样式可以解决多页面样式重复的问题
2). 有利于浏览器缓存,从而提高页面响应速度
3). 有利于代码分离(HTTM和CSS),更容易阅读和维护
常用样式声明
color
元素内部的文字颜色
预设值:定义好的单词
三原色,色值:光学三原色(红,绿,蓝),每个颜色可以使用0-255之间的数字来表达,色值。
‘’’
rgb表示法
rgb(0,255,0)
hex(16进制表示法):
#红蓝绿
‘’’
宝蓝色:#008c8c
淘宝红:#ff4400,简写#f40
黑色:#ffffff,简写#fff
白色:#000000,简写#000
红色:#f00
绿色:#0f0
蓝色:#00f
紫色:#f0f
青色:#0ff
黄色:#ff0
灰色:#cccbackground-color
元素背景颜色font-size
元素内部文字的尺寸大小
1). px : 像素,简单的理解为文字的高度占多少个像素
2). em :相对单位,相对于父元素的字体大小
每个元素必须有字体大小,如果没有声明,则直接使用父元素的字体大小,如果没有父元素(html),则使用基准字号。
user agent,UA,用户代理(浏览器)
- font-weight
文字粗细程度,可以取值数字,可以取值为预设值
strong默认加粗
font-family
文字类型
必须用户计算机中存在的字体才会有效
使用多个字体,以匹配不同环境
sans-serif,非衬线字体font-style
字体样式,通常用它设置斜体
i元素、em元素,默认样式,是倾斜字体;实际使用中,通常用它表示一个图标(icon)
- text-decoration
文本修饰,给文本加线
a元素 可以利用这个样式去掉下划线
del元素:错误的内容
s元素: 过期的内容
text-indent
表示首行文本缩进line-height
每行文本的高度,该值越大,每行文本的距离越大。
设置行高为容器的高度,可以让单行文本垂直居中
行高可以设置为纯数字,表示相对于当前元素的字体大小width
宽度height
高度letter-spacing
文字间隙text-align
元素内部文字的水平排列方式
选择器
选择器:帮助你精准的选中想要的元素
简单选择器
ID选择器
元素选择器
类选择器
通配符选择器
*,选中所有元素属性选择器
根据属性名和属性值选中元素伪类选择器
选中某些元素的某种状态
hover:鼠标悬停状态
active:激活状态,鼠标按下状态
link:超链接未访问时的状态
visited:超链接访问过后的状态
爱恨法则:love hate伪元素选择器
before::
after::
选择器的组合
- 并且
- 后代元素———— 空格
- 子元素———— >
- 相邻元素———— +
- 后面出现的所有兄弟元素———— ~
选择器的并列
多个选择器,用逗号分隔
(语法糖)
层叠(权重计算)
声明冲突:同一个样式,多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理
1. 比较重要性
重要性从高到低:
作者样式表:开发者书写的样式
- 作者样式中的!import样式
- 作者样式表中的普通样式
- 浏览器中的默认样式
2. 比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个4位数(x x x x)(256进制)
- 千位:如果是内联样式,记1,否则记0
- 百位:等于将选择器中所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
3. 比较源次序
代码中书写靠后的胜出
应用
- 重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表:normalize.css、reset.css、meyer.css
- 爱恨法则
link > visited > hover > active
继承
子元素继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承
属性值的计算过程
一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件:该元素的所有CSS属性必须有值
一个元素,从所有属性都没有值,到所有属性都有值,这个计算过程,叫做属性值计算过程
- 确定声明值:参考样式表中没有冲突的声明,作为CSS属性值
- 层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值
- 继承:对仍然没有值的属性,若可以继承,则继承父元素的值
- 使用默认值
特殊的两个CSS取值:
- inherit:手动(强制)继承,将父元素的值取出应用到该元素
- initial:初始值,将该属性设置为默认值
盒模型
box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型:
- 行盒,display等于inline的元素
- 块盒,display等于block的元素
行盒在页面中不换行,块盒独占一行
display默认值为inline
浏览器默认样式表设置的块盒:容器元素、h1~h6、p
常见的行盒:span、a、img、video、audio
盒子的组成部分
无论是行盒还是块盒,都由下面几个部分组成,从内到外分别是:
内容 content
width、height,设置的盒子内容的宽高
内容部分通常叫做整个盒子的内容盒 content-box填充 padding
盒子边框到盒子内容的距离
padding-left、padding-right、padding-top、padding-bottom
padding:简写
padding: 顺时针 上、右、下、左
填充区+内容区 = 填充盒 padding-box边框 border
边框 = 边框样式 + 边框宽度 + 边框颜色
边框样式:border-style
边框宽度:border-width
边框颜色:border-color
边框+填充区+内容区 = 边框盒子 border-box
- 外边距 margin
边框到其他盒子的距离
margin-top、margin-right、margin-bottom、margin-left
速写属性margin:上、右、下、左
盒模型应用
改变宽高范围
默认情况下,width 和 height 设置的是内容盒宽高。
页面重构师:将psd文件(设计稿)制作为静态页面
衡量设计稿尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒
- 精确计算
- CSS3: box-sizing
改变背景覆盖范围
默认情况下,背景覆盖边框盒
可以通过background-clip进行修改
溢出处理
overflow,控制内容溢出边框盒后的处理方式
断词规则
word-break,会影响文字在什么位置被截断换行
normal:普通。CJK(中日韩)字符(文字位置截断),非CJK字符(单词位置截断)
break-all:截断所有。所有字符在文字位置截断
keep-all:保持所有。所有字符在单词位置截断
空白处理(单行文本)
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
行盒的盒模型
常见的行盒:包含具体内容的元素
span、strong、em、i、img、video、audio
显著特点
盒子沿着内容延伸
行盒不能设置宽高
调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。内边距(填充区)
水平方向有效,垂直方向不会实际占据空间。边框
水平方向有效,垂直方向不会实际占据空间。外边距
水平方向有效,垂直方向不会实际占据空间。
行块盒
display: inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效
空白折叠
空白折叠,发生在行盒(行块盒)内部 或 行盒(行块盒)之间
可替换元素 和 非可替换元素
大部分元素,页面上显示的结果,取决于元素内容,称为非可替换元素
少部分元素,页面上显示的结果,取决于元素属性,称为可替换元素
可替换元素:img、video、audio
绝大部分可替换元素均为行盒
可替换元素类似于行块盒,盒模型中所有尺寸都有效。
常规流
盒模型:规定单个盒子的规则
视觉格式化模型(布局规则):页面中的多个盒子排列规则
视觉化格式化模型,大体上将页面中盒子排列分为三种方式:
- 常规流
- 浮动
- 定位
常规流布局
也被称为常规流、文档流、普通文档流、常规文档流
所有元素,默认情况下,都属于常规流布局
总体规则:块盒独占一行,行盒水平依次排列
包含块(containing block): 每个盒子都由它的包含块,包含块决定了盒子的排列区域。
绝大部分情况下:盒子的包含块,为其父元素的内容盒
块盒
- 每个块盒的总宽度,必须刚好等于包含块的宽度
宽度的默认值是auto
magin的取值也可以是auto,默认值是0
auto: 将剩余空间吸收掉
width吸收能力强于margin
若宽度、边框、内边距、外边距计算后,仍然有剩余空间,该剩余空间被margin-right全部吸收
在常规流中 ,块盒在其包含块中居中,可以定宽、然后左右margin设置为auto。
每个块盒垂直方向上的auto值
height: auto,适应内容的高度
margin:auto,表示0百分比取值
padding、宽高、margin可以取值为百分比
以上所有百分比相对于包含块的宽度
高度的百分比:
1). 包含块的高度是否取决于子元素的高度,设置百分比无效
2). 包含块的高度不取决于子元素的高度,百分比相对于父元素高度
- 上下外边距的合并
两个常规流块盒,上下外边距相邻,会进行合并
两个外边距取最大值。
浮动
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
- 常规流
- 浮动
- 定位
应用场景
- 文字环绕
- 横向排列
浮动的基本特点
修改float属性值为:
- left:左浮动,元素靠上靠左
- right:右浮动,元素靠上靠右
默认值为none
- 当一个元素浮动后,元素必定为块盒(更改display属性为block)
- 浮动元素的包含块,和常规流一样,为父元素的内容盒
盒子尺寸
- 宽度为auto时,适应内容宽度
- 高度为auto时,与常规流一致,适应内容的高度
- margin为auto时,为0
- 边框、内边距、百分比设置与常规流一样
盒子排列
- 左浮动的盒子靠上靠左排列
- 右浮动的盒子靠上靠右排列
- 浮动盒子在包含块中排列时,会避开常规流块盒
- 常规流块盒在排列时,无视浮动盒子
- 行盒在排列时,会避开浮动盒子
- 外边距合并不会发生
如果文字没有在行盒中,浏览器会自动生成一个行盒包裹文字,该行盒叫做匿名行盒。
高度坍塌
高度坍塌的根源:常规流盒子的自动高度,在计算时,不会考虑浮动盒子
解决: 清除浮动,涉及css属性,clear
- 默认值:none
- left: 清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right: 清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清除左右浮动,该元素必须出现在所有浮动盒子的下方
在最前面清除浮动,定义在后面:
.clearfix::after{
content: “”;
display: block;
clear: both;
}
定位
视觉格式化模型,大体上将页面中盒子的排列分为三种方式:
- 常规流
- 浮动:float
- 定位:position
涉及的css属性:position
position
- 默认值:static,静态定位(不定位)
- relative:相对定位
- absolute:绝对定位
- fixed:固定定位
一个元素,只要position的取值不是static,认为该元素是一个定位元素。
定位元素会脱离文档流(相对定位除外)
一个脱离了文档流的元素:
- 文档流中的元素摆放时,会忽略脱离了文档流的元素
- 文档流中的元素计算自动高度时,会忽略脱离了文档流的元素
相对定位
不会导致元素脱离文档流,只是让元素在原来位置上进行偏移
可以通过四个css属性对设置其位置:
- left
- right
- top
- bottom
盒子的偏移不会对其他盒子造成任何影响
绝对定位
- 宽高为auto,适应内容
- 包含块变化:找祖先元素中第一个定位元素,该元素的填充盒为其包含块.若找不到,则它的包含块为整个网页(初始化包容块)。
固定定位
其他情况跟绝对定位完全一样
包含块不同:固定为视口(浏览器的可视窗口)
定位下的居中
某个方向居中:
- 定宽(高)
- 将左右(上下)距离设置为0
- 将左右(上下)margin设置为auto
绝对定位和固定定位中,margin为auto时,会自动吸收剩余空间
多个定位元素重叠时
堆叠上下文 (奥运五环)
设置z-index,通常情况下,该值越大,越靠近用户
只有定位元素设置z-index有效
z-index可以是负数,如果是负数,则遇到常规流、浮动元素,会被其覆盖
补充
- 绝对定位、固定定位元素一定是块盒
- 绝对定位、固定定位元素一定不是浮动
- 没有外边距合并
更多的选择器
更多伪类选择器
- first-child
选择第一个子元素
first-of-type,选择子元素中第一个
- last-child
选择最后一个子元素
last-of-type,选择子元素中最后一个
- nth-child()
选中指定的第几个子元素
even: 关键字,等同于2n
odd: 关键字,等同于2n+1
- nth-of-type()
选中指定的子元素中第几个某类型的元素
更多的伪元素选择器
first-letter
选中元素中的第一个字母(文字)first-line
选中元素中第一行的文字selection
选中被用户框选的文字
更多的样式
透明度
opacity,它设置的是整个元素的透明,它的取值是0 ~ 1
一般情况下不会用,会采用第二种通道在颜色位置设置alpha通道(rgba)
鼠标
使用cursor设置
.cur .ico浏览器支持的格式居多
盒子隐藏
- display: none,(显示)不生成盒子
- visibility: hidden,(可见度)生成盒子,只是从视觉上移除盒子,盒子仍然占据空间。
背景图
和img元素的区别
img元素是属于HTML的概念
背景图属于css的概念
当图片属于网页内容时,必须使用img元素
当图片仅用于美化页面时,必须使用背景图
涉及的css属性
background-image
background-repeat
默认情况下,背景图会在横坐标和纵坐标中进行重复
- background-size
预设值:contain、cover,类似于object-fit
X , Y轴坐标
百分比: 100%(宽度撑满) 100%(高度撑满,页面太高会压缩)
数值: 200px 300px
- background-position
设置背景图的位置
预设值:left、right、top、bottom、center
数值或百分比
雪碧图(精灵图)(spirit)
background-attachment
通常用它控制背景图是否固定
fixed:与定位(position)的固定一样,是相对于视口的固定背景图和背景颜色混用
背景图在视口缺少的部分,可以用背景颜色来填充速写(简写)background
url() no-repeat center/100% fixed red
先写position,再/size
CSS(Cascading Style Sheets)层叠样式表相关推荐
- CSS(Cascading Style Sheets) 层叠样式表
CSS通常称为CSS样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTM ...
- CSS (Cascading Style Sheets)
CSS 是什么 层叠样式表 (Cascading Style Sheets). CSS 能够对网页中元素位置的排版进行像素级精确控制 , 实现美化页面的效果 . 能够做到页面的样式和结构分离. 基本语 ...
- 什么是CSS?Cascading Style Sheets
通常称为CSS样式表或层叠样式表(级联样式表) 作用 为HTML标记语言提供了一种样式描述 即[设置HTML页面中的元素的位置.排版.样式外观等] 如文本内容(字体.大小.对齐方式等).图片的外形(宽 ...
- CSS( Cascading Style Sheets )简书
(注:带*号的属性是CSS3新增属性) 一.基本规则 1.css通常存储在样式表(style)中,用于定义如何显示HTML元素: 2.css主要由两个部分构成:选择器和一条或多条声明. 选择器通常是需 ...
- CSS层叠样式表(Cascading Style Sheets)
CSS简介 CSS全称为:层叠样式表(Cascading Style Sheets),主要用于定义HTML内容在浏览器内的显示样式,如文字大小,颜色,字体加粗等. 使用CSS样式通过定义某个样式,可以 ...
- CSS 指层叠样式表 (Cascading Style Sheets) 和选择器
CSS 指层叠样式表 (Cascading Style Sheets) 内联样式(行内样式) 在开始标记中通过style属性(attribute)来设置元素的样式.注意,这里的 property 指的 ...
- 样式表(CSS:Cascading Style Sheets)简要教程[上]
首先提供两个手册的下载 CSS2&JavaScript.rar 一.样式表基础 1. 样式表中每一个条目由选择符(selector)和对应的规则组成,选择符通常是HTML元素名称,也可以是类( ...
- CSS : Cascading Style Sheets
作者:知乎用户 链接:https://www.zhihu.com/question/20077745/answer/137434995 来源:知乎 著作权归作者所有.商业转载请联系作者获得授权,非商业 ...
- CSS3(Cascading Style Sheet) 层叠样式表
CSS是Cascading Style Sheet 层叠样式表或级联样式表,简称"样式表".利用样式可以定义页面的样式,大大减少网页的设计工作量.也可以美化页面,精准定制页面的布局 ...
- CSS(Cascading Style Sheet)总结
CSS 层叠样式表 (Cascading Style Sheet) 1.字体设置: 有继承性,给父元素设置,子元素可继承. (1)字体倾斜:font-style:normal/italic (2)字体 ...
最新文章
- 从六大概念总结吴恩达机器学习书籍:如何做好工程项目实践?
- 如何搜索国外上市企业的财务数据以及年报
- VMware虚拟网络相关知识
- cordova media android不播放声音,cordova-plugin-media 录音并打包上传
- scala调用java代码_scala调用java代码
- mysql 载入主体时出错_mysql遇到load data导入文件数据出现1290错误的解决方案
- Progress lifecycle
- 导数与微分的知识点思维导图_高中物理思维导图,高中三年知识点一个不漏
- Linux篇 | 磁盘存储和文件系统
- 字符串hash(类似于进制的hash)
- 企业信息化基本指标构成方案(试行)上
- 软件工程毕业答辩常问的问题
- iOS性能优化(一)卡顿优化
- citespace三天写论文!图表调整实战
- LeetCode-初级算法-有效的数独 ( java )
- vue 微信公众号开发
- 自动驾驶轨迹预测论文阅读(二)TPNet: Trajectory Proposal Network for Motion Prediction
- resulful规范_resultful风格接口
- 【PyTorch】偏置项 bias 与 Batch-Normalize
- Window: 换了固态硬盘装好系统后,为什么一直无法进入系统呢