CSS继承与优先级、自定属性选择器语法、CSS属性操作：文本、行高、背景。边框属性、列表属性、dispaly属性

1、CSS继承与优先级

# CSS继承
# 子类的会继承父类的属性
# 但也有一些属性不能被继承：border、margin、padding、background等

# 选择器的优先级
# 相同选择器：
# 按先后顺序

# 不同选择器：
# 权重： 1000      100      10       1
#       行内式 --> id --> class --> 标签

# !important 表明这个标签优先级最高
# 语法：选择器{…!important}
# 如果！important 声明冲突，则比较优先权，优先权一样则顺序决定

2、自定义属性选择器语法

# 自定义属性选择器语法：
# 标签名或class名(不加默认所有)[属性名="属性值"]
# [属性名]{……}  根据属性名进行选择
# [属性名="属性值"]{……}  准确找到某一个选择
# [属性名~="属性值"]{……}  以指定匹配其中有的属性值
# [属性名^="属性值"]{……}  以指定开头的属性值
# [属性名$="属性值"]{……}  以指定结尾的属性值
# [属性名*="属性值"]{……}  以指定包含的属性值

3、css属性

# css 属性操作：
# 文本颜色：color
# 十六进制值：#FF0000
# 一个RGB值：RGB(255,2，0)
# RGBA:RGBA(255,2,0,10)  A 是透明度，等级1-10
# opacity:0.9; 单独调透明度
# 颜色的名称：red

# 文本水平对齐方式
# text-align 语法
# text-align: left;  把文本排列到左边。默认值(浏览器决定)
# text-align: right;  把文本排列到右边。
# text-align: center;  把文本排列到中间。
# text-align: justify;  实现两端对齐文本效果。

# 行高，文本内容溢出，链接下划线

# text-decoration:none 用来设置或删除文本装饰。主要用来删除链接的下划线
# line-height：200px  文本行高
# overflow: hidden;  溢出内容隐藏，scroll溢出内容加滚动条
# font-family:'字体'  字体
# font-weight: 粗细  粗细
# font-style：obligue
# text-indent:150px;  字母间距
# word-spacing:20px;  单词间距

# 背景属性：
# 背景颜色
# background-color
# 语法：background-color: 选择颜色;

 

# 背景图片：
# background-image # 默认占用不满的背景区域会重复铺图片
# 语法：background-image: url("图片路径")

# 不让图片重复平铺
# background-repeat
# 语法：background-repeat: no-repeat;
# 默认值：background-repeat:repeat (会反复平铺)
# 横铺：background-repeat:repeat-x
# 竖铺：background-repeat:repeat-y

# 背景图片位置调整
# background-position
# 语法：background-position: 10px 10px;
# age1 是距离标签左边框距离、age2 是距离标签上边框距离

# 以上操作可用一条方法完成：
# 语法:background: url("图片路径") no-repeat center 200px;

4、边框属性

 

# 边框属性
# border-width  边框宽度
# border-style(required)  边框类型：solid 实线、dashed 虚线、
# border-color  边框颜色

# 简写语法：
# border: 3px solid red;

 

5、列表属性

# 列表属性
# list-style-type  设置列表项标志的类型
# 例：list-style-type: circle;  空心圆圈

# list-style-image  将图像设置为列表项标志

# list-style-position  设置列表中列表项标志的位置

# 简写语法：
# list-style

6、dispaly

# dispaly 属性
# none  隐藏某标签(隐藏元素后不占用任何空间)
# 例：display: none;
# 备：visibility:hidden  隐藏某标签(隐藏元素后仍占用空间)

# block 内联标签转成块级标签
# 例：display: block;

# inline 块级标签转成内联标签
# 例：display: inline;

# 适用内联or块级，既能像内联一样并行显示，又能像块级一样可调宽和高(因为内联标签默认不可调宽高)
# inline-block
# 例：dispaly: inline-block

# 用inline-block做列表布局会有元素之间存在间隙的小bug，如下解决
# 选择父类标签{word-spacing: -5px; }  （把布局元素放到父类中）