-
HTML:超文本标记语言,是W3C制定的规范,描述网页结构的语言
选择标签的标准:根据语义化你来选择HTML元素,因为每个HTML元素都有具体的含义
HTML5元素周期表 MDN w3.org -
CSS : 层叠样式表,是W3C制定的规范,描述页面展示的语言
使用:
内联样式 : 样式标签里面写样式 一般是样式代码量不大最多200行左右的时候用```html <style> 选择器{ 属性 : 属性值; ... color:red; font-size:18px; } </style> ```
行内样式 : 标签里面写 元素的style属性 优先级最高
外联样式[推荐] : 外部样式表
step1 : **.css文件的创建 直接写css样式声明
step2 :link元素将需要的css文件引入进来
常用的样式声明
- color 字体颜色 预设值 rgba 16进制设置(基础三原色,每个颜色由两个16进制的数字组成)
- background-color 元素背景颜色
- font-size 元素内部文字的尺寸大小
px:绝对单位
em:相对单位 父元素的字体大小 基准字号 - font-weight 文字粗细程度 bold bolder 500-900
- font-family
文字类型
必须是用户计算机中存在的字体才有效果。
多个字体,以匹配不同环境 - font-style
字体样式,通常用它设置斜体
i元素 默认样式 斜体 特殊的音调处理 实际使用中,通常用它表示一个小图标
em元素 默认样式斜体 强调的内容
strong元素 默认是加粗 表示重要的,不能被忽略的内容 - text-decortation
文本修饰,给文本加线
a元素 关于下划线的设置
del元素:错误的内容
s元素: 过期的内容
- text-indent
首行文本缩进 - line-height
每行文本的高度,值越大,每行的文本间距越大
设置行高为容器的高度,可以让单行文本垂直居中 - text-align
元素内容文字的水平排列方式 - letter-spacing
文字间隙
CSS基础选择器
简单选择器
-
ID选择器
-
元素选择器
-
类选择器 Class选择
-
通配符选择器
*{}
匹配出页面中的所有元素
样式的重置
一般能够继承的属性,通常会选择使用body元素选择器来代替
因为通用选择器是加载一个元素就执行一次,效率低[相对而言,且不会特别大] -
属性选择器
根据属性名和属性值选中元素 -
伪类选择器
选中某些元素的某种状态 匹配不同的状态- love hate 的顺序来设定
link 超链接未访问时的状态
visited 超链接访问过后的状态
hover 鼠标悬停的状态 任何元素都有这个状态
active 激活状态,鼠标按下状态
focus 获取焦点时候的状态
- love hate 的顺序来设定
-
伪元素选择器
:before
::beforeafter
选择器的组合
- 群组选择器
, - 后代选择器
需要具备层叠关系的元素,被嵌套的元素都可以成为后代元素 - 关系型选择器
找兄弟
找子元素
选择器的并列
- 群组选择器
,
双重确定的找某个元素
优先级
样式的优先级
三种使用方式:从高到低
狭义解释:行内样式优先级最高
外部样式和内部样式的优先级,看谁是后来者,谁写在最后,听谁
浏览器默认样式
css样式表特征
层叠性
- 有冲突的时候
声明冲突:同一个样式,多次应用同一个元素
叠层:解决声明冲突的过程,浏览器自动处理(计算权重)
1.比较重要性
重要性从高到底:
- 作者样式表中的!important样式 -编程人员写的样式-
带有!important的样式优先级非常高 打破默认的优先级规则 - 作者样式表中的普通样式
- 浏览器默认样式表中的样式
2.比较特殊性 选择器的优先级
看选择器
总结出来的规则:选择器选中的范围越窄,越特殊
具体规范:通过选择器,计算出一个4为数(x x x x) 此处的四位数并不是逢10进1的数字
- 千位:如果是内联样式,记为1,否者记为0
- 百位:等于选择器中所有id选择器的数量
- 十位:等于选择器中所有类选择器、属性选择器、伪类选择器的数量
- 个位:等于选择器中所有元素选择器、伪元素选择器的数量
3.比较顺序
代码书写在后面的优先 后来者居上
- 重置样式表
用程序员自己写的样式,覆盖浏览器的默认样式
常见的重置样式表:rest.css meyer.css normalize.css… - link > visited > hover > active
继承性
子元素会继承父元素的某些CSS属性
通常,跟文字内容相关的属性都能被继承
属性值的计算过程
敬请期待…
常用样式属性2
-
尺寸
width
min-width 最小宽度
max-width 最大宽度
height
min-height
max-height允许被修改宽高的元素大部分是容器元素
-
边框阴影
box-shadow : h-shadow[水平方向的偏移量*] v-shadow[垂直反向的偏移量*] blur[模糊距离] spread[阴影尺寸*] color[颜色] inset[内阴影] -
outline 轮廓
绘制与元素周围的一条线,位于边框外加粗样式