CSS 基础
CSS(Cascading Style Sheets)层叠样式表。html负责语义的部分,css则是负责样式的部分,定义如何显示HTML元素。
CSS样式表分为内联样式(在HTML元素内部)优先级最高,是具体用在某个标签内部,针对某个标签的。
内部样式表(位于标签内部),在内部定义样式例如
<head>
<meta http-equiv="Content-Type" content="text/;charset=UTF-8">
<title> 内部样式表</title>
<style type="text/css">
div{background-color:red;
font-size:20px;
width: 100px;
height: 100px;
}
p[class="ip"]{color:gray;
}
</style>
</head>
外联样式表(位于css 样式表中)需要使用样式的HTML页面使用标签链接到样式表。标签在HTML文件的标签内:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<link rel="stylesheet" href="zontibuju" />
</head>
链接到了一个名字为zongtibuju的css外部样式表,此HTML表可以应用zongtibuju的样式。
CSS的构成:选择器{声明1;声明2;声明3;……},声明的构成:属性:属性值;例如: div{background-color:red;font-size:20px;}.
选择器的分类
1. 派生选择器:根据元素在上下文的关系来定义样式。例如:P标签里面有strong标签,strong标签可以定义为
p strong{ color:blue; font-size: 20px; }.
2.id选择器:标有特定id的HTML元素指定的特定样式。它用“#”来定义。例如:有id为taday的标签,其样式可定义为
#taday{ background-color: #fff; font-family:黑体; }.
3.class选择器:具有相同属性的多个标签可利用class选择器来定义,class选择器以一个点号显示。例如有class名字为bg的标签.
bg{background-color: #00f; font-size: 16px; }。
4. 属性选择器:根据元素的属性以及属性值来选择元素。例如想让某个p标签的class为ip的内容变为红色,而其他的不变,可定义为
p[class=”ip”]{color:gray; }。