属性选择器:
E【attr】 存在attr属性即可
E【attr=val】 属性值完全等于val
E【attr*=val】 属性值里包含val字符并且在“任意”位置
E【attr^=val】 属性值里包含val字符并且在“开始”位置
E【attr$=val】 属性值里包含val字符并且在“结束”位置
伪元素选择器
- E::first-letter 文本的第一个单词或字 (如 中文 日文 韩文等)
- E::first-line 文本第一行
- E::selection 可改变选中文本的样式
- E::before和E::after
在E元素内部的开始位置和结束位置创建一个元素 该元素为行内元素 并且需要结合content属性使用
div::before {
content:“开始”;
}
div::after {
content:“结束”;
}
CSS背景
背景图片(image)
语法: background-image: url(图片的路径)
背景平铺(repeat)
语法: background-repeat: no-repeat; /* 不平铺 */ 查手册
背景位置(position)
语法:
background-position : length || length
background-position : position || position
背景附着
语法:
background-attachment : scroll | fixed
scroll : 背景图像是随对象内容滚动
fixed : 背景图像固定
背景简写
background属性的值的书写顺序官方并没有强制标准的 为了可读性 建议大家如下写:
background : 背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
background: transparent url(image.jpg) repeat-y scroll 50% 0;
背景透明(CSS3)
background: rgba(0,0,0,0.3);
最后一个参数是alpha透明度 取值范围 0~1 之间
背景缩放
通过background-size设置背景图片的尺寸 就像我们设置img的尺寸一样 在移动Web开发中做屏幕适配应用非常广泛 其参数设置如下 :
a) 可以设置长度单位(px)或百分比(设置百分比时, 参照盒子的宽高)
b) 设置为cover时 会自动调整缩放比例 保证图片始终填充满背景区域 如有溢出部分则会被隐藏
c) 设置为 contain 会自动调整缩放比例 保证图片始终完整显示在背景区域
多背景(CSS3)
以逗号分隔可以设置多背景 可用于自适应布局
background-iamge: url(‘images/gyt.jpg’),url(‘images/robot,png’);
文本的装饰
text-decoration 通常我们用于给链接修改装饰效果
None(默认,定义标准文本)
underline(定义文本下的一条线)
overline(定义文本上的一条线)
line-through(定义穿过文本下的一条线)