层叠样式表的优点
更多排版和页面布局控制
样式和结构分离
页面使用的文本格式和颜色可独立于网页主体(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 属性
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步