CSS
一、概述
1、简介
css全称是Cascading Sheets ,层叠样式表,级联样式表,简称样式表。
2、作用
设置HTML网页中的元素样式。
3、CSS和HTML的关系
HTML:负责网页结构的搭建,内容的展示;
CSS:负责网页的修饰;
4、CSS与HTML的属性使用原则
w3c建议我们尽量使用css的方式来取代html的属性
css样式:
1)样式代码高度的重用;
2)提高可维护性;
二、语法规范
1、使用CSS的方法
1.1 内联样式 将CSS的样式定义在HTML标签的style属性中 <any style="样式声明"></any> 样式声明 样式属性:值 组成 多个样式声明之间用分号分隔注意: 1、内联样式使用的非常少(禁止使用); 2、样式冲突的时候内联样式优先级最高; 3、内联样式不能重用; 4、项目中一般很少用,只在学习和测试时用;【例子】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p style="color:red;font-size:10px">小白兔</p>
<p style="color:pink;font-size:20px">白又白</p>
<p style="color:blue;">两只耳朵竖起来</p>
<p style="color:red;background:blue">爱吃萝卜和青菜</p>
</body>
</html>
【常用的CSS属性】
color:设置文本的颜色
取值:合法的颜色值(颜色的英文,#a~f*3 #abc)
font-size:设置字体大小
background:设置背景颜色
1.2 内部样式
在<head></head>标签中,添加<style></style>标签,在其内部定义样式规则
<style>
样式规则
</style>
样式规则:由选择器和样式声明组成注意: 1、内部样式在本页面可以重用,但是其他页面不能重用; 2、项目中使用不多,但是学习和测试中大量使用;【例子】
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
p{
color: #aaf;
background: #faf;
}
</style>
</head>
<body>
<p>小白兔</p>
<p>白又白</p>
<p>两只耳朵竖起来</p>
<p>爱吃萝卜和青菜</p>
</body>
</html>