CSS
Cascading Style Sheets 层叠样式表
1、 使用CSS的原因:
i. HTML对网页格式化功能的不足,比如对段落间距,行距等的控制;
ii. HTML对字体变化和大小控制不好;
iii. HTML对页面格式的动态更新控制不好;
iv. HTML排版定位能力差。
2、 样式规则组成
{属性:值}或者{属性1:值1; 属性2:值2}
3、 加载CSS样式的方式
1) head内引用
<head>
<style type=”text/css”>
h1{font-size:x-large;color:red}
p{background:yellow}
</style>
</head>
<body>
<h1>沈阳</h1>
<p>南京</p>
</body>
2)body内引用
<body>
<h1style=”color:green; font-size:37px;”>沈阳</h1>
<pstyle=”background:yellow;”>南京</p>
</body>
3)文件外引用
3.1、链接方式
target_style.css(待引用的CSS文件)
h1{color:green;font-size:37px}
p{background:yellow}
当前html页面内
<head>
<linkrel=stylesheet href=”target_style.css” type=”text/css”>
</head>
<body>
<h1style=”color:green; font-size:37px;”>沈阳</h1>
<pstyle=”background:yellow;”>南京</p>
</body>
3.2、导入方式
<head>
<styletype=”text/css>
@importurl(target_style.css);
</style>
</head>
4、 选择符
4.1 标记选择符
<pstyle=”background:yellow;”>南京</p>
4.2 类选择符
<head>
<style type=”text/css”>
.littlered{color:red;font-size:18px}
.littlegreen{color:green;font-size:18px}
</style>
</head>
<body>
<div class=”littlered”>红色,并且字体比较小</div>
<span class=”littlegreen”>绿色,并且字体比较小</span>
</body>
4.3ID选择符
<head>
<styletype="text/css">
#szg{color:red}
</style>
</head>
<body>
<pid="szg">id选择符</p>
</body>