字体属性
- 字体样式(自身电脑里的字体样式)
<style>
.font-family .one {
font-family: 'Microsoft YaHei';
}
.font-family .two {
font-family: '宋体';
}
</style>
<div class="font-family">
<div class="one">
这是微软雅黑
</div>
<div class="two">
这是宋体
</div>
</div>
- 大小
<style>
.font-size .one {
font-size: 40px;
}
.font-size .two {
font-size: 20px;
}
</style>
<div class="font-size">
<div class="one">
大大大
</div>
<div class="two">
小小小
</div>
</div>
- 粗细
取值范围是 100 —— 900
<style>
.font-weight .one {
font-weight: 900;
}
.font-weight .two {
font-weight: 100;
}
</style>
<div class="font-weight">
<div class="one">
粗粗粗
</div>
<div class="two">
细细细
</div>
</div>
- 颜色
color: red;
- 文字样式
倾斜
font-style: italic;
取消倾斜
font-style: normal;
文本属性
- 文本对齐
text-align: enter; 居中对齐
left左对齐
right右对齐
- 文本装饰
text-decoration: [值];
underline 下划线.
none 啥都没有. 可以给 a 标签去掉下划线.
overline 上划线.
line-through 删除线
- 文本缩进
text-indent: [值];
单位可以使用 px 或者 em.
使用 em 作为单位更好. 1 个 em 就是当前元素的文字大小.
- 行高
行高指的是上下文本行之间的基线距离.
行高 = 上边距 + 下边距 + 字体大小
line-height: [值];
注意: 行高等与元素高度, 就可以实现文字居中对齐
height: 100px;
line-height: 100px;
背景属性
-背景颜色
background-color: [指定颜色]
- 背景图片
background-image: url(...);
注意:
- url 不要遗漏.
- url 可以是绝对路径, 也可以是相对路径
- url 上可以加引号, 也可以不加.
- 背景平铺
background-repeat: [平铺方式]
主要取值:
repeat: 平铺
no-repeat: 不平铺
repeat-x: 水平平铺
repeat-y: 垂直平铺
默认是 repeat.;背景颜色和背景图片可以同时存在. 背景图片在背景颜色的上方
- 背景位置
background-position: x y;
参数有三种风格:
- 方位名词: (top, left, right, bottom)
- 精确单位: 坐标或者百分比(以左上角为原点)
- 混合单位: 同时包含方位名词和精确单位
注意
1.如果参数的两个值都是方位名词, 则前后顺序无关. (top left 和 left top 等效)
2.如果只指定了一个方位名词, 则第二个默认居中. (left 则意味着水平居中, top 意味着垂直居中. )
3.如果参数是精确值, 则的的第一个肯定是 x , 第二个肯定是 y. (100 200 意味着 x 为 100, y 为 200)
4.如果参数是精确值, 且只给了一个数值, 则该数值一定是 x 坐标, 另一个默认垂直居中.
5.如果参数是混合单位, 则第一个值一定为 x, 第二个值为 y 坐标. (100 center 表示横坐标为 100, 垂直居中)
- 背景尺寸
background-size: ;
1.可以填具体的数值: 如 40px 60px 表示宽度为 40px, 高度为 60px
2.也可以填百分比: 按照父元素的尺寸设置.
3.cover: 把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
4.contain把图像图像扩展至最大尺寸,以使其宽度和高度完全适应内容区域
边框属性
- 基础属性
粗细: border-width
样式: border-style, 默认没边框. solid 实线边框 dashed 虚线边框 dotted 点线边框
颜色: border-color
border-width: 10px;
border-style: solid;
border-color: green;
或者可以简写
border: 1px solid red;
可以改四个方向的任意边框.
border-top/bottom/left/right
只给上边框设为红色, 其余为蓝色.
border: 1px solid blue;
border-top: red;
- 边框会撑大盒子
使边框不再撑大盒子
* {
box-sizing: border-box;
}
- 内边距
可以给四个方向都加上边距
padding-top
padding-bottom
padding-left
padding-right
padding: 5px; 表示四个方向都是 5px
padding: 5px 10px; 表示上下内边距 5px, 左右内边距为 10px
padding: 5px 10px 20px; 表示上边距 5px, 左右内边距为 10px, 下内边距为 20px
padding: 5px 10px 20px 30px; 表示 上5px, 右10px, 下20px, 左30px (顺时针)
- 外边距
同内边距
margin: ;
- 块级元素水平居中
前提:
指定宽度(如果不指定宽度, 默认和父元素一致)
把水平 margin 设为 auto
3种写法都可
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
注意:
这个水平居中的方式和 text-align 不一样.
margin: auto 是给块级元素用得到.
text-align: center 是让行内元素或者行内块元素居中的.
另外, 对于垂直居中, 不能使用 "上下 margin 为 auto " 的方式.