CSS样式

文章目录

Tips
选择器
样式表：
字体
文本
鼠标形状
边框
边距
伪类
- 锚伪类
背景图像
列表
表格

Tips

层叠样式表（Cascading Style Sheet）
为了方便布局，第一行一般先去除网页内置布局

*{padding: 0; margin: 0;} /*取出内外边距设置*/

当一些属性可以设置上下左右4个参数时

参数个数	代表
1	四周
2	上下、左右
3	上、左右、下
4	上、右、下、左（顺时针）

想要指定某一方向：-top -left -right -bottom

font 与 font-size 同时存在时，执行 font
同理其他多个属性合并成一句也是如此

选择器

优先级：ID选择器 > 类选择器 > 标签选择器

样式表：

优先级：行内样式 > 内部样式表 > 外部样式表
推荐外联，因为可以将代码分离，简洁明了

字体

属性	含义	值
font	在一个声明中设置以下所有字体属性	font:italic bold 36px “宋体”;
font-family	设置字体类型	“隶书”;
font-size	设置字体大小	12px;
font-style	设置字体风格	normal - 文字正常显示 italic - 文本以斜体显示 oblique - 文本为“倾斜”
font-weight	设置字体的粗细	normal - 文字正常显示 bold - 加粗
font-variant	是否以小型大写字母的字体显示文本	normal - 文字正常显示 small-caps - small-caps 字体

文本

属性	含义	值
color	设置文本颜色	颜色名 - 比如 "red" 十六进制值 - 比如 "#ff0000" RGB 值 - 比如 “rgb(255,0,0)”
text-align	设置元素水平对齐方式	center - 居中 left - 左 right - 右 justify - 每行等度，左右边距是直的
vertical-align	设置元素垂直对齐方式	middle - 居中 top - 上 bottom - 下
text-indent	设置首行文本的缩进一般是字体大小的2倍	20px;
line-height	设置文本的行高正文推荐(字体大小)1.5倍行距	number - 设置数字，行间距为此数字与当前的字体尺寸 length - 设置固定的行间距 % - 基于当前字体尺寸的百分比行间距
text-decoration	设置文本的装饰	underline - 下划线 overline - 定义文本上的一条线 line-through - 定义穿过文本下的一条线 blink - 定义闪烁的文本
text-transform	指定文中大/小写字母	uppercase - 大写 lowercase - 小写 capitalize - 大写字母开头

鼠标形状

值	说明
default	默认光标
pointer	超链接的指针
wait	是等待的效果
help	指示可用的帮助
text	指示文本
crosshair	鼠标呈现十字

边框

-top -left -right -bottom

属性	含义	值
border-width	线宽	thin - 定义细的边框 medium - 默认，定义中等的边框 thick - 定义粗的边框 length - 允许您自定义边框的宽度
border-style	线型	none - 定义无边框 hidden - 与 “none” 相同，不过应用于表时除外，对于表，hidden 用于解决边框冲突 dotted - 定义点状边框，在大多数浏览器中呈现为实线 dashed - 定义虚线，在大多数浏览器中呈现为实线 solid - 定义实线 double - 定义双线，宽度等于 border-width 的值 groove - 定义 3D 凹槽边框，其效果取决于 border-color 的值 ridge - 定义 3D 垄状边框，其效果取决于 border-color 的值 inset - 定义 3D inset 边框，其效果取决于 border-color 的值 outset - 定义 3D outset 边框，其效果取决于 border-color 的值
border-color	的颜色	颜色名 - 比如 "red" 十六进制值 - 比如 "#ff0000" RGB 值 - 比如 “rgb(255,0,0)”

边距

-top -left -right -bottom

属性	含义	值
margin	外边距	auto - 浏览器计算外边距 length - 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px % - 以包含元素宽度的百分比指定外边距
padding	内边距	auto - 浏览器计算外边距 length - 规定以具体单位计的外边距值，比如像素、厘米等。默认值是 0px % - 以包含元素宽度的百分比指定外边距

伪类

锚伪类

a:hover 必须在 CSS 定义中的 a:link 和 a:visited 之后，才能生效
a:active 必须在 CSS 定义中的 a:hover 之后才能生效
伪类名称对大小写不敏感。

伪类名称	含义
a:link	未单击访问超链接样式
a:visited	单击访问后超链接样式
a:hover	鼠标悬浮其上的超链接样式
a:active	鼠标单击未释放的超链接样式

背景图像

属性	含义	值
background	在一个声明中设置以下所有属性	background: #00FF00 url(bgimage.gif) no-repeat fixed top;
background-color	规定要使用的背景颜色	color_name - 颜色（比如 red） hex_number - 十六进制值颜色（比如 #ff0000） rgb_number - rgb颜色（比如 rgb(255,0,0)） transparent - 默认，透明
background-position	规定背景图像的位置	默认值 - 0% 0% top/center/bottom left/center/right - 仅写了1个，则默认第二个center x% y% - 水平位置，垂直位置左上0，右下100 仅写了1个，则默认第二个50% xpos ypos - xy 像素
background-size	规定背景图片的尺寸	length - 像素 percentage - 百分比 cover - 放大图像全覆盖区域，可能会有部分图像在区域外 contain - 放大图像至区域内能展现的最大值
background-repeat	规定如何重复背景图像	repeat - 默认，垂直与水平都重复 repeat-x- 在水平方向重复 repeat-y- 在垂直方向重复 no-repeat - 不重复
background-origin	规定背景图片的定位区域	padding-box - 相对于内边距框来定位 border-box - 相对于边框盒来定位 content-box - 相对于内容框来定位
background-clip	规定背景的绘制区域	border-box - 被裁剪到边框盒 padding-box - 被裁剪到内边距框 content-box - 被裁剪到内容框
background-attachment	背景图像是否固定或随页面滚动	scroll - 默认值。随着页面滚动而移动 fixed - 固定
background-image	规定要使用的背景图像	url() - 指向图像的路径 none - 默认值。不显示背景图像

列表

属性	含义	值
list-style	在一个声明中设置以下所有属性	list-style: square inside url(“sqpurple.gif”);
list-style-type	列表项标记的类型	none - 无标记 disc - 实心圆形 circle - 空心圆 square - 方点 decimal - 阿拉伯数字 upper-roman - 大写罗马数字 lower-alpha - abc upper-alpha - ABC等
list-style-image	将图像指定为列表项标记	url( )
list-style-position	列表项标记（项目符号）的位置	outside - 表示项目符号点将在列表项之外 inside - 项目符号将在列表项内

表格

属性	含义	值
border-collapse	是否将表格边框折叠为单一边框	border-collapse: collapse
text-align	设置 `<th>` 或 `<td>` 中内容的水平对齐方式	center - 居中 left - 左 right - 右
vertical-align	设置 `<th>` 或 `<td>` 中内容的垂直对齐方式	middle - 居中 top - 上 bottom - 下
padding	边框和表格内容之间的间距	px
nth-child()	斑马纹表格	tr:nth-child(even) {background-color: #f2f2f2;}