层叠样式表的优点
- 更多排版和页面布局控制
- 样式和结构分离
- 页面使用的文本格式和颜色可独立于网页主体（body区域）进行配置和存储
- 样式可以存储
- 样式变得更小
- 网站维护更容易
配置层叠样式表
- 内联样式
- 嵌入样式
- 在网页页头区域（
<head></head>之间)定义
- 外部样式
- 单独文件编码。网页在页头区域用link元素链接到文件
- 导入样式
- 与外部样式类似。用
@import指令将外部样式表导入嵌入样式或导入另一个外部样式表
CSS选择符和声明
background-color属性
- 配置元素背景色
body{background-color:yellow}
color属性
- 配置元素文本颜色
body{color:blue}
配置背景色和文本色
- 一个选择符要配置多个属性，用分号(;)分隔不同声明
body{color:white;background-color:orchid;}
| 属性名称 |
说明 |
background-color |
元素背景色 |
color |
元素前景（文本）颜色 |
font-family |
配置字体或字体家族 |
font-size |
字号 |
font-style |
字体样式 |
font-weight |
字体"浓淡"或粗细 |
letter-spacing |
字间距 |
line-height |
行间距 |
margin |
配置元素边距的快捷方式 |
margin-left |
元素左侧边距 |
margin-right |
元素右侧边距 |
text-decoration |
决定文本是否添加下划线，通常应用于超链接 |
text-indent |
配置文本首行缩进 |
text-shadow |
配置元素中显示文本的阴影 |
text-transform |
配置文本大小写 |
white-space |
配置元素内的空白 |
width |
元素中内容的宽度 |
word-spacing |
词间距 |
在网页上使用颜色
十六进制颜色值
- 十六进制以16位基数，基数位0-9，A-F
- 十六进制值表示RGB颜色使用三对十六进制数位。每一对值的范围是00-FF。这三对值分别代表红绿蓝的颜色强度
CSS颜色语法
| CSS语法 |
颜色类型 |
p{color:red} |
颜色名称 |
p{color:#FF0000} |
十六进制颜色值 |
p{color:#F00} |
简化十六进制值（每个字符代表一个十六进制对——仅适合Web安全色） |
p{color:rgb(255,0,0)} |
十进制颜色值（RGB三元组) |
p{color:hs1(0,100%,50%)} |
HSL颜色值 |
用style属性配置内联CSS
style属性
- 每个声明都由属性和值构成
- 属性和值以冒号分隔
- 属性不止一个就用分号
(;)隔开
<h1 style="color:#cc0000">该标题显示成红色</h1>
<h1 style="color:#cc0000;background-color:#cccccc">该标题显示成灰底红色</h1>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Inline CSS Example</title>
<meta charset="utf-8">
</head>
<body style="background-color: #F5F5F5;color: #008080;">
<h1 style="background-color: #008080;color: #F5F5F5;">Inline CSS</h1>
<p>This paragraph inherits the styles applied to the body tag.</p>
<p style="color: #333333;">This paragraph overrides the text color style applied to the body tag.</p>
</body>
</html>
用style元素配置嵌入CSS
style元素
- 嵌入样式应用于整个网页文档，通常放到head区域的
<style>元素中
- 以
<style>开始，</style>结束
<!DOCTYPE html>
<html lang="en">
<head>
<title>Embedded Styles</title>
<meta charset="utf-8">
<style>
body
{
background-color: #E6E6FA;
color: #191970;
}
</style>
</head>
<body>
<h1>Embedded CSS</h1>
<p>This page uses embedded styles.</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Trillium Media Design</title>
<meta charset="utf-8">
<style>
body
{
background-color: #E2FFFF;
color: #15495E;
}
h1
{
background-color: #237B7B;
color: #E2FFFF;
}
h2
{
background-color: #B0E6E6;
color: #237B7B;
}
</style>
</head>
<body>
<header>
<h1>Trillium Media Design</h1>
</header>
<nav>
<a href="index.html">Home</a> <a href="services.html">Services</a> <a href="contact.html">Contact</a>
</nav>
<main>
<h2>New Media and Web Design</h2>
<p>Trillium Media Design will take your company's Web presence to the next level. We offer a comprehensive range of services.</p>
<ul>
<li>Website Design</li>
<li>Interactive Animation</li>
<li>E-Commerce Solutions</li>
<li>Usability Studies</li>
<li>Search Engine Optimization</li>
</ul>
<h2>Meeting Your Business Needs</h2>
<p>Our expert designers will listen to you as they create a website that helps to promote and grow your business.</p>
</main>
<footer>Copyright © 2020 Your Name Here</footer>
</body>
</html>
用CSS配置字体
font-family属性
| font-family |
说明 |
serif(有衬线) |
所有serif字体在笔画末端都有小的衬线，常用于显示标题 |
sans-serif(无衬线) |
常用于显示网页文本 |
monospace(等宽) |
常用于显示代码 |
cursive(草书、手写体) |
一般不用 |
fantasy(异体) |
风格夸张，有时用于网页标题 |
@font-face{font-family:MyAwesomeFont;
src:url(myawesomefont.woff) format("woff");}
h1{font-family:MyAwesomeFont, Georgia,serif;}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>KayakDoorCounty.net</title>
<style>
body
{
font-family: Verdana, Geneva, Tahoma, sans-serif;
}
h2,h3
{
font-family: Georgia, 'Times New Roman', Times, serif;
}
</style>
</head>
<body>
<header>
<h1>KayakDoorCounty.net</h1>
</header>
<nav>
<a href="index.html">Home</a>
<a href="tours.html">Tours</a>
<a href="reservations.html">Reservations</a>
<a href="contact.html">Contact</a>
</nav>
<main>
<h2>Your next adventure is only a paddle away ....</h2>
<p>Take a guided kayak tour while you explore the shoreline of scenic Door County. </p>
<h3>Featured tours this week:</h3>
<ul>
<li>Cana Island</li>
<li>Mink River</li>
<li>Europe Lake</li>
</ul>
</main>
<footer>
<small><i>Copyright © 2020 KayakDoorCounty.net</i></small>
</footer>
</body>
</html>
更多CSS文本属性
font-size属性
| 值类别 |
值 |
说明 |
| 文本值 |
xx-samll,x-samll,small,medium(默认),large,x-large,xx-large |
文本大小缩放良好，字号选项不多 |
| 像素单位(Pixel Unit,px) |
带单位数值，如10px |
基于屏幕分辨率显示 |
| 磅单位(Point Unit,pt) |
带单位数值，如10pt |
用于配置网页的打印版本 |
| Em单位(em) |
带单位数值，如.75em |
推荐，大小缩放良好，字号选项多 |
| 百分比单位 |
百分比数值，如75% |
推荐，大小缩放良好，字号选项多 |
font-weight属性
- font-style属性
- line-height属性
- text-align属性
- text-indent属性
- text-decoration属性
- text-transfrom属性
- letter-spacing属性
- word-spacing属性
- white-spacing属性
- text-shadow属性