1、传统html的缺陷
一行一行的进行修改
2、css的好处
head中有一个style
h2{
// font-f
}
3、css如何控制页面
1）行内样式
2）内嵌式
<style type="text/css">
<!--
p{
color:#FF33CC;
text-decoration:underline;
font-style:italic;
font-size:28px;
}
-->
</style>
</head>
<body>
<p>紫红色、斜体、下划线、28px的效果1</p>
<p>紫红色、斜体、下划线、28px的效果2</p>
<p>紫红色、斜体、下划线、28px的效果3</p>
<p>紫红色、斜体、下划线、28px的效果4</p>
</body>
3）链接式
<link href="1.css" type="text/css" rel="stylesheet">
4）导入式
<style type="text/css">
<!--
@import url(1.css);
-->
</style>
css选择器
1）标记选择器
2）类别选择器
<style type="text/css"> <!-- .first{ color:blue; /* 蓝色 */ font-size:17px; /* 文字大小 */ } .second{ color:red; /* 红色 */ font-size:20px; /* 文字大小 */ } .third{ color:cyan; /* 青色 */ font-size:23px; /* 文字大小 */ } --> </style> </head> <body> <p class="first">class类别选择器1</p> <p class="second">class类别选择器2</p> <p class="third">class类别选择器3</p> <h3 class="second">h3同样适用</h3> </body>
3）id选择器
<style type="text/css"> <!-- #one{ font-weight:bold; /* 粗体 */ } #two{ font-size:31px; /* 字体大小 */ color:#999900; /* 颜色 */ } --> </style> </head> <body> <p id="one">ID选择器使用1</p> <p id="two">ID选择器使用2</p> <p id="two">ID选择器使用3</p> </body>
************************************
1）选择器的集体声明
<style type="text/css"> <!-- h1, h2, h3, h4, h5, p{ /* 集体声明 */ color:purple; /* 文字颜色 */ font-size:14px; /* 字体大小 */ } h2.special, .special, #one{ /* 集体声明 */ text-decoration:underline; /* 下划线 */ } --> </style> </head> <body> <h1>选择器集体声明h1</h1> <h2 class="special">选择器集体声明h2</h2> <h3>选择器集体声明h3</h3> <h4>选择器选择器集体声明h4</h4> <h5>集体声明h5</h5> <p>选择器集体声明p1</p> <p class="special">选择器集体声明p2</p> <p id="one">选择器集体声明p3</p> </body>
2）选择器的嵌套声明
<style type="text/css"> <!-- p b{ /* 嵌套声明 */ color:maroon; /* 颜色 */ text-decoration:underline; /* 下划线 */ font-size:30px; /* 文字大小 */ } --> </style> </head> <body> <p>选择器嵌套<b>使用CSS标</b>记的方法</p> 选择器嵌套之外<b>的标</b>记并不生效 </body>
3）子选择器
<style type="text/css"> ul.myList > li > a{ /* 子选择器 */ text-decoration:none; /* 没有下划线 */ color:#336600; } </style> </head> <body> <ul class="myList"> <li><a href="http://picasaweb.google.com/isaacshun">isaac's Picasa</a> <ul> <li><a href="#">CSS1</a></li> <li><a href="#">CSS2</a></li> <li><a href="#">CSS3</a></li> </ul> </li> </ul>