CSS 简介
CSS 概述
- CSS 指层叠样式表 (Cascading Style Sheets)
- 样式定义如何显示 HTML 元素
- 样式通常存储在样式表中
- 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
- 外部样式表可以极大提高工作效率
- 外部样式表通常存储在 CSS 文件中
- 多个样式定义可层叠为一
样式解决了一个普遍的问题
HTML 标签原本被设计为用于定义文档内容。通过使用
<h1>、<p>、<table>
这样的标签,HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局由浏览器来完成,而不使用任何的格式化标签。
由于两种主要的浏览器(Netscape 和 Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题,万维网联盟(W3C),这个非营利的标准化联盟,肩负起了 HTML 标准化的使命,并在 HTML 4.0 之外创造出样式(Style)。
所有的主流浏览器均支持层叠样式表
优势
内容与表现分离
网页的表现统一,容易修改
丰富的样式,使得页面布局更加灵活
减少网页的代码量,增加网页的浏览速度,节省网络带宽
运用独立于页面的CSS,有利于网页被搜索引擎收录
HTML中引入CSS样式
行内样式
使用style属性引入CSS样式,所有的标签都有style属性,通过style属性可以设置样式
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。请慎用这种方法,例如当样式仅需要在一个元素上应用一次时。
要使用内联样式,你需要在相关的标签内使用样式(style)属性。Style 属性可以包含任何 CSS 属性。
<h1 style="color: darkblue;">这是css样式--行内样式</h1>
<h1>原来的h1标签</h1>
内部样式表
CSS代码写在head的style标签中
优点
方便在同页面中修改样式
缺点
不利于在多页面间共享复用代码及维护,对内容与样式的分离也不够彻底
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css样式</title>
<style>
/* style标签用来引入css样式 */
p{
color: red;
}
</style>
</head>
<body>
<h1 style="color: darkblue;">
这是css样式--行内样式</h1>
<h1>原来的h1标签</h1>
<p>
5月23日,滴滴公告称,将推进ADS(American Depositary Shares, 即美国存托股份)
从纽约证交所退市。滴滴计划于6月2日或之后向美国证券交易委员会递交FORM 25表格,
以将其美国存托凭证从纽约证券交易所除名。
这距离2021年6月30日滴滴在纽交所上市,整整过去了307天。
</p>
</body>
</html>
外部样式表
外部样式表
CSS代码保存在扩展名为.css的样式表中
HTML文件引用扩展名为.css的样式表,有两种方式
链接式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css样式</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<ul>
<li>5月23日,滴滴公告称,将推进ADS(American D</li>
<li>5月23日,滴滴公告称,将推进ADS(American D</li>
<li>5月23日,滴滴公告称,将推进ADS(American D</li>
<li>5月23日,滴滴公告称,将推进ADS(American D</li>
</ul>
</body>
</html>
导入式
<head>
……
<style type="text/css">
<!--
@import url("style.css");
-->
</style>
</head>
优先级
行内样式 > 外部/内部样式
外部样式和内部样式同级,会根据引入的先后顺序,覆盖样式效果
CSS3基本选择器
标签选择器
HTML标签作为标签选择器的名称
<h1>…<h6>、<p>、<img/></h1>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>css样式</title>
<style>
/* style标签用来引入css样式 */
p{
color: red;
}
</style>
</head>
<body>
<h1 style="color: darkblue;">
这是css样式--行内样式</h1>
<h1>原来的h1标签</h1>
<p>
5月23日,滴滴公告称,将推进ADS(American Depositary Shares, 即美国存托股份)
从纽约证交所退市。滴滴计划于6月2日或之后向美国证券交易委员会递交FORM 25表格,
以将其美国存托凭证从纽约证券交易所除名。
这距离2021年6月30日滴滴在纽交所上市,整整过去了307天。
</p>
</body>
</html>
类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>望庐山瀑布</title>
<style>
.a{
color: aqua;
}
</style>
</head>
<body>
<h1>望庐山瀑布</h1>
<p class="a">日照香炉生紫烟</p>
<p class="a">遥看瀑布挂前川</p>
<p>飞流直下三千尺</p>
<p>疑是银河落九天</p>
</body>
</html>
ID选择器
id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。
id 选择器以 “#” 来定义。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>望庐山瀑布</title>
<style>
.a{
color: aqua;
}
#a{
color: blue;
}
</style>
</head>
<body>
<h1>望庐山瀑布</h1>
<p class="a">日照香炉生紫烟</p>
<p class="a">遥看瀑布挂前川</p>
<p id="a">飞流直下三千尺</p>
<p>疑是银河落九天</p>
</body>
</html>
注意:id 属性只能在每个 HTML 文档中出现一次
优先级
id>class>标签
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>望庐山瀑布</title>
<style>
p{
color: red;
}
.a{
color: aqua;
}
#a{
color: blue;
}
</style>
</head>
<body>
<h1>望庐山瀑布</h1>
<p class="a" id="a">日照香炉生紫烟</p>
<p class="a">遥看瀑布挂前川</p>
<p id="a">飞流直下三千尺</p>
<p>疑是银河落九天</p>
</body>
</html>
层次选择器
后代选择器
后代选择器两个选择符之间必须要以空格隔开,中间不能有任何其他的符号插入
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次</title>
<style>
/* 后代 E F body中所有的p标签 */
body p{
background: red;
}
</style>
</head>
<body>
<p>1</p>
<p>1</p>
<p>1</p>
<ul>
<li><p>1</p></li>
<li><p>1</p></li>
<li><p>1</p></li>
<li><p>1</p></li>
</ul>
</body>
</html>
子选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次</title>
<style>
/* 后代 E F body中所有的p标签 */
body p{
background: red;
}
/*子选择器 E>F E的直接子元素F,不包含间接的子元素*/
body>p{
background: blue;
}
</style>
</head>
<body>
<p>1</p>
<p>1</p>
<p>1</p>
<ul>
<li><p>1</p></li>
<li><p>1</p></li>
<li><p>1</p></li>
<li><p>1</p></li>
</ul>
</body>
</html>
相邻兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次</title>
<style>
/* 后代 E F body中所有的p标签 */
body p{
background: red;
}
/*子选择器 E>F E的直接子元素F,不包含间接的子元素*/
body>p{
background: blue;
}
/**相邻兄弟选择器 E+F .p1 相邻的 p标签*/
.p1+p{
background: yellow;
}
</style>
</head>
<body>
<p class="p1">1</p>
<p>2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
</ul>
</body>
</html>
通用兄弟选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>层次</title>
<style>
/* 后代 E F body中所有的p标签 */
body p{
background: red;
}
/*子选择器 E>F E的直接子元素F,不包含间接的子元素*/
body>p{
background: blue;
}
/**相邻兄弟选择器 E+F .p1 相邻的 p标签*/
.p1+p{
background: yellow;
}
/* 通用兄弟选择器 E~F 和E同级的F */
.p1~p{
background: gray;
}
</style>
</head>
<body>
<p class="p1">1</p>
<p class="p2">2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
</ul>
</body>
</html>
结构伪类选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构伪类</title>
<style>
/* ul中的第一个li */
ul li:first-child{
background: red;
}
/* ul中的最后一个li */
ul li:last-child{
background: blue;
}
/* 所有p标签的第3个 */
p:nth-child(3){
background: yellow;
}
/* body中的第2个p */
body p:nth-of-type(2){
background: yellowgreen;
}
</style>
</head>
<body>
<p class="p1">1</p>
<p class="p2">2</p>
<p>3</p>
<ul>
<li><p>4</p></li>
<li><p>5</p></li>
<li><p>6</p></li>
<li><p>7</p></li>
</ul>
</body>
</html>
属性选择器
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Og5S4IR2-1653894429597)(D:\课件\笔记\CSS.assets\image-20220527100635081.png)]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>结构伪类</title>
<style>
a{
display: block;
height: 60px;
width: 60px;
background: gray;
float: left;
margin: 10px;
text-align: center;
line-height: 60px;
font-size: 20px;
}
/** a[id] a标签只要有id属性*/
a[id]{
background: yellow;
}
/** a[class=a3] class属性等于a3
E[attr=val]属性选择器中,属性和属性值必须完全匹配才能被选中
*/
a[class=a3]{
background: yellowgreen;
}
/*a[nam^=a] nam属性值以a开头的*/
a[nam^=a]{background-color: aqua;}
/*a[nam$=a] nam属性值以a结尾的*/
a[nam$=a]{background-color: chocolate;}
/*a[nam*=a] nam属性值含有a的*/
a[nam*=a]{background-color:khaki;}
</style>
</head>
<body>
<a href="#" id="a1">1</a>
<a href="#" class="a3">2</a>
<a href="#" class="a3">3</a>
<a href="#" nam="a4">4</a>
<a href="#" nam="a5">5</a>
<a href="#" nam="b5a">6</a>
<a href="#">7</a>
<a href="#">8</a>
<a href="#" id="a9">9</a>
</body>
</html>