第四讲_css常用属性

css常用属性

1. css颜色表示方式
- 1.1 颜色名
- 1.2 rgb 和 rgba
- 1.3 hex 和 hexa
- 1.4 hsl 和 hsla
2. css 常用属性
- 2.1 常用的文本属性
- 2.2 常用的列表属性
- 2.3 常用的边框属性
- 2.4 表格独有属性
- 2.5 常用的背景属性
- 2.6 常用的鼠标属性

1. css颜色表示方式

1.1 颜色名

在css中定义了一些颜色名，可以直接使用颜色名来表示颜色。

选择器 {color: red;
}

点击跳转到mdn，查看css支持的颜色名

1.2 rgb 和 rgba

/* 红、绿、蓝 */
选择器 {color: rgb(186, 186, 186);
}/* 红、绿、蓝、透明度 */
选择器 {color: rgba(186, 186, 186, 0.5);
}

1.3 hex 和 hexa

/* 1-2位：代表红，范围是00-ff*/
/* 3-4位：代表绿，范围是00-ff*/
/* 5-6位：代表蓝，范围是00-ff*/
选择器 {color: #000000;
}/* 7-8位：代表透明度，范围是00-ff*/
选择器 {color: #00000011;
}

1.4 hsl 和 hsla

/* 色相：0deg ～ 360deg*/
/* 饱和度：0～100% */
/* 亮度：0～100% */
选择器 {color: hsl(色相, 饱和度, 亮度);
}/* 透明度：0～100% */
选择器 {color: hsla(色相, 饱和度, 亮度, 透明度);
}

2. css 常用属性

2.1 常用的文本属性

font-size：文字大小
font-family：字体族
font-style：字体风格
font-weight：字体粗细（取值 100-1000）
color：字体颜色
letter-spacing：字符间距（一个中文就是一个字符）
word-spacing：单词间距

text-decoration：文本装饰

/* 划线位置：overline：上划线、line-through：中划线、underline：下划线、none：不加装饰 */
/* 划线类型：dotted：虚线、wavy：波浪线 */
/* 划线颜色：支持所有颜色表示方式 */
选择器 {text-decoration: 划线位置 划线类型 划线颜色;
}

text-align：文本水平对齐
line-height：行高

vertical-align：同一行元素之间或表格单元格内文字的垂直对齐方式

/* baseline：使元素的基线与父元素的基线对齐 */
/* top：使元素的顶部与其所在行的顶部对齐 */
/* middle：使元素的中部与父元素的基线加上父元素字母x的一半对齐 */
/* bottom：使元素的底部与其所在行的底部对齐 */
/* 不能控制块元素 */
选择器 {vertical-align: 划线位置 划线类型 划线颜色;
}

text-shadow：文本阴影

<html><style>.outer {width: 500px;height: 500px;background-color: gold;/* 参数一：水平阴影的位置，必填 *//* 参数二：垂直阴影的位置，必填 *//* 参数三：模糊距离，可选 *//* 参数四：阴影的颜色，可选 */box-shadow: 10px 10px 10px red;}</style><div class="outer"></div>
</html>

white-space：文本换行方式

text-overflow：文本溢出

<html><style>.outer {width: 100px;background-color: aqua;/* 文本不换行 */white-space: nowrap;/* 溢出的用...代替 */text-overflow: ellipsis;/* text-overflow 需要设置这个属性才有效 */overflow: hidden;}</style><div class="outer">hello world hello world hello world hello world hello world hello world</div>
</html>

2.2 常用的列表属性

list-style-type：指定类别的符号类型
list-style-position：列表的符号位置
list-style-image：采用指定的图片作为列表符号

2.3 常用的边框属性

border-width：边框的宽度
border-color：边框的颜色
border-style：边框的线条类型
border-radius: 边框的圆角半径

2.4 表格独有属性

table-layout：控制表格的列宽
border-spacing：控制单元格的间距
border-collapse：合并相邻单元格的边框
empty-cells：隐藏没有内容的单元格
caption-side：设置标题的位置

2.5 常用的背景属性

background-color：设置背景色
background-image：设置背景图
background-repeat：设置背景图片重复的方式
background-positon：设置背景图片的位置

backgorund-origin：设置背景图的原点

选择器 {/* 从 padding 区域开始显示背景图（默认值）*/backgorund-origin: padding-box;/* 从 context 区域开始显示背景图 */backgorund-origin: content-box;/* 从 border 区域开始显示背景图 */backgorund-origin: border-box;
}

backgroud-clip：设置背景的向外剪裁的区域

选择器 {/* 从 border 区域外开始剪裁（默认值） */background-clip: border-box;/* 从 padding 区域外开始剪裁 */background-clip: padding-box;/* 从 content 区域外开始剪裁 */background-clip: content-box;/* 背景只呈现在文字上（text 为实验性，需要加前缀） */background-clip: text;
}

background-size：设置背景图的大小

选择器 {/* 通过长度指定背景图的大小 */background-size: 100px 100px;/* 通过百分比指定背景图的大小，相对于父元素 */background-size: 100% 100%;/* auto：默认值，背景图的真实大小 */background-size: auto;/* contain：将背景图等比例缩放，当图片的宽高比与父元素的宽高比不一样时，会出现没有背景图的区域 */background-size: contain;/* cover：将背景图等比例缩放，当图片的宽高比与父元素的宽高比不一样时，会出现背景图显示不完整 */background-size: cover;
}

多背景图

选择器 {background: url("/path") no-repeat left top, url("/path") no-repeat righttop, url("/path") no-repeat left bottom, url("/path") no-repeat rightbottom;
}