CSS语法及HTML结合
二、CSS语法
p{color:red;}
选择器{属性名:属性值 ;}
选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号
属性名和冒号之间最好不要有空格。
CSS注释/* */
使用选择器p{ }和<p>标签的区别:
p{
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p style = "color:red">你好</p>
三、CSS和HTML的结合方式
CSS代码理论上位置是任意的,但通常写在style标签里
CSS和HTML的结合方式有3种:
a. 行级样式表:采用style属性,范围只针对此标签适用
<div style = "border:1px solid red ;">大家好</div>
b. 内嵌样式表:采用<style>标签完成。范围针对此页面
<style type="text/css">
c. 外部样式表: 采用建立样式表文件。针对多个页面.
引入样式表文件的方式:
1):采用<link>标签
eg:<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
2):采用import,必须写在<style>标签中,并且必须是第一句
eg: @import url(a.css) ;
两种引入方式的区别:
外部样式表中不能写<link>标签,但是可以写import语句
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<title>Document</title>
<style type="text/css">
/*
CSS和HTML的结合方式:
1. 行级样式表: 采用style属性完成
2. 内部样式表: 采用style标签完成
3. 外部样式表: 采用外部css文件完成
*/
p{
font-weight:bold;
font-style:italic;
}
</style>
</head>
<body>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p style = "color:red">你好</p>
</body>
</html>