css的样式应用方式&css的选择器
一、简单例子1:
<html>
<head>
<title>.......</title>
<style> /*样式*/
h2{
font-family: 幼园; /*字体*/
color:#ff0000; /*颜色*/
}
p{属性:值 } /* 属性:值形式 */
</style>
</head>
<body>
<h2>.......</h2>
<p>.........</p> /*应用*/
</body>
二、css的样式:1、行内样式;2、内嵌式;3、连接式;4、导入式;
1、行内样式
<p style="color:#0000ff; font-size:20px; text-decoration:underline;" > .......</p>
2、内嵌式
<html>
<head><title>.........</title>
<style type="text/css">
P{
color:#f00ff;
text-decoration:underline;
}
h2{
}
</head>
<body>
<h2>.......</h2>
<p>..........</p>
</body>
</html>
3、连接式
1.css文件
h2 {
color:#0000ff;
}
p{
color:#ff00ff;
text-decoration:underline;
font-weight:bold;
font-size:20px;
}
<html>
<head><title>......</title>
</head>
<link href="1.css" type="text/css" rel="stylesheet">
<body>
<h2>......................</h2>
<p>........................</p>
</body>
</html>
4、导入式
<html>
<head><title>..............</title>
<style type="text/css">
<!--@import url(1.css)-->
</style>
</head>
<body>
<h2>.................</h2>
<p>...................</p>
</body>
</html>
三、css的选择器 :标记选择器、类别选择器、ID选择器
1、标记选择器
<style>
h1{
color:red;
font-size:25px;
}
p{
font-size:25px;
}
</style>
2、类别选择器
<html>
<head><title>....</title>
<syle type="text/css">
.one {
color:red;
font-size:18px;
}
.two {
color:red;
font-size:20px
}
</style>
</head>
<body>
<p class="one" >one</p>
<p class="two" >two</p>
</body>
</html>
3、ID选择器
<html>
<head><title>.......</title>
<style type="text/css">
#one {
font-size:20px;
font-weight:bold;
}
#two {
font-size:30px;
color:#009900;
}
</style>
</head>
<body>
<p id ="one" >one</p>
<p id="two" >two</p>
</body>
</html>
一个ID不能同时出现在两个标记中,因为会引起脚本错误。
4、选择器的声明方式
(1)集体声明
h1,h2,h3,p {
color:purple;
font-size:15px;
}
(2)嵌入式声明
p b {
color:maroon;
text-decoration:underline;
}
<p>....................<b>.............</b>..........................</p>
(3)子选择器的声明
ul1.ul > li > ul > li >a {... : ... ; ... : ... ;}
<ul class="ul1">
<li>..................</li>
<li>..................</li>
<li>..................</li>
<ul>
<li> .............</li>
<li> ......... <a href="........"> ............... </a> ...................</ li>
<li>..............</li>
<ul>
<li>
<ul>