【CSS】选择器和样式

本篇博客主要介绍一下css是什么，css选择器（属性选择器、id选择器、类选择器）和一些常用的样式（文本、字体、背景等）

基础

css指层叠样式表，css主要就是将样式与表现分离
css基本格式

选择器{属性:值；}

可将样式单独抽离出来，可形成css文件，用link的形式引入即可用
引入css格式

<link rel="stylesheet" type="text/css" href="文件名.css">

采用css样式的优先级：

“行内样式”  > “<link>标记的连接式”  >  “位于<style></style>之间的内嵌式”  >   “@import导入式”

选择器

1、属性选择器

属性名{ }

2、id选择器

格式：#id名{ }

3、类选择器

.类名{ }

样式

1、字体属性

属性	描述
font-family	字体系列
font-size	字体大小
font-style	字体风格（normal：文本正常、italic：文本斜体、oblique:文本倾斜）

2、文本属性

属性	描述
color	颜色
direction	方向
text-align	对齐（水平）
vertical-align	对齐（垂直）
text-transform	英文字母大小写
line-height	行高
letter-spacing	字符间距
text-decoration	修饰,下划线
text-indent	缩进元素中文本的首航
writing-mode:tb-rl	竖排版文字

3、背景属性

属性	描述
background	简写属性，将背景属性设置在一个声明中
background-color	背景色
background-image	背景图像
background-repeat	背景图像重复
background-position	起始位置
background-attachment	背景图像是否固定或随着其余部分滚动

4、列表属性

属性	描述
list-style	简写
list-style-image	列表项标志
list-style-position	标志位置
list-style-type	标志类型（disc:实心圆、circle:空心圆、）

list-style-type

关键字	消失效果
disc	实心圆
circle	空心圆
square	正方形
decimal	1，2，3，4…
upper-alpha	A，B，C，D…
lower-alpha	a，b，c，d…
none	不显示任何符号

5、表格属性

属性	描述
border-collapse	边框是否合并
border-spacing	分割单元格边框的距离
caption	标题位置

6、链接

状态	描述
a:link	普通的、未被访问的
a:visited	已访问的
a:hover	鼠标经过
a:active	被点击时

次序规则：
a:hover必须位于a:link和a:visited之后
a:active必须位于a:hover之后