CSS基础-常见属性（二）

6、CSS三大特性

6.1 层叠性

如果样式发生冲突，则按照优先级进行覆盖。

6.2 继承性

元素自动继承其父元素、祖先元素所设置的某些元素，优先继承较近的元素。

6.3 优先级

6.3.1 简单分级

• 1、内联样式
• 2、ID选择器
• 3、类选择器/属性选择器
• 4、标签名选择器/伪元素选择器
• 5、通配符选择器/子代选择器
• 6、继承样式

6.3.2 复杂分级

格式：（a, b, c），从左到右依次比较，全部相同则后"来者居上"，以后面的属性为主。

字母	含义
a	ID选择器的个数
b	类、伪类、属性选择器的个数
c	元素、伪元素选择器的个数

<style>/* (1, 3, 5) */div.containter>li div.info a#top1>span:nth-child(1) {color: red;}/* (1, 1, 2) */a#top1>span:nth-child(1) {color: green;}/* 在属性值后面若有!important,则该属性优先级最高 */span.title {color: pink !important;}
</style>

• 注意：
  • 行内样式权重大于所有选择器；
  • !important的权重大于所有选择器（包括行内选择器）

7、颜色

7.1 常见颜色写法

<style>div {font-size: 50px;}/* 以名称定色 */.one {color: red;}/* 以rgb定色 */.two {color: rgb(0, 255, 0);}/* 以rgba变色 */.three {color: rgb(0, 255, 0, 50%);}/* HEX变色 */.four {color: #0000ff;}/* HEXA变色 */.five {color: #0000ff0f;}
</style>

7.2 色相环

• 颜色分布

<style>div {font-size: 50px;}/* hs1(色相, 饱和度, 亮度)  角度 饱和度 亮度*/.one {color: hsl(180, 100%, 50%);}/* hs1a(色相, 饱和度, 亮度, 透明度)  角度 饱和度 亮度 透明度*/.one {color: hsla(180, 100%, 50%, 30%);}
</style>

8、CSS常见属性

8.1 字体属性

8.1.1 字体大小

<style>/* 调整字体大小为20px */.one {font-size: 20px;}
</style>

• 有时将字体设置的过大或者过小会有个限制，这是浏览器的设置导致的。

8.1.2 字体族

• 查看电脑自带字体，或者下载ttf字体文件

<style>/* 调整字体大小为20px */div {font-size: 20px;}.one {font-family: "楷体";}/* 从前到后选择字体，不符合依次向下依赖，都没有则选择默认 */.two {font-family: "华文彩云", "微软雅黑";}.three {font-family: "宋体";}
</style>

8.1.3 字体风格

<style>/* 调整字体大小为20px */div {font-size: 20px;}/* 默认 */.one {font-style: normal;}/* 斜体，使用字体自带的斜体。推荐 */.two {font-style: italic;}/* 斜体。强制倾斜产生的效果 */.three {font-style: oblique;}
</style>

8.1.4 字体粗细

<style>/* 加细 */.one {font-weight: light;}/* 正常 */.two {font-weight: normal;}/* 加粗 */.three {font-weight: bold;}/* 加粗再加粗，由于默认字体只有三种粗细，所以和加粗字体粗细一致 */.four {font-weight: bolder;}/* 以数值控制，还是依赖于字体 */.five {font-weight: 100;}
</style>

8.1.5字体复合属性

<style>.top1 {font: bold italic 100px "STCaiyun";}
</style>

8.2 文本属性

8.2.1 文本颜色

• 使用上面的color属性即可。

8.2.2 文本间距

属性值为px，正值让间距变大，负值让间距变小。

<style>/* 调整所有字母之间的间距 */div:nth-child(2) {letter-spacing: 20px;}/* 调整单词之间的距离，以空格为准 */div:nth-child(3) {word-spacing: 30px;}
</style>

8.2.3 文本类型

<style>/* 设置上划线类型与颜色 */div:nth-child(1) {text-decoration: overline dotted red;}/* 设置下划线类型与颜色 */div:nth-child(2) {text-decoration: line-through wavy blue;}/* 设置下划线 */div:nth-child(3) {text-decoration: underline;}/* 去除下划线 */a,ins,del {text-decoration: none;}
</style>

8.2.4 文本缩进

• text-indent: 距离; 属性值为CSS的长度单位。例如px。

8.2.5 文本对齐

• 水平对齐

<style>/* 左对齐 */div:nth-child(1) {text-align: left;}/* 居中对齐 */div:nth-child(2) {text-align: center;}/* 右对齐 */div:nth-child(3) {text-align: right;}
</style>

• 垂直对齐

vertical-align：用于指定同一行元素之间，或表格单元格内文字的垂直对齐方式。（不能控制块元素）

常用值：

• baseline：默认值，使元素的基线与父元素的基线对齐；
• top：使元素的顶部与其所在行的顶部对齐；
• middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐；
• bottom：使元素的底部与其所在行的底部对齐。

<style>*  {font-size: 40px;}/* 只对单行文字生效 *//* 1、顶部对齐，默认即为顶部对齐 *//* 2、居中对齐，height=line-height *//* div {background-color: aqua;height: 80px;line-height: 80px;} *//* 3、底部对齐line-height=(height×2)-font-size -x，x的值依据字体族的大小而定 */div {background-color: aqua;height: 60px;line-height: 50px;}
</style>

8.2.6 文本行高

<style>/* 默认行高 *//* div {line-height: normal;} *//* 直接写行高像素大小 *//* div {line-height: 60px;} *//* 1.5倍行高 *//* div {line-height: 1.5;} *//* 默认行高的150% */div {line-height: 150%;}
</style>

注意事项：

• line-height过小文字会产生重叠，最小值为0，不能为负数；
• line-height可以继承，最好采用倍数写法
• line-height等于height可以实现文字的垂直居中，但并不是绝对的垂直居中。

8.3 各类元素的属性

8.3.1 列表

<style>ul {/* 去除列表前面的符号 */list-style-type: none;/* 将列表元素放入外部 */list-style-type: outside;/* 自定义列表符号 */list-style-image: url(../imgs/加载环.gif);/* 复合属性 */list-style: decimal inside url(../imgs/加载环.gif);}
</style>

8.3.2 表格

• 表格边框：

除了表格边框，其他元素边框也可如此书写。

如：

​ div {

​ border: 2px aqua solid;

​ }

<style>table {/* 控制表格边框宽度 *//* border-width: 2px; *//* 控制表格边框颜色 *//* border-color: aqua; *//* 控制表格边框风格 *//* border-style: dashed; *//* 复合写法 */border: 2px aqua solid;}th,td {border: 2px orange solid;}
</style>

• 表格特有属性，即只有table可以使用

<style>table {border: 1px blue solid;/* 自动设置列宽度，默认 *//* table-layout: auto; *//* 平均分割表格 */table-layout: fixed;/* 设置单元格之间的间距，在不合并的前提下生效 */border-spacing: 10px;/* 合并单元格的边框 */border-collapse: collapse;/* 隐藏没有内容的单元框 */empty-cells: hide;/* 设置表格标题的位置 */caption-side: top;}th,td {border: 1px orange solid;}
</style>

8.3.3 背景

background	功能	属性值
background-attachment	背景图像是否固定或者随着页面的其余部分滚动。	scroll：默认值。背景图片随着页面的滚动而滚动，相对于元素本身固定，而不是随着它的内容滚动； fixed：此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动； local：背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，同时背景图图片随着页面的滚动而滚动。
background-color	设置元素的背景颜色。	设置背景颜色，默认背景颜色为transparent。
background-image	把图像设置为背景。	通过url设置背景照片。
background-position	设置背景图像的起始位置。	关键字设置： 水平：left、center、right； 垂直：top、center、bottom； 若只写一个值，则另一方向默认为center 通过长度： 以元素左上角为原点，只写一个值y取center、另一个值为x
background-repeat	设置背景图像是否及如何重复。	水平：left、center、right； repeat-x：只在水平方向重复； repeat-y：只在垂直方向重复； no-repeat：不重复。
background	复合属性。	没有顺序要求。

8.3.4 鼠标

属性名	功能	常见属性值
cursor	设置鼠标光标的样式。	pointer：手； move：移动图标； text：文字选择器； crosshair：十字架； wait：等待图标； help：帮助。

<style>div {height: 400px;width: 400px;background-color: aqua;cursor: wait;}
</style>// 除了使用官方提供的图标，还可以自己使用图标设置
cursor: url(./arrow.png), pointer;

相关代码地址：https://gitee.com/justinc666/web/tree/master/CSS常用属性