CSS三大特性与属性设置-CSDN博客

本文链接：https://blog.csdn.net/m0_54412570/article/details/140052701

CSS三大特性

层叠性：当一个元素的某个样式，被设置了不同的值。会根据选择器优先级进行样式的覆盖。
继承性：元素拥有其父元素、或其祖先元素上所设置的某些样式，并优先继承离得近的。
优先级：!important > 行内样式 > ID选择器 > 类选择器 > 元素选择器 > * > 继承的样式。
- 需要计算权重，并集选择器的每一部分都是分开算的
- 从左往右，依次比较大小，当前位胜出后，后面的不再对比
- 同一级别选择器按量变算（两个类选择器都满足> 只有一个类选择器满足）

颜色

CSS中，颜色值通常以以下方式定义

RGB/RGBA - 如："rgb(255,0,0)"
- 编写方式：使用红、黄、蓝这三种光的三原色进行组合。
  - r表示红色
  - g表示绿色
  - b表示蓝色
  - a表示透明度
- 前三位的rgb形式要保持一致，要么都是0~255的数字，要么都是百分比。
十六进制 - 如："#ff0000"
- 原理通rgb ,通过红绿蓝进行组合，6个数字分3组表达 #rrggbb
- 数组取值范围是 0~f,每种光最小值是00，最大值是ff
颜色名称 - 如：红色：red、绿色：green
- 编写方式：直接使用颜色对应的英文单词，编写比较简单，
- 颜色参考地址1： https://developer.mozilla.org/zh-CN/docs/Web/CSS/named-color
- 颜色参考地址2： https://www.runoob.com/cssref/css-colors.html

长度单位

px 像素。
em 相对元素 font-size的倍数。
rem 相对字体大小，html 标签就是根。
% 相对父元素计算。
CSS中设置长度，必须加单位，否则样式无效

背景

Property	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
}

body {background:#ffffff url('img_tree.png') no-repeat right top;}

background
- 当使用简写属性时，属性值的顺序为：
  - background-color
  - background-image
  - background-repeat
  - background-attachment
  - background-position
background-color
- transparent 透明。这是默认的。
- “color” 各种颜色
background-attachment
- scroll 背景图片随着页面的滚动而滚动，这是默认的。
- fixed 背景图片不会随着页面的滚动而滚动。
- local 背景图片会随着元素内容的滚动而滚动。
- initial 设置该属性的默认值。
- inherit 指定 background-attachment 的设置应该从父元素继承。
background-position
- 值往往是双值，一个水平方向，一个竖直方向。
- left top center bottom right ，（如left top）, 如果只写一个，另外一个默认是center
- x% y%，第一个值是水平位置，第二个值是垂直。左上角是0％0％。右下角是100％100％。如果仅指定了一个值，其他值将是50％。 默认值为：0％0％
background-repeat
- repeat 背景图像将向垂直和水平方向重复。这是默认
- repeat-x 只有水平位置会重复背景图像
- repeat-y 只有垂直位置会重复背景图像
- no-repeat 不会重复
- inherit 从父元素继承

字体

font	在一个声明中设置所有的字体属性
font-family	指定文本的字体系列
font-size	指定文本的字体大小
font-style	指定文本的字体样式
font-variant	以小型大写字体或者正常字体显示文本。
font-weight	指定字体的粗细。

font-size
- Chrome浏览器支持的最小文字为12px,默认的文字大小为16px,并且8px会自动消失
- 不同浏览器默认的字体大小可能不一致，所以最好给一个明确的值，不要用默认大小
- 通常给body设置font-size属性，这样body中的其他元素就都可以继承了
font-style
- normal 默认值。标准的字体样式
- italic 斜体的字体样式
- oblique 倾斜的字体样式
- inherit 从父元素继承字体样式
font-weight
- normal 默认值。定义标准的字符。
- bold 定义粗体字符。
- bolder 定义更粗的字符（多种字体不支持）。
- lighter 定义更细的字符。
- (100~900) 无单位，数值越大，字体越粗。400等同于normal,而700等同于bold。
- inherit 规定应该从父元素继承字体的粗细。

文本

color 文本颜色，常用 rgb/rgba 值或16进制值
letter-spacing 字母间距 属性值为像素（px），正值让间距增大，负值让间距缩小
word-spacing 单词间距 属性值为像素（px），正值让间距增大，负值让间距缩小
text-decoration 文本修饰
- none：无装饰线（常用）
- underline：下划线（常用）
- overline：上划线
- line-through：剃除线
text-indent 文本缩进 属性值为css长度单位，例如：px
text-align 文本对齐方式
- left：左对齐（默认值）
- right：右对齐
- center：居中对齐
line-height 行高
- normal : 由浏览器根据文字大小决定的一个默认值。
- 像素(px)
- 数字：参考自身font-size的倍数（很常用）。
- 百分比：参考自身font-size的百分比。
- 文字在一行中，并不是绝对垂直居中，若一行中都是文字，不会太影响观感。
- line-height 过小 ,文字会产生重叠，且最小值是0，不能为负数。
- line-height是可以继承的，且为了能更好的呈现文字，最好写数值。
- line-height和height 关系：
  - 设置了height,那么高度就是height的值。
  - 不设置height的时候，会根据line-height计算高度。
  - 让height等于line-height,可以实现文字垂直居中。
vertical-align 同一行元素之间，或表格单元格内文字的重直对济方式
- baseline（默认值）：使元素的基线与父元素的基线对齐。
- top：使元素的顶部与其所在行的顶部对齐。
- middle：使元素的中部与父元素的基线加上父元素字母×的一半对齐。
- bottom：使元素的底部与其所在行的底部对齐。

列表

列表相关的属性，可以作用在u1、o1、li元素上，
list-style-type 设置列表符号
- none:不显示示前面的标识
- square:实心方块
- disc:圆形
- decimal:数字
- lower-roman:小写罗马字
- upper-roman:大写罗马字
- lower-alpha:小写字母
- upper-alpha:大写字母
list-style-position 设置列表符号的位置
- inside:在li的里面
- outside:在li的外边
list-style-image 自定义列表符号
- url（图片地址）
list-style 复合属性
- 属性值没有数量、顺序的要求