CSS基本样式
0.简介
本节主要介绍 CSS 基础样式，主要针对网页里面的文字、列表、链接等基本内容进行样式修改设置，使其呈现出不一样的效果。譬如更换颜色，改变大小等。
知识点
- 样式化文字概述
- 基础文字和字体样式化
- 样式化列表
- 样式化链接
- Web 字体
1.样式化文字概述
编码中，我们经常会为文字设置各种样式，包括设置字体、粗细、斜体、行还有字符间距、阴影以及文本的其他特征，使得我们的页面看起来更加美观，下面将一一给大家介绍：
- 基本文字和字体样式化
- 样式化列表
- 样式化链接
- Web 字体。
2.基础文字和字体样式化
用于样式化文本的 CSS 属性通常有：
- 字体样式：作用于字体的属性，比如我们经常会使用到的字体大小，字体是粗体还是斜体。
- 文本布局风格：作用于文本的间距以及其他布局功能的属性。比如文本居中对齐。
2.1.字体
- 颜色：通过 color 属性设置字体的颜色，color 值接受任何合法的 CSS 颜色单位。
- 字体种类：通过
font-family属性设置字体种类。font-family 可以把多个字体名称作为一个“回退”系统来保存，如果浏览器不支持第一个字体，则会尝试下一个，也就是说浏览器会使用它可识别的第一个值，它们之间用逗号隔开。比如：font-family: "Trebuchet MS", Verdana, sans-serif;下面再给大家介绍几种几乎所有系统都能够支持的几种字体：Arial，Courier New，Georgia，Times New Roman，Trebuchet MS，Verdana。 - 字体大小：通过
font-size属性设置。字体的常用单位是：px（像素），em（1em 等于我们设计的当前元素的父元素上设置的字体大小）。 - 字体样式：通过
font-style属性设置文字格式。normal: 将文本设置为普通字体 (将存在的斜体关闭)。italic: 如果当前字体的斜体版本可用，那么文本设置为斜体版本；如果不可用，那么会利用 oblique 状态来模拟 italics。oblique: 将文本设置为斜体字体的模拟版本，也就是将普通文本倾斜的样式应用到文本中。
- 字体粗细：通过
font-weight属性设置字体的粗细。常用的有normal：字体正常，bold：文字加粗。 - 文本转换：通过
text-transform属性转换字体。值包括：none: 防止任何转型。uppercase: 将所有文本转为大写。lowercase: 将所有文本转为小写。capitalize: 转换所有单词让其首字母大写。full-width: 将所有字形转换成固定宽度的正方形，类似于等宽字体，允许对齐。拉丁字符以及亚洲语言字形（如中文，日文，韩文）
- 文本装饰：通过
text-decoration属性设置或者取消字体上的文本装饰，我们一般会使用这个属性去掉链接上的默认下划线。可用值为：none: 取消已经存在的任何文本装饰。underline: 文本下划线。overline: 文本上划线。line-through: 穿过文本的线.
将上面的属性运用在下面的例子中：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a.one{
color:green;
font-family: "Trebuchet MS", Verdana,sans-serif;
font-size:20px;
font-weight: normal;
font-style:normal;
text-transform: uppercase;
}
a.two{
color:red;
font-family: "微软雅黑";
font-size: 1em;
font-weight:bold;
font-style:italic;
text-transform:lowercase;
text-decoration:none;
}
</style>
</head>
<body>
<a href="#" class="one">默认样式的链接a</a>
<a href="#" class="two">去掉下划线的链接b</a>
</body>
</html>
在浏览器中的运行效果为：
2.2文本布局
文本对齐：通过 text-align 属性来控制文本它所在的内容盒子对齐的方式。常用值为：
- left：文本左对齐。
- right：文本右对齐。
- center：文本居中对齐。
行高：通过line-height属性来设置文本每行之间的高。浏览器默认字体大小为:16 px，而浏览器默认行高为：18 px。行高=上间距+文字大小+下间距。上下间距是相等的，如果字体大小为 20 px，它的父元素 div 的高度为 40 px，那么我们只需要设置行高为 40 px，就可以使文字相对于 div 盒子垂直居中。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
width: 10px;
height: 20px;
color: blue;
line-height: 40px;
}
.one{
width: 200px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div class="one">
<span>土匪</span>
</div>
</body>
</html>
2.3.font 简写
语法为：
选择器{font:font-style font-weight font-size/line-height font-family}
注意:必须有字体大小和字体(font-size 和 font-family), 必须严格按顺序写。font-size 和 line-height 属性之间必须放一个正斜杠。前期如果记不住顺序也没关系，一个一个的写就行了。
例子：
font:italic normal 20px/40px Arial;
3.样式化列表
3.1.列表特定样式
- 符号样式：用
list-style-type设置用于列表的项目符号的类型，例如无序列表的方形或圆形项目符号，或有序列表的数字，字母或罗马数字。常见的取值有：disc无序列表的默认值，实心圆。circle空心圆。square实心方块。decimal有序列表的默认值阿拉伯数字。lower-alpha小写英文字母。upper-alpha大写英文字母。
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul{
list-style-type: circle;
}
ol{
list-style-type:lower-alpha;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>555</li>
<li>666</li>
<li>777</li>
</ol>
</body>
</html>
- 项目符号位置：通过
list-style-position设置在每个项目开始之前，项目符号是出现在列表项内，还是出现在其外。默认值为outside，这使项目符号位于列表项之外。如果值设置为inside，项目条目则位于行内。我们把前面的例子设置为 inside 来看看效果,为了便于查看效果，我们为 ul 和 li 设置背景色。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
ul {
list-style-type: circle;
list-style-position: inside;
background-color: red;
}
ol {
list-style-type: lower-alpha;
}
li {
background-color: gold;
}
</style>
</head>
<body>
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
<ol>
<li>555</li>
<li>666</li>
<li>777</li>
</ol>
</body>
</html>
- 使用自定义的项目图片：通过 background 系列来设置。
| 值 | 描述 | 书写例子 |
|---|---|---|
background-color | 规定要使用的背景颜色 | background-color：red； |
background-position | 规定背景图像的位置 | 取值可能为：left,right,top,bottom,center |
background-size | 规定背景图片的尺寸 | background-size:60px 80px（宽度，高度） |
background-repeat | 规定如何重复背景图像 | 默认条件下，背景图片不断复制直到填满整个背景空间，背景图片只需要复制一次，设置值为no-repeat |
background-image | 规定要使用的背景图像 | 充当项目符号的图片文件的参考路径 |
在一个声明中设置所有背景属性 ：
body
{
background: #00FF00 url(bgimage.gif) no-repeat fixed top;
}
注：上述例子使用的是 background 属性连写。
4.样式化链接
选择器中有以下几种伪类 :link、 :hover、 :active、 :visited， 我们也可以为伪类设置样式。
首先我们写一个链接,来看看它默认的一些样式：
<a href="#">我是链接</a>
效果图：
我们发现以下特点：
- 链接具有下划线。
- 未访问过的 (Unvisited) 的链接是蓝色的。
- 访问过的 (Visited) 的链接是紫色的。
- 悬停 (Hover) 在一个链接的时候鼠标的光标会变成一个小手的图标。
- 激活 (Active) 链接的时候会变成红色 (用鼠标左键点击链接)。
知道链接的默认样式后，我们同样可以使用 color 属性改变链接不同状态的颜色，使用 text-decoration 属性去掉链接默认的下划线。一般来说对于链接的样式，我们掌握这两个就够了。如果你有兴趣把自己的链接添加一些独特的样式，你可以自己尝试一下哟。
5.Web字体
对于字体的使用来说，有时候我们可能并不仅仅满足于使用自带的字体。而通过 Web 字体，我们可以使用更多的不同的文本样式。
首先我们通过 @font-face 指定要下载的字体文件。
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
然后使用 @font-face 中指定的字体种类名称来将你的定制字体应用到你需要的地方，比如说：
body { font-family: "Bitstream Vera Serif Bold", serif }
完整的代码为：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
@font-face {
font-family:"Bitstream Vera Serif Bold";
src: url("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
body {
font-family:"Bitstream Vera Serif Bold",serif;
}
</style>
</head>
<body>
<div>
我爱学习，学习使我快乐！
</div>
</body>
</html>
使用 Web 字体后在浏览器中运行的效果图为：
再来看看没有使用之前是什么样子的：
注：现在网上有很多免费可以使用的 web 字体，大家可以自行百度搜索下载使用在自己的网页当中。比如：Google Web Fonts。
综合案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>
.box {
width:800px;
height:200px;
margin:0 auto;
}
.title {
text-align:center;
font:normal 28px "微软雅黑";
}
.sub_title {
text-align:center;
}
.sub_title .time {
color: #aabbcc;
font-size: 14px;
}
.sub-title .nows_title {
color: #990000;
font-size:14px;
}
p {
text-indent: 2em;
line-height: 28px;
}
p span {
color: #3399cc;
}
input[type="button"] {
color: green;
font-weight: 700;
}
input[type="text"] {
color: red;
font-size: 12px;
}
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url
("http://developer.mozilla.org/@api/deki/files/2934/=VeraSeBd.ttf");
}
.one {
font-family: "Bitstream Vera Serif Bold", serif
}
a {
color:red;
font-family:"微软雅黑";
font-size:1em;
font-weight:bold;
font-style:italic;
text-transform:lowercase;
text-decoration:none;
}
ul {
list-style-type: circle;
list-style-position: inside;
background-color: red;
}
ol {
list-style-type: lower-alpha;
}
li {
background-color: blue;
}
</style>
</head>
<body>
<div class="box">
<h2 class="title">知道程序猿为什么没有女朋友吗？真正的原
因在这~</h2>
<div class="sub_title">
<span class="time">2018年11月11日11:11</span>
<span class="nows-title">娱乐新闻（纯属虚构，当做例
子）</span>
<a href="#">收藏本文</a>
<input type="text" value="请输入查询条件">
<input type="button" value="搜索">
</div>
<hr>
<p>胡编乱造社为您报道： 程序猿们好不容易通过自己的努力
（多少个日日夜夜的编码生活，越来越快的打字速度，爱恨交加的<span>
[bug]</span>），进入了 IT 行业。梦想中的生活是：升职加薪当上CEO，迎
娶白富美，走向人生巅峰。然后现实是别人的生活是：一杯茶，一包烟，一只
破股看一天；而程序猿的生活却是：一卷纸，一双手，一部电影看一宿？</p>
<div class="one">那程序猿为啥没有女朋友呢？先带你们看一
个很有趣的现象，程序猿在跟妹子聊天的时候，说的所有话，可以总结成下面
这首打油诗：</div>
<ul>
<li>在哪干嘛吃了没</li>
<li>哎呀心疼喝热水</li>
<li>多穿快回外面冷</li>
<li>你忙好梦早点睡</li>
</ul>
<p>但是程序猿在被提 bug 时，通常反应会是这样的：</p>
<ol>
<li>怎么可能，你再试一下。</li>
<li>在我这是好的，不信你来看看。</li>
<li>真奇怪，刚刚还好好的，你没改什么东西吧。</li>
<li>你清下缓存试试。</li>
<li>你重启下电脑试试。</li>
<li>你装的什么版本的JDK。</li>
<li>你怎么还在用360浏览器，你下载个谷歌浏览器肯定没
问题。</li>
<li>用户不会像你这样操作的。</li>
</ol>
</div>
</body>
</html>
6348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
