一.CSS(层叠样式表)基础语法:
选择器{属性:属性值;属性:属性值;……}
三要素:选择器、大括号、属性:属性值;(一组声明)
提示:CSS代码一般都写在head标签里
1.选择器——规定选择器定义的样式对那些元素生效
(1)标签选择器——选择器是HTML标签:
影响整个页面中所有运用该标签的元素
(2)类选择器——以“.”开头的选择器(.class名):
1.影响所有以class属性引用该类的标签样式的元素
2.注意:类名的第一个字符不能使用数字!
3.元素可以加入多个类,把各个类名放在class属性中,各个类名之间用一个空格分隔,类名的顺序并不重要
(3)ID选择器——以“#”开头定义的选择器(#ID值):
1.影响以id属性引用该选择符的标签样式元素
2.注意:ID的第一个字符丌能使用数字!
3.注意:单一页面中,一个ID选择器只能使用一次!
2.选择器实例代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<style type="text/css">
li,h1,h2{
color:skyblue;
}
.wl{
font-size:25px;
}
#ll{
color: red;
font-size:30px;
}
</style>
</head>
<body>
<h1>CSS初探:</h1>
<h2 class="wl">这是个红色的二级标题</h2>
<ol>
<li id="ll">FPX</li>
<li class="wl">IG</li>
<li class="wl">TOP</li>
<li>RNG</li>
</ol>
</body>
</html>
显示结果:
3.选择器汇总表:
二.将CSS样式与HTML的内容整合方式:
1.行内样式——在元素标签内通过style属性添加样式:
<body>
<标签 style="属性:属性值;属性:属性值;……">
</body>
这种写法其实与CSS的实质相悖,如果这样写还不如不用CSS
2.页内样式——在head内的style标签内添加样式:
如上方实例所示:
这种写法相对行内样式更有效,但是维护较困难
3.外部样式——引用外部建立的.css文件:
使用link标签
<head>
<link rel="stylesheet" type="text/css" herf="css文件路径">
</head>
(1)html文件中的代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS</title>
<link rel="stylesheet" type="text/css" href="styleLOL.css">
</head>
<body>
<h1 class="tt">CSS初探:</h1>
<h2 class="tt">这是个红色的二级标题</h2>
<ol>
<li class="first">FPX</li>
<li class="second">IG</li>
<li class="second">TOP</li>
<li class="first">RNG</li>
<li class="first">WE</li>
<li class="second">SDG</li>
<li class="second">EDG</li>
<li class="first">JDG</li>
</ol>
</body>
</html>
(2)css文件中的代码:
.tt{
color:skyblue;
}
.second{
color: green;
font-size:30px;
}
.first{
color: red;
font-size:30px;
}
(3)显示效果:
三.样式优先级:
1.ID选择器 > 类选择器 > 标签选择器
2.行内样式 > 页内样式 > 外部样式
3.就近原则,距离元素最近的样式优先级最高