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;} |