网页源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css案例</title>
<style type="text/css">
/*css第二种属性使用场合,内部样式作用域是网页本身*/
/*元素选择器,优先级最低*/
a{
text-decoration: none;/*去掉超链接下划线*/
}
p,h3{
color: #FF0000;
}
/*id选择器,优先级最高*/
#myp{
color: #00FF00;
}
#mycc{
color: #000000;
}
/*类选择器,优先级较高!important提升样式属性权限*/
.myc{
color: #11FFFF;
}
/*属性选择器*/
/*
* [attribute] 用于选取带有指定属性的元素。
[attribute=value] 用于选取带有指定属性和值的元素。
[attribute~=value] 用于选取属性值中包含指定词汇的元素。
[attribute|=value] 用于选取带有以指定值开头的属性值的元素,该值必须是整个单词。
[attribute^=value] 匹配属性值以指定值开头的每个元素。
[attribute$=value] 匹配属性值以指定值结尾的每个元素。
[attribute*=value] 匹配属性值中包含指定值的每个元素。
*/
a[href]{
color: red;
}
ul em {
color: red;
font-weight: bold;
}
h1 > strong {
color: red;
}
/*import语法导入css*/
@import url("../css/main.css");
</style>
<!--HTML标签链接css-->
<link rel="stylesheet" type="text/css" href="../css/main.css"/>
</head>
<body>
<!--css第一种属性使用场合,行内样式就是给网页元素设置style属性-->
<!--css样式属性名词:属性值;-->
<!--样式优先级,满足就近原则-->
<p style="color: #0000FF; font-size: 32px;">p1</p>
<p id="mycc" class="myc">p2</p>
<p id="myp">p3</p>
<h3>333</h3><br />
<a href="../index.html">会变红</a><br />
<a name="w">不会变红</a><br />
<!--
有关后代选择器有一个易被忽视的方面,即两个元素之间的层次间隔可以是无限的。
例如,如果写作 ul em,这个语法就会选择从 ul 元素继承的所有 em 元素,而不论 em 的嵌套层次多深。
因此,ul em 将会选择以下标记中的所有 em 元素:
-->
<ul>
<li>List item 1
<ol>
<li>List item 1-1</li>
<li>List item 1-2</li>
<li>List item 1-3
<ol>
<li>List item 1-3-1</li>
<li>List item <em>1-3-2</em></li>
<li>List item 1-3-3</li>
</ol>
</li>
<li>List item 1-4</li>
</ol>
</li>
<li>List item 2</li>
<li>List item 3</li>
</ul>
<!--
如果您不希望选择任意的后代元素,而是希望缩小范围,只选择某个元素的子元素,请使用子元素选择器(Child selector)。
例如,如果您希望选择只作为 h1 元素子元素的 strong 元素,可以这样写:
-->
<h1>This is <strong>very</strong> <strong>very</strong> important.</h1>
<h1>This is <em>really <strong>very</strong></em> important.</h1>
</body>
</html>
网页效果