1.字体样式
代码 | 作用 |
---|---|
font-family | 字体选择 |
font-size | 字体大小 |
font-weight | 字体粗细 |
font-style | 字体样式 |
- 速写形式
font:style weight size/line-height family;
- 网络字体
主要用于字体图标库(iconfont/fontawesome)
使用步骤:
1) 在iconfont网站中选择图标,加入项目,产生代码
2) 将产生的代码在html中通过link引用
3) 应用css中定义好的类,来使用对应的图标
2.文字样式
注:可以被继承
- color:字体颜色
- text-align:字体摆放位置
- text-decoration:字体装饰
代码 | 含义 |
---|---|
text-decoration-line (underline、line-through、overline、none) | 字体装饰线 |
text-decoration-style (solid、dotted、double、dashed) | 字体装饰线的样式 |
text-decoration-color | 字体装饰线的颜色 |
- text-indent: 文本缩进
- text-shadow: 字体阴影
写法:离左边多远 离上方多远 模糊程度 阴影颜色
3.列表样式
- list-style:列表样式
代码 | 含义 |
---|---|
list-style-type | 设置列表项标记的类型 |
list-style-position | 设置在何处放置列表项标记 |
list-style-image | 使用图像来替换列表项的标记 |
4.盒子样式
1)一个盒子的组成
外边距 margin
边框 border
内边距 padding
内容 存放子元素或者内容的区域
2)盒子样式
- width:宽度
- height:高度
- margin: 外边距
margin:10px; 上右下左
margin:0 10px; 上下为0,左右10px
margin:0 5px 10px; 上0,左右5px,下10px
margin:0 5px 10px 15px; 上右下左
- border: 边框
速写:border:1px solid #ededed;
代码 | 含义 |
---|---|
border-style | 边框线类型 |
border-width | 边框宽度 |
border-color | 边框线颜色 |
- box-shadow:边框阴影
速写: 离左边多远 离上方多远 模糊程度 什么颜色的阴影
box-shadow:5px 5px 10px #ccc;
- border-radius:圆角边框
- backgroud:背景样式
速写:bakgroud: #00FF00 url(bgimage.gif) no-repeat fixed top;
代码 | 含义 |
---|---|
background-origin | 背景铺设的起点 |
background-image | 背景图片 |
background-repeat | 背景重复方式 |
background-color | 背景颜色 |
background-position | 背景位置 |
background-clip | 背景裁切方式 |
- 盒子计算方式
box-sizing:content-box;内容盒子(传统盒子)
width = 内容宽
height = 内容高
所占的宽 = border + padding + width
所占的高 = border + padding + height
box-sizing:border-box;边框盒子(怪异盒子)
width = 边框以内所有的和
width = border + padding + 内容宽