20201102

CSS第二天
对齐方式:text-align(水平方向对齐方式)

  1. Left左对齐(系统默认)
  2. Right 右对齐
  3. Center 居中
    None(没有下划线)
    Underline(下划线)
    Em (单位:几个字符)
    选择器:
  4. 子代选择器(只选离他最近的标签)
  5. 后代选择器(选择这个标签里的所有标签)
    并集选择器;
  6. 应用场景:选择多种标签(多个样式)
    交际选择器;
    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);
    注意:
    • 背景半透明是指盒子背景半透明,盒子里面的内容不受影响
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值