CSS全称为“层叠样式表 (Cascading Style Sheets)”,它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小、颜色、字体加粗等。
语法一:内联式css样式,直接写在现有的HTML标签中
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
</head>
<body>
<p style=font-size:12px;color:red;font-weight:bold;>传说中,黄帝是大约4500多年前,生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷,驯养牲畜,促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。</p>
</body>
</html>
语法二:嵌入式css样式,写在当前的文件中
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>认识CSS样式</title>
<style type="text/css">
p{
font-size:12px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
</style>
</head>
<body>
<p>传说中,黄帝是大约4500多年前,生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷,驯养牲畜,促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。</p>
</body>
</html>
语法三:外部式css样式,写在单独的一个文件中
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>嵌入式css样式</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>传说中,黄帝是大约4500多年前,生活在黄河流域原始部落的部落联盟首领。他提倡种植五谷,驯养牲畜,促使这个部落联盟逐步强大。他曾率领部落打败黄河上游的炎帝部落和南方的蚩尤部落。</p>
</body>
</html>
style.css
p{
font-size:12px;/*设置文字字号*/
color:red;/*设置文字颜色*/
font-weight:bold;/*设置字体加粗*/
}
注意:
(1)css样式文件名称以有意义的英文字母命名,如 main.css。
(2)rel=”stylesheet” type=”text/css” 是固定写法不可修改。
(3)<link>
标签位置一般写在<head>
标签之内。
三种方式的优先级:内联式>嵌入式>外部式(就近原则)