1.css的语法
a.位置
<head>
<style type="text/css"> //css代码
</style>
</head>
b.语法
选择器{
属性名1：属性值1；
属性名2：属性值2；
}
例：h1{
font-size:12px; //字体大小
color:red; //字体颜色
}
注意：多个用属性用分号分隔
2.选择器
a.标签选择器
语法：
标签名{
------
}
b.类选择器
语法：
.class属性值{
-------
}
步骤：
第一步：给指定的html标签加上class属性
第二步：在style中写
.class属性值{
-------
}
|
.green{ font-size:20px; color:green; } |
c.id选择器
语法：
#id属性值{
......
}
步骤：
第一步：给指定的html标签加上id属性
第二步：在style中写
#id属性值{
-------
}
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>标签选择器的用法</title> <style type="text/css"> #first{font-size:16px;} #second{font-size:24px;} </style> </head> <body> <h1>北京欢迎您</h1> <p id="first">北京欢迎您，有梦想谁都了不起！</p> <p id="second">有勇气就会有奇迹。</p> <p>北京欢迎您，为你开天辟地</p> <p>流动中的魅力充满朝气。</p> </body> </html> |
3.引用样式的方式
a.行内样式
使用style属性引入样式
列：<h1 style="font-sze:16px;color:red;">xxx</h1>
b.内部样式
在head中写style
列：h1{xxxx}
c.外部样式
把CSS代码保存在以CSS结尾的文件（层叠样式文件）
把CSS文件引入html中
引入方式两种：
第一种：链接方式
<link rel="stylesheet" href="文件路径" type="text/css"/>
第二种：导入方式
<style>
@import url("文件路径")
</style>
4.优先级
行内样式>内部样式>外部样式（就近原则）
id选择器>class选择器>标签选择器
5.高级选择器
a.后代选择器
父标签 子标签{
......
}
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>后代选择器</title> <style type="text/css"> h3 strong{color:blue;font-size:36px;} strong{color:red; font-size:16px;} </style> </head> <body> <strong>问君能有几多愁，</strong> <h3>恰似一江<strong>春水</strong>向东流.</h3> </body> </html> |
b.交集选择器
选择器（class选择器或者id选择器）{
......
}
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>交集选择器</title> <style type="text/css"> p .txt{color:red;} p.txt{color:blue;line-height:28px;} </style> </head> <body> <h2>蝶恋花•庭院深深深几许</h2> <p class="txt">庭院深深深几许，杨柳堆烟，帘幕无重数。玉勒雕鞍游治处，楼高不见章台路。<br/> <strong class="txt">雨横风狂三月幕，门俺黄昏，无计留春住。</strong>泪眼问花花不语，任红飞过秋千去。</p> </body> </html> |
c.并集选择器
选择器1，选择器2，选择器3，......选择器n{
......
}
|
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"/> <title>并集选择器</title> <style type="text/css"> h3,.first,.second,#end{font-size:16px;color:green;font-weight:normal;} </style> </head> <body> <h2>蝶恋花•庭院深深深几许</h2> <h3>庭院深深深几许，杨柳堆烟，帘幕无重数。</h3> <p class="first">玉勒雕鞍游治处，楼高不见章台路。</p> <p class="second">雨横风狂三月幕，门俺黄昏，无计留春住。</p> <p id="end">泪眼问花花不语，任红飞过秋千去。</p> </body> </html> |