目录
一、字体属性
1.1 字体大小
font-size:20px1.2 字体样式
font-family:"Chinese script",Arialtip：设置多种字体会从第一个开始找，找到有就会执行，没有就一直向后找，直到找到为止
1.3 设置行高
line-height:20px
//2倍于原本行高
line-height:2注意，只能设置其中一直值，否则后写的属性会覆盖前面的
- 当单行文本的行高等于容器高时，可实现单行文本在容器中垂直方向居中对齐
- 当单行文本的行高小于容器高时，可实现单行文本在容器中垂直居中以上任意位置的定位
- 当单行文本的行高大于容器高时，可实现单行文本在容器中垂直居中以下任意位置的定位
1.4 字体倾斜
方式一：通过<i></i>标签实现
<i>需要倾斜的文字</i>方式二：通过<em></em>标签实现
<em>需要倾斜的文字</em>方式三：通过style样式实现
//1
div{
font-style:italic
}
//2
div{
font-style:oblique
}Tip:italic和oblique都表示倾斜，不过oblique的幅度要大一点。但一般浏览器对它们的区分不是很明显
1.5 font的复合写法
- 多种属性用空格隔开，font-size/line-height这个除外，
size和family固定不可和其他属性位置互换
格式：font:font-style font-weight font-size/line-height font-family
示例：font: bold italic 30px/2 "华文行楷",Arial;font属性的简写：
font: 30px "华文行楷",Arial;二、文本属性
2.1 字体颜色
color:red;
//十六进制
color:#ffffff
//rgb
color:rgb(222,123,213)
//rgba 第4个参数代表透明度
color:rgba(222,123,213,.4)2.2 检索或设置对象中的文本的大小写
- 把文字变成全大写
text-transform: uppercase- 把文字变成全小写
text-transform: lowercase - 变成首字母大写
text-transform: capitalize - 设置文本小型大写字母
font-variant: small-caps;2.3 文本对齐方式
-
水平对齐方式：
//左对齐
text-align:left;
//右对齐
text-align:right;
//居中对齐
text-align:center;
//两端对齐
text-align:justify;-
垂直对齐方式：
vertical-align:top //上
vertical-align:bottom //下
vertical-align:middle //中设置垂直居中给的三个条件：
- 必须给容器（父元素）加上text-align:center。
- 必须给当前元素转成行内块元素（display:inline-block;）再给当前元素加上vertical-align:middle。
- 在当前元素的后面（没有回车）加上同级元素span;并对span设置属性vertical-align:middle;width:0;height:100%;display:inline-block 。
垂直居中示例代码
//样式代码
a{
display: block;
width: 199px;
height: 165px;
border-bottom: 1px solid #ededed;
text-align: center;
}
dt img{
vertical-align: middle;
}
span{
display: inline-block;
height: 100%;
width: 0;
vertical-align: middle;
}
//结构代码
<dl>
<dt>
<a href="#"> <img src="./images/img_03.jpg" alt=""><span></span></a>
</dt>
<dd>
<div class="text">
<p>乔山 家用跑步机</p>
<p>乔山 家用跑步机</p>
</div>
<strong>￥8499</strong>
</dd>
</dl>2.4 文本修饰
text-decoration:none //没有修饰
text-decoration:underline //添加下划线
text-decoration:overline //添加上划线
text-decoration:line-through //添加删除线2.5 首行缩进
text-indent:valuetip: value可以取负值； text-indent属性只对第一行起作用
2.6 字间距
letter-spacing:value;作用:控制英文字母或汉字的字距
2.7 词间距
word-spacing:value;作用：控制英文单词词距，中文字符之间用空格隔开也会起作用
三、列表属性
3.1 定义列表符号样式
list-style-type:disc //实心圆
list-style-type:circle //空心圆
list-style-type:square //实心方块
list-style-type:none //去掉列表符号3.2 使用图片作为列表符号
list-style-image:url(图片路径)3.3 自定义列表符号的位置
list-style-position:outside //外面
list-style-position:inside //里面3.4简写形式
可简写直接设置列表属性值
例如：list-style: none ; //去掉列表样式四、边框属性
4.1 复合形式
boder:1px solid red ;4.2 边框宽度
boder-width:2px;4.3 边框颜色
boder-color:red;4.4 边框样式
boder-style:solid //实线
boder-style:dashed //虚线
boder-style:dotted //点状线
boder-style:double //双线
boder-style:none //去掉边框4.5 单独设置某个方向的边框属性
border-top: //上边框
border-bottom: //下边框
border-left: //左边框
border-right: //右边框五、背景图属性
5.1 背景颜色
background-color:red5.2 背景图片
background-image:url(图片路径)5.3 背景图片的显示原则
- 背景图大于容器时超出部分被裁切
- 背景图等于容器时则完全覆盖
- 背景图小于容器时默认平铺
- 加载背景图必须有容器区域
5.4 背景图片平铺属性
background-repeat:value;value取值：
no-repeat:不平铺repeat:平铺repeat-x:横向平铺repeat-y:纵向平铺
5.5 背景图片的位置
语法：
background-position: 值1 值2；
值1为水平方向属性值，值2为垂直方向属性值tip:
水平向右 垂直向下移动 值是正数
水平向左 垂直向上移动 值是负数
例：实现水平垂直居中
background-position:center;5.6 背景图的固定
语法:
background-attachment:value;
value值为scroll //滚动
value值为fixed //固定六、浮动属性
6.1定义
float:定义网页中其它文本如何环绕该元素显示- 会让元素脱离文档流，以达到灵活布局的效果
- 属性值：left:元素浮动在文本左边；right：元素浮动在文本右边；none：默认还，不浮动
6.2清除浮动
方法一：父级添加overflow:hidden
方法二：clear:both 或者在结束标签前添加div并设置样式clear:both
方法三：万能清除浮动法
.clear::after{
content:"";
display:block;
clear:both;
height:0;
overflow:hidden;
visibility:hidden;
} 6.3示例
实现文字围绕图片效果
<style>
div{
width: 300px;
height: 300px;
border: 3px solid #000;
}
div img{
float: left;
}
</style>
<body>
<div>
<img src="images/img04.jpeg" alt="">
疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯 狂星四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四疯狂星期四 疯狂星期四疯狂星期四
</div>
</body>
240
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
