CSS 基础
文章目录
为网页添加样式
术语解释
、、、css
h1{
color: red;
background-color: skyblue;
text-align: center;
}
、、、
css规则 = 选择器 + 声明块
选择器
选择器:选中元素
- ID选择器:选中的是对应id值的元素
- 元素选择器
- 类选择器 ( class=“” )
声明块
出现在大括号中
声明块中包含了很多声明(属性),每一个声明(属性)表达了某一方面的样式。
CSS代码书写位置 index-12
- 内部样式表
书写在style元素里中
- 内联样式表,元素样式表
直接书写在元素的style属性中
- 外联样式表[推荐]
将样式书写到独立的css文件中
(1).外部样式表可以解决多页面样式重复得问题
(2).有利于浏览器缓存,从而提高页面响应速度
(3).有利于代码分离(HTML和CSS),更容易阅读和维护
常见样式声明 index-13.1
- color
元素内部的文字颜色
预设值:定义好的单词
三原色,色值:光学三原色(红、绿、蓝),每个颜色可以使用0-255的数字来表达色值。
、、、
绿色,rgb表示法:
rgb(0,255,0)
hex(16进制)表示法:
。#红绿蓝
、、、
淘宝红:#ff4400,#f40
黑色:#000000,#000
白色:#ffffff,#fff
红:#ff0000,#f00
绿:#00ff00,#0f0
蓝:#0000ff,#00f
紫:#ff00ff,#f0f
青:#00ffff,#0ff
黄:#ffff00,#ff0
灰:#cccccc,#ccc
2. background-color
元素背景颜色
3. 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-space
文字间隙
- text-align
文字内部的水平排列方式
选择器 index-14.1
选择器:帮助你精准的选中想要的元素
简单选择器
- ID选择器
- 元素选择器
- 类选择器
- 通配选择器
*,选中所有元素 - 属性选择器
根据属性名和属性值选中元素 - 伪类选择器
选中某些元素的某种状态
(1)link:超链接未访问时的状态
(2)visited:超链接访问过后的状态
(3)hover:鼠标悬停状态
(4)active:激活状态,鼠标按下状态
书写时应当按照顺序书写;爱恨法则:love hate
- 伪元素选择器 index-14.2
生成并选择某个元素内部的第一个或着最后一个子元素…
before
after
选择器的组合
- 并且
- 后代元素 —— 空格
- 子元素 —— >
- 相邻兄弟元素 —— +
- 后面出现的所有兄弟元素 —— ~
选择器的并列
多个选择器,用逗号分隔
语法糖
层叠
声明冲突:同一个样式多次应用到同一个元素
层叠:解决声明冲突的过程,浏览器自动处理(权重计算)
1.比较重要性
重要性从高到低:
作者样式表:开发者书写的样式
1).作者样式表的!important样式
2).作者样式表中的普通样式
3).浏览器默认样式表的样式
2.比较特殊性
看选择器
总体规则:选择器选中的范围越窄,越特殊
具体规则:通过选择器,计算出一个4位数(XXXX)
- 千位:如果是内联样式,计1;否则为0
- 百位:等于选择器中所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:选择器中所有元素选择器、伪元素选择器的数量
3.比较源次序
代码书写靠后的胜出
应用
- 重置样式表
书写一些作者样式,覆盖浏览器的默认样式
重置样式表 -> 浏览器的默认样式
常见的重置样式表:normalize.css;reset.css;meyer.css
- 爱恨法则
link > visited > hover > active
继承 index-15
子元素会继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承
属性值的计算过程
一个元素一个元素依次渲染,顺序按照页面文档的树形目录结构进行
渲染每个元素的前提条件:该元素的所有CSS属性必须有值
-
确定声明值:参考样式表中没有冲突声明,作为CSS属性
-
层叠冲突:对样式表有冲突的声明使用层叠规则,确定CSS属性值
-
使用继承:对仍然没有值的属性,若可以继承,则继承父元素的值
-
使用默认值:对仍然没有值的属性,使用默认值
特殊的两个CSS取值:
- inherit:手动(强制)继承,将父元素的值取出应用到该元素
- initial:初始值,将该属性设置默认值
盒模型 index-16.1
盒子,每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型:
- 行盒,display等于inline的元素 【默认值】
- 块盒:display等于block的元素
行盒在页面中不换行、块盒独占一行
浏览器默认样式表设置的块盒:容器元素、h1~h6、p
常见的行盒:span、a、img、video、audio
盒子的组成部分 index-16.2
无论是行盒、还是块盒,都由下面几个部分组成,从内到外分别是:
- 内容 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
盒模型应用 index-17.1
改变宽高范围
默认情况下,width和height设置的是内容盒宽高。
页面重构师:将psd文件(设计稿)制作为静态页面
衡量设计稿的尺寸的时候,往往使用的是边框盒,但设置width和height,则设置的是内容盒
- 精确计算
- CSS3:box-sizing /改变宽高的影响范围/
改变背景覆盖范围 index-17.2
默认情况下,背景覆盖边框盒
可以通过backgrond-clip进行修改
溢出处理 index-17.3
overflow,控制内容溢出边框盒后的处理方式
、、、css
overflow: hidden; /溢出部分隐藏/
overflow: scroll; /生成滚动条 (速写属性)/
、、、
断词规则
word-break,会影响文字在什么位置被截断换行
word-break:normal:普通。CJK字符(文字位置截断),非CJK字符(在单词位置截断)
word-break:break-all:截断所有。所有字符都在文字处截断
word-break:keep-all:保持所有。所有文字都在单词之间截断
空白处理 index-17.4
whith-space:nowrap /不换行/
行盒的盒模型 index-18.1
常见的行盒:包含具体元素内容
span、strong、em、i、img、video、audio
显著特点
- 盒子沿着内容延伸
- 行盒不能设置宽高
调整行盒的宽高,应该使用字体大小、行高、字体类型,间接调整。
- 内边距(填充区)
水平方向有效,垂直方向不会实际占据空间。
- 边框
水平方向有效,垂直方向不会实际占据空间。
- 外边距
水平方向有效,垂直方向不会实际占据空间。
行块盒 index-18.2
display:inline-block 的盒子
- 不独占一行
- 盒模型中所有尺寸都有效