css:指的是Cascading Style Sheets,即层叠样式表,它是一种设计网页样式及布局的技巧。所谓“层叠”,实际上指的是将显示样式与显示内容分离。
css的基本语法
css由三部分组成:选择符(selector) 属性(properties)属性的值(value)。
selecor{
property1:values;
……
……
propertyN:values
}
用户将上式样式表定义用一对<style>标签加入到html文件中,样式表对当前文件有效,此种用法成为内联样式表。
例子:
<!DOCTYPE html>
<html>
<head>
<title>cssuse.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
body{
background-color: yellow
}
h1,h2,p{
background-color:#00F00;
color:red
}
</style>
</head>
<body>
This is the body content <br/>
<h1>this is the H1 content</h1>
<h2>this is the H2 content</h2>
<p>this is the P content</p>
</body>
</html>
css选择符:html选择符,类选择符,id选择符。
html选择符重点:HTML标签作为css选择符,HTML选择符之后是对应元素的属性及属性值,如属性值有多个单词组成,必须加上引号才可以被识别。
类选择符重点:在选择符之前需要加一个实心圆点,表示选择符的类型是类选择符。
格式:
selctor.classname{
property1:value;
…………
}
<!DOCTYPE html>
<html>
<head>
<title>css.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
.one {
color:red;
font-size:12pt;
}
.tow{
color:green;
font-size:14pt;
}
.three{
color:#800080;
font-size:16pt;
}
</style>
</head>
<body>
<h1 class=one>这是引用one类样式的标题</h1>
<p class=one>这是引用one类样式的段落</p>
<p class=tow>这是引用one类样式的段落</p>
<p class=three>这是引用one类样式的段落<p>
</body>
</html>
id选择符:当需要为某个元素单独设计时,可以使用id选择符。使用id选择符要先为设计样式的对象定义一个id属性。id选择符是唯一的,不同元素的id值不可以重复。
因为id选择符占用元素的id属性,因此要避免少用。
<!DOCTYPE html>
<html>
<head>
<title>cssid.html</title>
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
<style type="text/css">
#top{
color:blue;
font-size:18pt;
font-family:黑体;
background-color:#FFB6C1;
}
</style>
</head>
<body>
<div id="top">
A<br/>
B<br/>
C<br/>
D<br/>
</div>
</body>
</html>
css继承:当标签具有嵌套关系时,内部标签自动拥有外部标签的不冲突的样式的性质。其中border书姓没有继承性。
css的使用方式:内嵌方式,内部样式表,使用<link>标签链接外部样式表。