CSS第二天
对齐方式:text-align(水平方向对齐方式)
- Left左对齐(系统默认)
- Right 右对齐
- Center 居中
None(没有下划线)
Underline(下划线)
Em (单位:几个字符)
选择器: - 子代选择器(只选离他最近的标签)
- 后代选择器(选择这个标签里的所有标签)
并集选择器; - 应用场景:选择多种标签(多个样式)
交际选择器;
1.书写样式; 标签标签(中间不能有符号)
并集选择器书写;标签,标签
伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
伪类选择器书写最大的特点是用冒号(:)表示,比如 :hover 、 :first-child 。
链接伪类选择器
伪类选择器用于向某些选择器添加特殊的效果,比如给链接添加特殊效果,或选择第1个,第n个元素。
focus 伪类选择器
:focus 伪类选择器用于选取获得焦点的表单元素。
块元素
块级元素的特点:
• 比较霸道,自己独占一行。
• 高度,宽度、外边距以及内边距都可以控制。
• 宽度默认是容器(父级宽度)的100%。
• 是一个容器及盒子,里面可以放行内或者块级元素。
注意:
文字类的元素内不能放块级元素
行内元素
行内元素的特点:
• 相邻行内元素在一行上,一行可以显示多个。
• 高、宽直接设置是无效的。
• 默认宽度就是它本身内容的宽度。
• 行内元素只能容纳文本或其他行内元素。
行内块元素
行内块元素的特点:
• 和相邻行内元素(行内块)在一行上,但是他们之间会有空白缝隙。
• 一行可以显示多个(行内元素特点)。
• 默认宽度就是它本身内容的宽度(行内元素特点)。
• 高度,行高、外边距以及内边距都可以控制(块级元素特点)。
单行文字垂直居中的代码
让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中
行高的上空隙和下空隙把文字挤到中间了,
如果行高小于盒子高度,文字会偏上,
如果行高大于盒子高度,则文字偏下。
背景颜色
样式名称:
background-color 定义元素的背景颜色
背景图片
样式名称:
background-image 定义元素的背景图片
背景平铺
样式名称:
background-repeat 设置元素背景图像的平铺
背景图片位置
样式名称:
background-position 属性可以改变图片在背景中的位置
参数代表的意思是:x 坐标和 y 坐标。 可以使用 方位名词 或者 精确单位
参数是方位名词
如果指定的两个值都是方位名词,则两个值前后顺序无关,比如 left top 和 top left 效果一致
如果只指定了一个方位名词,另一个值省略,则第二个值默认居中对齐
2、参数是精确单位
如果参数值是精确坐标,那么第一个肯定是 x 坐标,第二个一定是 y 坐标
如果只指定一个数值,那该数值一定是 x 坐标,另一个默认垂直居中
3、参数是混合单位
如果指定的两个值是精确单位和方位名词混合使用,则第一个值是 x 坐标,第二个值是 y 坐标
背景图片固定
样式名称:
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。
背景合写样式:
background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置;
使用方式:
背景色半透明
• 最后一个参数是 alpha 透明度,取值范围在 0~1之间
• 我们习惯把 0.3 的 0 省略掉,写为 background: rgba(0, 0, 0, .3);
注意:
• 背景半透明是指盒子背景半透明,盒子里面的内容不受影响