全部章节 >>>>
本章目录
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 属性
- 目前主流的网站所使用的菜单主要是:横向菜单、垂直菜单和弹出式菜单。