目录
class选择器
class选择器-例外
class选择器-同时使用两种class
ID选择器不支持两种同时使用
正文字体格式
正文字体格式-另一种“宏”的使用方式
使用CSS
css文件
html文件
import CSS
同时import 两个CSS文件
CSS文件
html文件
同时使用多种格式对正文进行格式设定
green.css
red.css
file.css
html文件
class选择器
<html><head><title>class选择器</title><style type="text/css">.red{color:red;/* 红色 */font-size:18px;/* 文字大小 */}.green{color:green;/* 绿色 */font-size:20px;/* 文字大小 */}</style></head><body><p class="red">class选择器1</p><p class="green">class选择器2</p><h3 class="green">h3同样适用</h3></body></html>
class选择器-例外
<html><head><title>class选择器与标记选择器</title><style type="text/css">p{/* 标记选择器 */color:blue;font-size:18px;}.special{/* 类别选择器 */color:red;/* 红色 */font-size:23px;/* 文字大小 */}</style></head><body><p>class选择器与标记选择器1</p><p>class选择器与标记选择器2</p><p>class选择器与标记选择器3</p><p class="special">class选择器与标记选择器4</p><p>class选择器与标记选择器5</p><p>class选择器与标记选择器6</p></body></html>
class选择器-同时使用两种class
<html><head><title>同时使用两个class</title><style type="text/css">.blue{color:blue;/* 颜色 */}.big{font-size:22px;/* 字体大小 */}</style></head><body><h4>一种都不使用</h4><h4 class="blue">两种class，只使用blue</h4><h4 class="big">两种class，只使用big </h4><h4 class="blue big">两种class，同时blue和big</h4><h4>一种都不使用</h4></body></html>
ID选择器不支持两种同时使用
<html><head><title>ID选择器</title><style type="text/css">#bold{font-weight:bold;/* 粗体 */}#green{font-size:30px;/* 字体大小 */color:#009900;/* 颜色 */}</style></head><body><p id="blod">ID选择器1</p><p id="green">ID选择器2</p><p id="green">ID选择器3</p><p id="bold green">ID选择器4</p></body></html>
正文字体格式
<html><head><title>页面标题</title></head><body><p style="color:#FF0000; font-size:20px; text-decoration:underline;">正文内容1</p><p style="color:#000000; font-style:italic;">正文内容2</p><p style="color:#FF00FF; font-size:25px; font-weight:bold;">正文内容3</p></body></html>
正文字体格式-另一种“宏”的使用方式
<html><head><title>页面标题</title><style type="text/css">p{color:#0000FF;text-decoration:underline;font-weight:bold;font-size:25px;}</style></head><body><p>这是第1行正文内容……</p><p>这是第2行正文内容……</p><p>这是第3行正文内容……</p></body></html>
使用CSS
css文件
h2{color:#0000FF;}p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}
html文件
<html><head><title>页面标题</title><link href="file.css" type="text/css" rel="stylesheet"></head><body><h2>CSS标题</h2><p>这是正文内容……</p><h2>CSS标题</h2><p>这是正文内容……</p></body></html>
import CSS
<html><head><title>页面标题</title><style type="text/css"><!--@import url(file.css);--></style></head><body><h2>CSS标题</h2><p>这是正文内容……</p><h2>CSS标题</h2><p>这是正文内容……</body></html>
注意：
<!--@import url(file.css);-->
并不是注释。
同时import 两个CSS文件
CSS文件
h3{color:#33CC33;font-style:italic;font-size:40px;}
h2{color:#0000FF;}p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}
html文件
<html><head><title>页面标题</title><style type="text/css"><!--@import url(file1.css);@import url(file2.css);/* 同时导入两个CSS样式表 */--></style></head><body><h2>CSS标题</h2><p>这是正文内容……</p><h2>CSS标题</h2><p>这是正文内容……<h3>新增加的标题</h3><p>新增加的正文内容</p></body></html>
同时使用多种格式对正文进行格式设定
green.css
p{color:green;}
red.css
p{color:red;}
file.css
p{color:#FF0000;text-decoration:underline;font-weight:bold;font-size:15px;}
html文件
<html><head><title>页面标题</title><link href="green.css" type="text/css" rel="stylesheet"><style type="text/css">p{color:blue;}@import url(red.css);</style></head><body><p style="color:gray;">观察文字的颜色</p></body></html>
最终的字体颜色是由
<p style="color:gray;">观察文字的颜色</p>
决定的。
