转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469
觉得博文有用,请点赞,请评论,请关注,谢谢!~
觉得博文有用,请点赞,请评论,请关注,谢谢!~
CSS外部文档链接:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>CSS基础-外部文档链接</title>
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
p{color:blue;text-align: center; }
h1{color:#999999;font-size:12px ;text-align: center; }
</style>
</head>
<body>
<p>我是段落</p>
<p style="color:black;text-align:right">我是另一个段落</p>
<h1>我是标题</h1>
</body>
</html>
通配选择器 标签选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>通配选择器 标签选择器</title>
<style type="text/css">
/*通配选择器*/
*{color:#999999;font-size:12px ;text-align: center; }
/*标签选择器*/
h1{color:#000000;width: 200px;height: 200px;border: 1px solid red;font-size:20px ;text-align: center; }
</style>
</head>
<body>
<p>我是段落</p>
<h1>我是标题</h1>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>
类选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>类选择器</title>
<style type="text/css">
/*类选择器*/
.tag01{color:red;font-size:22px ;text-align: center;}
.tag02{list-style-type: none;}
</style>
</head>
<body>
<p class="tag01">我是段落</p>
<h1>我是标题</h1>
<ul>
<li class="tag01 tag02">我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>
ID选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>ID选择器</title>
<style type="text/css">
/*ID选择器*/
#tag_01{color:red;font-size:22px ;text-align: center;}
</style>
</head>
<body>
<p id="tag_01">我是段落</p>
<h1>我是标题</h1>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>
群组选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>群组选择器</title>
<style type="text/css">
/*群组选择器*/
li,td,tag1,#tag_1{color:blue;font-size:22px ;text-align: center;}
</style>
</head>
<body>
<p class="tag1">我是段落</p>
<h1 id="tag_1">我是标题</h1>
<ul>
<li>我是列表</li>
<li>我是列表</li>
<li>我是列表</li>
</ul>
</body>
</html>
后代选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>后代选择器</title>
<style type="text/css">
/*后代选择器*/
/*table tr td div p a*/
table a{text-decoration: none;color: red;font-size: 3cm;}
</style>
</head>
<body>
<table>
<tr>
<td>
<div>
<p>
<a href="http://www.baidu.com">百度</a>
</p>
</div>
</td>
</tr>
</table>
</body>
</html>
子代选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>子代选择器</title>
<style type="text/css">
/*子代选择器*/
tr > td{text-decoration: none;color: red;font-size: 3cm;}
</style>
</head>
<body>
<table>
<tr>
<td>我是td</td>
</tr>
</table>
</body>
</html>
属性选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>属性选择器</title>
<style type="text/css">
/*属性选择器*/
/*img[title]{border: 1px;width: 200px;height: 100px;}*/
/*img[title][id]{border: 1px;width: 200px;height: 100px;}*/
img[title][id=tag01]{border: 1px;width: 200px;height: 100px;}
</style>
</head>
<body>
<img src="" alt="" title="image01" id="tag01">
<img src="" alt="" title="image01" id="tag02">
<img src="" alt="" title="image02" class="tag02">
<p>我是段落</p>
<h1>我是标题</h1>
</body>
</html>
相邻兄弟选择器:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
/*相邻兄弟选择器*/
/*td + td{color: red;}*/
.tag01 + .tag02{color: red;}
</style>
</head>
<body>
<table>
<tr>
<td class="tag01">我是td1</td>
<td class="tag02">我是td2</td>
</tr>
<tr>
<td>我是td3</td>
<td>我是td4</td>
</tr>
</table>
</body>
</html>
转载请注明出处:http://blog.csdn.net/iwanghang/article/details/76576469
欢迎移动开发爱好者交流
沈阳或周边城市公司有意开发Android,请与我联系
联系方式
微信:iwanghang
QQ:413711276
邮箱:iwanghang@qq.com
沈阳或周边城市公司有意开发Android,请与我联系
联系方式
微信:iwanghang
QQ:413711276
邮箱:iwanghang@qq.com
觉得博文有用,请点赞,请评论,请关注,谢谢!~