HTML网页设计基础笔记 • 【第5章 常用的样式属性】
全部章节 >>>>
本章目录
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 属性
- 目前主流的网站所使用的菜单主要是：横向菜单、垂直菜单和弹出式菜单。
HTML网页设计基础笔记 • 【第5章 常用的样式属性】的更多相关文章
- HTML网页设计基础笔记 • 【目录】
持续更新中- 我的大学笔记>>> 章节 内容 第1章 HTML网页设计基础笔记 • [第1章 HTML5基础] 第2章 HTML网页设计基础笔记 • [第2章 排列页面内容] 第3章 ...
- HTML网页设计基础笔记 • 【第6章 背景和阴影】
全部章节 >>>> 本章目录 6.1 背景属性 6.1.1 背景颜色 6.1.2 背景图片 6.1.3 背景图片的重复方式 6.2 背景图片的定位 6.2.1 backg ...
- HTML网页设计基础笔记 • 【第4章 CSS3基础】
全部章节 >>>> 本章目录 4.1 CSS 概述 4.1.1 CSS 简介 4.1.2 CSS3 基本语法 4.1.3 样式表的分类 4.2 CSS 基本选择器 4.2. ...
- HTML网页设计基础笔记 • 【第7章 盒子模型】
全部章节 >>>> 本章目录 7.1 盒子模型原理 7.1.1 盒子模型概述 7.1.2 盒子的大小 7.1.3 盒子之间的关系 7.2 标准文档流 7.2.1 标准文档流 ...
- 常用CSS样式属性
01.常用样式 1.1.background背景 设置元素背景的样式 background,更好的衬托内容. 属性 描述 值 background 背景属性简写.支持多组背景设置,逗号,隔开 back ...
- HTML网页设计基础笔记 • 【第3章 表单】
全部章节 >>>> 本章目录 3.1 表单 3.1.1 表单概述 3.1.1 表单概述(续) 3.1.2 表单标签 3.1.3 表单数据的提交方式 3.2 输入框和按钮 3 ...
- HTML网页设计基础笔记 • 【第1章 HTML5基础】
全部章节 >>>> 本章目录 1.1 HTML介绍及开发工具 1.1.1 HTML 的基本概念 1.1.2 网页 1.1.3 Web 标准 1.1.4 HTML5 与移动互 ...
- HTML网页设计基础笔记 • 【第8章 页面布局与规划】
全部章节 >>>> 本章目录 8.1 表格布局 8.1.1 表格布局 8.2 流式布局 8.2.1 瀑布流布局 8.2.2 masonry 实现瀑布流布局 8.3 div ...
- HTML网页设计基础笔记 • 【第2章 排列页面内容】
全部章节 >>>> 本章目录 2.1 音频标签和视频标签 2.1.1 音频标签 2.1.2 视频标签 2.2 列表.div 以及 span 标签 2.2.1 列表标签 2. ...
随机推荐
- 【Other】逻辑分析仪的使用（UART、SPI）
首先上一张接线示意图 上方是UART的接线方式,下方则是SPI的 事实上,这样接就能收到信号了 如果是SPI,要设定自己为主机,UART则没有这个问题 下面来说明逻辑分析仪的界面设定 设定介绍完了 下 ...
- Docker学习（六）——Dockerfile文件详解
Docker学习(六)--Dockerfile文件详解 一.环境介绍 1.Dockerfile中所用的所有文件一定要和Dockerfile文件在同一级父目录下,可以为Dockerfile父目录的子目录 ...
- 记一次ssh连接慢
2020-03-28日机房搬迁完后,发现有一台60服务器ssh连接特别慢,但是其他服务器正常; 下面是解决过程: vim /etc/ssh/sshd_config (编辑配置文件) 查找F ...
- 在html页面通过绝对地址显示图片
1.编辑tomcat中conf目录下的server.xml文件,在<Host></Host>中添加如下代码段 <Context path="/D" d ...
- 用Navicat连接数据库-数据库连接(MySQL演示)
用Navicat连接数据库-数据库连接(MySql演示) 已成功连接,连接方式步骤如下: 开始之前首先准备连接信息: [ 一般你可以自己去配置文件中找 或者 问连接过该数据库的人/所有者(负责人/同学 ...
- kubeadm安装k8s集群
安装kubeadm kubectl kubelet 对于Ubuntu/debian系统,添加阿里云k8s仓库key,非root用户需要加sudo apt-get update && a ...
- ABP VNext框架基础知识介绍（1）--框架基础类继承关系
在我较早的时候,就开始研究和介绍ABP框架,ABP框架相对一些其他的框架,它整合了很多.net core的新技术和相关应用场景,虽然最早开始ABP框架是基于.net framework,后来也全部转向 ...
- Windows服务（.net Core 3.1-Topshelf-log4net-quartz）
https://github.com/yezei/Topshelf-log4net-quartz.git
- AtCoder Beginner Contest 169 题解
AtCoder Beginner Contest 169 题解 这场比赛比较简单,证明我没有咕咕咕的时候到了! A - Multiplication 1 没什么好说的,直接读入两个数输出乘积就好了. ...
- Java网络多线程开发：java.io.EOFException
Java网络多线程开发:java.io.EOFException 在实现韩顺平Java的多用户即使通信系统实战项目中: 对于客户端线程的停止,老韩是向服务器端发送一个消息对象,提示服务器端进行资源释放 ...