一、css选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/hello.css" type="text/css" rel="stylesheet" />
</head>
<body>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span>
</body>
</html>
二、id选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/hello.css" type="text/css" rel="stylesheet" />s
</head>
<body>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span><br/>
<span id="style2">这是一则非常重要的新闻</span><br/>
</body>
</html>
三、html选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/hello.css" type="text/css" rel="stylesheet" />
</head>
<body>
你好北京！
<span class="hello">新闻一</span>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span><br/>
<span id="style2">这是一则非常重要的新闻</span><br/>
</body>
</html>
hello.css
.hello{ font-weight: bold; font-size: 20px; background: pink; } #style2{ font-weight: 30px; background: gold; } body{ color: purple; }
当一个元素被id选择器与类选择器html选择器修饰
优先级是：id>类>html
综合案例;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link href="css/hello.css" type="text/css" rel="stylesheet" />
</head>
<body>
你好北京！
<span class="hello">新闻一</span>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span>
<span class="hello">新闻一</span><br/>
<span id="style2">这是一则非常重要的新闻</span><br/>
<a href="h1.html">goto souhu</a><br/>
<a href="h3.html">goto souhu</a><br/>
<a href="h2.html">goto souhu</a><br/>
</body>
</html>
.hello{ font-weight: bold; font-size: 20px; background: pink; } #style2{ font-weight: 30px; background: gold; } body{ color: purple; } a:link{ color: black; text-decoration: none; } a:hover{ text-decoration: underline; color: black; } a:visited{ color: red; }
四、通配符选择器
.hello{ font-weight: bold; font-size: 20px; background: pink; } #style2{ font-weight: 30px; background: gold; } body{ color: purple; } a:link{ color: black; text-decoration: none; } a:hover{ text-decoration: underline; color: black; } a:visited{ color: red; } /*使用通配符选择器*/ *{ /*margin: 0px;*/ /*padding: 0px; margin-top: 10px; margin-left: 10px; margin-bottom: 0px;*/ margin: 100px 10px 0px 10px;/*如果margin给了四个值则表示上 右 下 左*/ /*三个值 上、左右、下*/ padding: 0px;/*规范与margin一样*/ }