全部章节 >>>>
本章目录
5.1 字体及文本属性
5.1.1 字体属性
CSS3 的字体属性用于定义字体类型、字号大小以及字体是否加粗等。
| 属性名 |
说明 |
举例 |
| font |
设置字体的所有样式属性 |
font:bold 12px 宋体 |
| font-family |
定义字体类型 |
font-family: 宋体 |
| font-size |
定义字体大小 |
font-size:12px |
| font-weight |
定义字体的粗细 |
font-weight:bold |
| color |
字体颜色 |
color:red;( 颜 色 取 值 可 以 为颜 色 的 英 文 单 词， 也 可 以 采 用#000000-#FFFFFF 之间的取值） |
示例：
<body>
<p><span class="ico">¥</span><span class="money">100</span></p>
<p class="condition">满999元可用</p>
<p class="message">荣耀自营部分手机商品</p>
</body>
<style type="text/css">
p{
font-family:"微软雅黑";
}
.ico{
color:red;
}
.money{
font-size:28px;
font-weight:bolder;
color:red;
}
.condition{
color:#ACABAB;
}
</style>
5.1.2 文本属性
文本属性用于定义文本的外观，包括文本颜色、行高、对齐方式以及字符间距等。
| 属性名 |
说明 |
应用场景 |
| line-height |
设置行高（即行间距），常用取值为 25px、28px |
布局多行文本 |
| text-align |
设 置 对 齐 方 式， 常 用 的 取 值 为left、right 以及 center |
各种元素对齐 |
| letter-spacing |
设 置 字 符 间 距， 常 用 的 取 值 为3px、8px |
加大字符间间隔 |
| text-ecoration |
设 置 文 本 修 饰， 常 用 的 取 值 为underline（下划线）、none |
加下划线，中划线等 |
示例：
<div id="container">
<h1><span>会买</span>专辑</h1>
<table>
<tr><td>
<div class="title">口感鲜嫩弹牙，时令小龙虾抢先尝</div>
<hr/>
<div class="message">又是一年一度的小龙虾季，街边的烧烤摊......</div>
<div class="price">
<span class="now">¥199</span>
<span class="cost">¥256</span>
</div>
</td>
<td><img src="Images/1.jpg"/></td>
</tr>
</table>
</div>
<style type="text/css">
#container{width:1100px;font-family:"微软雅黑"; }
#container h1{text-align:center;letter-spacing:5px;}
#container h1 span{color:orange;}
#container div.title{font-size:20px;color:orange;}
#container div.message,#container div.price{line-height:30px;}
#container span.cost{text-decoration:line-through;color:gray;}
#container span.now{font-size:28px;font-weight:bolder;color:red;}
</style>
5.2 边距和填充
CSS3 边距属性 margin 用于设置元素周围的边界宽度，主要包括上下左右 4 个边界的距离设置。填充属性padding 也称为补白属性，用于设置边框和元素内容之间的间隔，同样包括上、下、左、右 4 个方向的值。
5.2.1 边距
边距是指页面中元素与元素之间的间距，margin 分为上、下、左、右 4 个方向，可以单独设置 margin-top、margin-left、margin-right、margin-bottom，也可以使用复合属性 margin 进行设置。
使用复合属性 margin 设置边距时，存在 4 种方式。
仅设置1个值，则应用于所有的四个边距。
设置2个值，则表示上下、左右边距。
设置 3 个值，则对应上、左右、下边距。
设置4个值，则按照上、右、下、左的顺序分别对应其边距。
示例：
<body>
<a href="#">秒杀</a>
<a href="#">优惠券</a>
<a href="#">PLUS会员</a>
<a href="#">闪购</a>
<span>|</span>
<a href="#">拍卖</a>
<a href="#">京东服饰</a>
<a href="#">京东超市</a>
<a href="#">生鲜</a>
<span>|</span>
<a href="#">全球购</a>
<a href="#">京东金融</a>
</body>
<style type="text/css">
a,span{
font:500 14px "微软雅黑";
color:gray;
margin:10px 5px;
}
a{
text-decoration:none;
}
a:hover{
color:red;
}
</style>
5.2.2 填充
元素的填充也称为内边距，它是指元素内容与边框之间的距离，填充分为上、下、左、右四个方向，可通过padding-top、padding-left、padding-right、padding-bottom分别设置四个方向的内边距，也可以通过复合属性padding设置。
示例：
<div id="adv">
<div class="title">雷神911黑幽灵</div>
<div class="msg">新品首发六期免息</div>
<div class="image"><img src="Images/computer.png"/></div>
</div>
<style type="text/css">
#adv{
height:230px;
width:200px;
background-color:#E0DEDE;
padding:20px 0px 0px 20px;
font-family:"微软雅黑";
}
#adv div.title{font-size:16px;font-weight:bold;}
#adv div.msg{font-size:12px;color:red;}
#adv div.image{
padding-left:70px;
padding-top:20px;
}
</style>
5.3 边框属性
5.3.1 border 属性
边框是网页元素经常使用的样式效果，使用border属性设置 CSS3 的边框样式。
CSS3 常见的边框属性有 border-style 属性、border-width 属性、border-color 属性和复合属性 border 属性。
| 属性名 |
说明 |
示例 |
| border-style |
设置边框的样式，取值：none 无边框、solid 实线以及 dashed 虚线等 |
border-style:solid |
| border-width |
设置边框的宽度 |
border-width:1px |
| border-color |
设置边框的颜色 |
border-color:red border |
| border |
复合属性，用于设置边框宽度、样式以及颜色 |
border:1px solid red |
示例：
<div id="login">
<form action="" method="post">
<div class="row"><input type="text" placeholder="邮箱/用户名/已验证的手机" class="txt"/></div>
<div class="row"><input type="password" placeholder="密码" class="txt"/></div>
<div class="row"><input type="submit" value="登 录" class="btn"/></div>
</form>
</div>
<style type="text/css">
#login{width:280px;height:auto;padding:10px;
border:1px solid lightgray;
}
#login .row{margin:20px 0px;}
#login .row .txt{width:250px;height:30px;
border:1px solid lightgray;
padding-left:10px; }
#login .row .txt:hover{ border-color:red; }
#login .row .btn{width:262px;height:32px;
background-color:red;
color:white;
border:0px; }
</style>
5.3.2 border-radius 属性
在目前网页设计中经常会使用边框，但为了更好的设计效果，不会直接使用默认的直角边框，而是采用圆角边框。
在css3.0中，又添加了一个新的属性border-radius，使用border-radius这个属性可以实现圆角边框的效果。border-radius属性通过设置圆角的半径实现圆角边框，其中半径的像素值越大，圆角边框的效果越明显。
| 语法 |
说明 |
| border-radius：参数 1 |
参数 1：4 个角 |
| border-radius：参数 1 参数 2 |
参数 1：左上角、右下角 参数 2：左下角、右上角 |
| border-radius：参数 1 参数 2 参数 3 |
参数 1：左上角 参数 2：左下角、右上角 参数 3：右下角 |
| border-radius：参数 1 参数 2 参数 3 参数 4 |
4个参数对应左上角、右上角、右下角和左下角 |
示例：
<div id="container">
<div class="brand">一加&360</div>
<div class="happy">狂欢专场</div>
<div class="msg">抢618大额神劵</div>
<div class="msg">爆款手机低至5折</div>
</div>
……
#container .msg{
font-size:32px;
height:50px;
line-height:50px;
background-color:white;
color:red;
border-radius:25px;
width:300px;
margin:5px auto;
}
……
5.4 列表属性
在网页中，经常会出现菜单和新闻列表，而菜单和新闻列表均是通过列表所实现的。
5.4.1 列表属性
列表属性主要用于设置列表项的样式，包含 list-style-type 属性、list-style-image 属性、list-style-position属性和 list-style 属性。
| 属性名 |
说明 |
| list-style-type |
用于设定列表项的符号，取值：None（无）、Disc（实心圆）、Circle（空心圆）、Square（实心方块）。 |
| list-style-image |
用于设定图像作为列表项目符号，其值为图像对应的url。 |
| list-style-position |
用于设定项目符号在列表项的位置，取值：inside、outside（默认值）。 |
| list-style |
复合属性，用于设置列表属性，其顺序为：list-style-type、list-style-position、list-style-image。 |
示例：
<h1>购买咨询</h1>
<ul>
<li><a href="#">下单后可以修改订单吗？</a></li>
<li><a href="#">订单如何取消？</a></li>
<li><a href="#">无货商品几天可以到货？</a></li>
<li><a href="#">合约机是什么？</a></li>
<li><a href="#">合约机资费如何计算？</a></li>
<li><a href="#">如何联系商家？</a></li>
<li><a href="#">可以开发票吗？</a></li>
</ul>
ul{
list-style-image:url(Images/arrow.png);
}
ul li{
height:30px;
line-height:30px;
}
ul a{
color:gray;
text-decoration:none;
}
ul a:hover{
color:orange;
}
5.4.2 垂直菜单的实现
菜单是每个页面必不可少的部分，用于方便用户以最快、最简单的方式到达需要浏览的网页，同时也方便用户一目了然地发现网站的主要信息。
目前主流的网站所使用的菜单主要是：
横向菜单
垂直菜单
弹出式菜单
垂直菜单效果
分析页面菜单结构：
<div id=”menu”>
<h3></h3>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
添加页面内容
<div id=”menu”>
<h3>常见问题分类</h3>
<ul>
<li><a href=”#”>购物指南</a></li>
<li><a href=”#”>订单百事通</a></li>
<li><a href=”#”>配送方式</a></li>
<li><a href=”#”>支付问题</a></li>
<li><a href=”#”>发票问题</a></li>
<li><a href=”#”>售后服务</a></li>
<li><a href=”#”>账户及会员</a></li>
<li><a href=”#”>特色服务</a></li>
</ul>
</div>
设置页面中各元素的样式效果
1）清除页面中各元素默认的内外边距。部分标签存在默认的内外边距，如p标签、h1-h6标签、ul标签和li标签，这些默认的空白距离，会干扰页面的布局设计，因此可通过“*”选择器消除页面中所有元素的空白距离。
*{
padding:0px;
margin:0px;
}2）设置外层div的样式属性。根据观察可知，只需要设置其宽度即可。
#menu{
width:200px;
}3）设置“常见问题分类”标题的样式属性。根据呈现效果可知，需要设置其宽度、高度、字体颜色、背景颜色以及对其方式。
#menu h3{
width:100%;
height:40px;
line-height:40px;
text-align:center;
color:white;
background-color:#6AD08C;
}4）设置每个菜单项的样式属性。根据显示效果可知，设置ul标签的样式属性，取消列表项之前的项目符号，并设置li标签的宽度、高度、背景颜色以及底部的外边距等，当鼠标经过时，还需要改变其背景颜色，可通过伪类实现。
#menu ul{list-style-type:none;}
#menu ul li{
width:100%;
height:40px;
line-height:40px;
background-color:#EBEBEB;
margin-bottom:1px;
}
#menu ul li:hover{background-color:#CDCBCB;}5）设置每个菜单项中超链接内容的样式属性。根据显示效果可知，需要设置a标签的字体大小、颜色、无下划线以及左侧外边距等，具体实现如下：
#menu ul li a{
font-size:12px;
color:gray;
text-decoration:none;
margin-left:30px;
}
总结：
- CSS3 的常用样式属性主要包括字体属性、文本属性、边距属性、填充属性、边框属性以及列表属性。
- 字体属性包含font-family、font-size、font-weight、color和font。
- 文本属性包含line-height、text-align、letter-spacing和text-decoration。
- 使用复合属性margin或padding设置边距或填充时，存在四种方式。
- 使用border-width、border-style以及border-color属性分别设置边框的宽度、样式以及颜色。
- 使用复合属性border属性设置边框各种样式属性，其顺序为边框宽度、样式以及颜色。
- 列表属性主要用于设置列表项的样式，包含 list-style-type 属性、list-style-image 属性、list-style-position属性和 list-style 属性
- 目前主流的网站所使用的菜单主要是：横向菜单、垂直菜单和弹出式菜单。
