CSS 基础
2019-07-30 本文已影响0人
小凡凡520
一、概念
层叠样式表，定义了如何显示HTML元素
二、背景
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>, <p>, <table> 这样的标签，HTML 当初被指望用来表达“这是标题”、“这是段落”、“这是表格”之类的信息。而文档的布局被期望由浏览器来完成，而不使用任何的格式化标签。
由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范之中，因此创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出 STYLES（样式）。
所有的主流浏览器均支持层叠样式表。
三、层叠次序
一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。
1、浏览器缺省设置
2、外部样式表
3、内部样式表（位于 <head> 标签内部）
4、内联样式（在 HTML 元素内部）
font-size: 112px;/文字大小/
color: blueviolet;/颜色/
font-weight: bold;/字体加粗/
内嵌
<p style="color: blue">sss</p>
嵌入式
<head>
<meta charset="UTF-8" content="text/html" http-equiv="content-type">
<title>demo</title>
<style>
p{
}
</style>
</head>
外置
<head>
<meta charset="UTF-8" content="text/html" http-equiv="content-type">
<title>demo</title>
<link href="outCSS.css" rel="stylesheet">
</head>
id选择器
#id1{
}
类选择器
.c1{
font-size: 100px;
}
id选择器的值具有唯一性
类选择器的值不唯一
子选择器(父点的直接子节点)
ul>li{
color: blue;
}
包含（后代选择器）
p span{
color: black;
}
通用选择器
* {
}
伪类选择器
a:hover{
font-size: 200px;
}
分组选择器
a,span {
}
CSS继承
p{
font-size: 100px;
}
<p> tes<span>t</span> </p>
CSS特殊性（权值）
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。
p{color:red;} /*权值为1*/
p span{color:green;} /*权值为1+1=2*/
.warning{color:white;} /*权值为10*/
p span.warning{color:purple;} /*权值为1+1+10=12*/
#footer .note p{color:yellow;} /*权值为100+10+1=111*/
CSS的层叠特性
内嵌 》嵌入 》外置
CSS重要性
p{
font-size: 100px !important;
}
