CSS 各类属性与浮动
各类属性
尺寸、字体及文本属性
CSS 尺寸属性
- width:元素宽度,一定要加px单位。
- height:元素高度。
CSS 字体属性
- font-size:文字大小。如:font-size:14px;
- font-family:字体。如:font-family:微软雅黑;
- font-style:斜体,取值:italic。如:font-style:italic;
- font-weight:粗体,取值:bold。如:font-weight:bold;
CSS文本属性
- color:文本颜色
- text-decoration:文本修饰线,取值:none(无)、underline(下划线)、overline(上划线)、line-through(删除线)
- text-align:文本水平对齐方式,取值:left、center、right
- line-height:行高,可以用固定值,也可以用百分比。如:line-height:24px; line-height:150%;
- text-indent:首行缩进。如:text-indent:28px;
- letter-spacing:字间距。
实例如下
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
h1{
color:red;
width:350px;
text-align:center;
font-family:微软雅黑;
}
p{
line-height:150%;
text-indent:28px;
font-family:楷体;
}
.box{
font-style:italic;
font-weight:bold;
text-decoration:underline;
}
</style>
</head>
<body>
<h1>主席中的互联网</h1>
<p>互联网是20世纪最伟大的发明,它正在将人类“<span class="box">一网打尽</span>”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>
列表及边框属性
CSS 列表属性
项目符号或编号前面的各种符号无法改变样式,所以在实际中我们一般不用。
- list-style:列表样式,取值:none。去掉项目符号或编号前面的各种符号。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
ul,li{list-style:none;}/*去掉前面的符号*/
</style>
</head>
<body>
<ul>
<li>HTML+CSS</li>
<li>JavaScript</li>
<li>MySQL</li>
<li>PHP</li>
</ul>
</body>
</html>
CSS 边框属性:每个元素都可以加边框线
-
border-left:左边框线。
-
格式:border-left:粗细 线型 线的颜色;
-
线型:none(无线)、solid(实线)、dashed(虚线)、dotted(点状线)
-
举例:border-left:5px dashed red;
-
border-right:右边框线。
-
border-top:上边框线。
-
border-bottom:下边框线。
-
border:同时给四个边加边框线。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
background-color:#66ff66;
width:200px;
height:200px;
border-left:6px solid red;
border-right:3px dashed blue;
border-top:5px dotted black;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
内边距和外边距属性
CSS 内边距属性
边框线到内容间的距离
注:平常我们所说的width和height属性,它们指内容的宽度和高度,不含内、外边距、边框线。
-
padding-left:左内填充距离,左边线到内容间的距离。
-
padding-right:右内填充距离,右边线到内容间的距离。
-
padding-top:上内填充距离,上边线到内容间的距离。
-
padding-bottom:下内填充距离,下边线到内容间的距离。
-
缩写形式
-
padding:10px; //四个边的内填充分别为10px
-
padding:10px 20px; //上下为10px,左右为20px
-
padding:5px 10px 20px; //上为5px,左右为10px,下为20px
-
padding:5px 10px 15px 20px; //顺序一定是“上右下左”
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
border:1px solid red;
background-color:#f0f0f0;
width:300px;
padding:20px;
}
</style>
</head>
<body>
<div class="box">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。
</div>
</body>
</html>
CSS外边距属性
边线往外的距离
-
margin-left:左边线往外的距离。
-
margin-right:右边线往外的距离
-
margin-top:上边线往外的距离。
-
margin-bottom:下边线往外的距离。
-
缩写形式
-
margin:10px; //四个外边距分别为10px
-
margin:10px 20px //上下外边距10px,左右外边距20px
-
margin:5px 10px 15px; //上外边距5px,左右外边距10px,下外边距15px
-
margin:5px 10px 15px 20px; //顺序一定是“上右下左”
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
border:1px solid red;
background-color:#f0f0f0;
width:300px;
margin:20px;
}
</style>
</head>
<body>
<div class="box">互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。
</div>
</body>
</html>
注:padding和margin容易混淆,请大家仔细观察两个例子在输出上的区别
背景属性
CSS 背景属性
-
background-color:背景颜色。
-
background-image:背景图片地址。如:background-image:url(images/bg.gif)
-
background-repeat:背景平铺方式,取值:no-repeat(不平铺)、repeat-x(水平方向)、repeat-y(垂直方向)
-
background-position:背景定位。格式:background-position:水平方向定位 垂直方向定位;
-
用英文单词定位:background-position: left|center|right top|center|bottom;
-
用固定值定位:background-position: 50px 50px; //背景距离容器的左边50px,容器顶端50px
-
用百分比定位:background-position: 50% 50%; //水平居中,垂直居中
-
用混合定位:background-position: left 10px; //背景靠左边齐,距离容器顶端10px
简写方式
-
background:背景色 背景图 平铺方式 定位方式;
-
举例:background:url(images/bg.gif) no-repeat center center;
-
举例:background: #ccc url(images/bg.gif) no-repeat left 10px;
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box1{
background-color:#f0f0f0;
width:400px;
}
.box2{
background-image:url(http://img1.imgtn.bdimg.com/it/u=1182781053,1047826690&fm=21&gp=0.jpg);
background-repeat:no-repeat;
background-position:center center;
width:400px;
height:400px;
}
</style>
</head>
<body>
<div class="box1">
<h1>主席心中的互联网</h1>
<p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</div>
<div class="box2">
</div>
</body>
</html>
浮动
CSS浮动
- float:让元素浮动,取值:left(左浮动)、right(右浮动)
- 浮动的元素,将向左或向右浮动,浮动到包围元素的边上,或上一个浮动元素的边上为止。
- 浮动的元素,不再占空间了,并且,浮动元素的层级要高于普通元素。
- 浮动的元素,一定是“块元素”。不管它原来是什么元素。
- 如果浮动的元素,没有指定宽度的话,浮动后它将尽可能的变窄。因此,浮动元素一般要定宽和高。
- 一行的多个元素,要浮动一起浮动。
浮动的功能:可以实现将多个块元素并列排版。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
.box{
width:350px;
height:400px;
background-color:#f0f0f0;
}
.box1{
width:50px;
height:50px;
background-color:#ff0000;
float:left;
}
.box2{
width:50px;
height:50px;
background-color:#00ff00;
float:left;
}
.box3{
width:50px;
height:50px;
background-color:#0000ff;
float:left;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">ppqppl.ltd</div>
<div class="box2">ppqppl.ltd</div>
<div class="box3">ppqppl.ltd</div>
</div>
</body>
</html>
问:如何让包围元素,包住浮动元素?
这时我们就需要在浮动元素的下边,使用清除浮动操作。
CSS清除浮动的两个功能:
(1)可以包围元素从“视觉上”包住浮动元素
(2)清除之下的其它元素将恢复默认排版。
注:
有浮动,就得有清除。如果包围元素指定了高度了,那么可以不使用清除功能。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>php.cn</title>
<style type="text/css">
img{
width:200px;
float:left;
}
.clear{clear:left;}
</style>
</head>
<body>
<h1>主席心中的互联网</h1>
<p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
<img src="http://img.kanzhun.com/upload/image/20150616/ccd02d7d2bcf7451de277579c453ccde.jpg" >
<div class="clear"></div>
<p>互联网是20世纪最伟大的发明,它正在将人类“一网打尽”,人们在不知不觉中已经融入了互联网生态,互联网让世界变成了“鸡犬之声相闻”的地球村。</p>
</body>
</html>