css基本样式

css样式

引入外部css样式

<link rel="stylesheet" href="my.css">

常用字体属性

属性名	含义
font-family	设置字体
font-size	设置字体大小
font-style	设置字体风格
font-wight	设置字体粗细
font	在一个声明中设置所有字体属性

font-weight 属性值	说明
normal	默认标准字体宽度
bold	粗体
bolder	更粗的字体
lighter	更细的字体
100,200,...,900	定义由细到粗的字体

排版网页文本

属性	含义
color	设置文本颜色
text-align	设置元素水平对齐方式
text-indent	设置首行文本缩进
line-height	设置文本的行高
text-decoration	设置文本的装饰

text-align 属性常用值	说明
left	把文本排列到左边，默认
right	把文本排列到右边
center	把文本排列到中间
justify	实现两端对齐文本效果

vertical-align 设置垂直方向对齐方式
text-shadow 设置文本阴影

text-decoration常用值	说明
none	默认，定义的标准文本
underline	设置文本的下划线
overline	设置文本上划线
line-through	设置文本的删除线

超链接样式

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

列表样式

list-style-type 常用属性值	说明
none	无标记符号
disc	实心圆，默认
circle	空心圆
square	实心正方形
decimal	数字

当实际使用设置列表无标记符可以设置为list-style：none

背景样式

背景属性	说明
background-color	背景颜色
background-image	背景图片

背景重复方式	说明
repeat	沿水平和垂直方向平铺
no-repeat	不平铺
repeat-x	只沿水平方向平铺
‘repeat-y`	只沿垂直方向平铺

background-position 属性对应的取值	含义
Xpos Ypos	水平位置和垂直位置
X% Y%	使用百分比表示背景颜色的位置
X Y 方向关键字	使用关键字表示背景的位置，水平关键字有left center right，垂直方向关键字top center bottom

背景尺寸

background-size 取值	说明
auto	使背景图片保持原样
percentage	相对于元素宽度计算高度和宽度
cover	背景图片放大填充到整个
contain	让背景图片保持本身的宽高比例填充到所定义的背景的区域

css选择器

选择器	示例
标签选择器	p{font-size:16px;color:blue;}
类选择器	.className{font-size:16px;}
ID选择器	#id{font-size:16px;}