初始CSS3

2022-11-05 13:37:42

初始CSS3
1.1.什么是CSS
CSS全程为层叠样式表（Cascading Style Sheet），通常又称为风格样式表（Style Sheet）它是用来进行网页风格设计的。
1.CSS在网页中的应用
通过设立样式表，可以统一的控制HTML中各标签的显示属性，如设置字体的颜色、大小、样式等，使用CSS还可以设置文
本居中显示、文本域图片的对齐方式、超链接的不同效果等，这样层叠样式表可以更有效的控制网页外观。
1.3.CSS的发展史
　CSS1

　　作为一项W3C推荐，CSS1发布于 1996年12月17 日。1999 年1月11日，此推荐被重新修订。

　　CSS2

　　作为一项 W3C 推荐，CSS2发布于 1999年1月11日。CSS2添加了对媒介（打印机和听觉设备）和可下载字体的支持。

CSS2.1

2004年W3C升级了CSS2.0版本变成CSS2.1，融入了很多高级的用法，如浮动、定位等属性。

　　CSS3

　　作为一项 W3C 推荐，CSS发布于 2010年，它包括了CSS2.1的所以功能，CSS3 计划将 CSS 划分为更小的模块。
1.4.CSS的优势
（1）内容与表现分离
（2）表现的统一
（3）丰富的样式，使得页面布局更加灵活
（4）减少网页的代码量，提高网页的浏览速度，节省网络宽带
（5）运用独立于页面的CSS，还有利于网页被搜索引擎收录
......
2.1.CSS的基本语法结构
CSS和HTML一样，都是浏览器能够解析的计算机语言。因此，CSS也有自己的语法规则和结构。
（1）CSS规则由两部分构成，即选择器和声明
（2）声明必须放在大括号（{ }）中，并且声明可以是一条或多条
（3）每条声明由一个属性和值组成，属性和值用冒号分开，每条语句以英文分号结尾
2.2.认识<style>标签
在HTML中通过使用<style>标签引入CSS样式。<style>标签用于为HTML文档定义样式信息。
<style>标签位于<head>中，它规定了浏览器中如何程序HTML文档。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>style标签</title>
<style type="text/css">
h1{
font-size: 18px;
color: #FF0000;
}
</style>
</head>
3.1.行内样式表
行内样式就是在HTML标签中直接使用style属性设置CSS样式。style属性提供了一种改变所有HTML元素的样式通用方法。
<h1 style="color: red">style属性的应用</h1>
<p style="font-size: 14px;color: blue">直接在HTML标签中设置的样式</p>
3.2.内部样式表
把CSS代码写在<head>的<style>标签中，与HTML内容位于同一个HTML文件中，就是内部样式表。
如上上述代码。
3.3.外部样式表
外部样式表就是把CSS代码保存为一个单独的样式表文件，文件扩展名为.css，在页面中引用外部样式表即可。
1.链接外部样式表
链接外部样式表就是在HTML5页面中使用<link/>标签链接外部样式表，这个<link/>标签放到页面的<head>标签内。
<head>
......
<link href="style.css" rel="stylesheet" type="text/css"/>
......
</head>
rel="stylesheet"是指在页面中使用这个外部样式表；type="text/css"是指文件的类型是样式表文本；href="style.css"是文件所在的位置。

（1）把页面中的CSS代码单独保存在CSS文件夹下的common.css样式表文件中，在CSS文件中不需要<style>标签。
h1{
color: black;
font-size: 20px;
}
p{
color: green;
font-size: 14px;
}
（2）在HTML文件中使用<link/>标签引用common.css样式表文件。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>链接外部样式表</title>
<link href="CSS01.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1>北京欢迎你</h1>
<p>北京欢迎你，有梦想谁都了不起</p>
<p>有勇气就会有奇迹。</p>
<p>北京欢迎你，为你开天辟地</p>
<p>流动中的魅力充满朝气</p>
</body>
</html>
2.导入外部样式表
导入外部样式表就是在HTML网页中使用@import导入外部样式表。导入样式表的语句必须放在<style>标签中，而<style>标签必须放到页面的<head>标签内。
<head>
......
<style>

<style>
......
</head>
其中@import表示导入文件，前面必须有一个@符合，url("common.css")表示样式表文件位置。
3.连接式与导入式的区别
（1）<link/>标签属于XHTML范畴，而@import是CSS2.1中特有的。
（2）使用<link/>链接的CSS是客户端浏览网页时先将外部CSS文件加载到网页中，在进行编译显示，所以这种情况显示出来的网页与客户预期的效果一样，
即使网速再慢也是一样的效果。
（3）使用@import导入的CSS文件，客户端在浏览网页时先将HTML结构呈现出来，再把外部CSS文件加载到网页当中，当然最终的效果与使用<link/>链接文件效果一样
只是当网速较慢时会先显示没有CSS统一布局的HTML网页，这样就会给用户很不好的感觉，这也是目前大多数网站采用链接外部样式表的主要原因。
4.样式优先级
遵循“就近原则”
3.4.CSS3的基本选择器
在CSS3中，有三种最基本的选择器，分别是标签选择器、类选择器和ID选择器。
1.标签选择器
一个网页由很多的标签组成，如<h1>~<h6>、<p>、<img/>等，CSS标签选择器就是用声明这些标签的。
<html>
<head lang="en">
<meta charset="UTF-8">
<title>标签选择器</title>
<style type="text/css">
h1{
font-size: 18px;
color: #FF0000;
}
</style>
</head>
2.类选择器
<标签名 class="类名称">标签内容</标签名>

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>类选择器</title>
<style type="text/css">
.ren{
font-size: 20px;
color: blue;
}
.green{
font-size: 16px;
color: black;
}
</style>

</head>
<body>
<h1 class="ren">北京欢迎你</h1>
<p class="green">北京欢迎你，有梦想谁都了不起</p>
</body>
</html>
3.ID选择器
ID选择器的使用方法与类选择器基本相同，不同之处在于ID选择器只能在HTML页面中使用一次，因此它的针对性更强。在HTML标签中，只要在HTML中设置id属性，就可以直接调用
CSS中的ID选择器。

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>ID选择器</title>
<style type="text/css">
#suibian{
font-size: 30px;
color: red;
}
#hehe{
font-size: 15px;
color: blue;
}
</style>
</head>
<body>
<h1 id="suibian">静夜思</h1>
<p id="hehe">
床前明月光，<br/>
疑是地上霜。<br/>
举头望明月，<br/>
低头思故乡。<br/>
</p>
</body>
</html>

4.三种基本选择器的优先级
无论哪种方式引用CSS样式，一般都遵循ID选择器>class选择器>标签选择器的优先级。
3.5.CSS的高级选择器
高级选择器分为3大类：层次选择器、结构伪类选择器、属性选择器。
下面详细说明这3大高级选择器
1.层次选择器
层次选择器是通过HTML文档对象模型（Document Object Model，DOM）元素间的层次来选择元素的，其主要的层次关系包括后代、父子、相邻兄弟和通用兄弟等几种关系，通过它们之间
的关系可以快速选定需要的元素。

选择器	类型	功能描述
E F	后代选择器	选择匹配的F元素，且匹配的F元素被包含在匹配的E元素内
E>F	子选择器	选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素
E+F	相邻兄弟选择器	选择匹配的F元素，且匹配的F元素是紧位于匹配的E元素后面
E~F	通用兄弟选择器	选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素

1）后代选择器
后代选择器的作用就是可以选择某元素的后代元素，例如“EF”，E为祖先元素，F为后代元素，那么F元素无论是E元素的子元素、孙辈元素，或更深层次的关系，都将被选中。

<html>
<head lang="en">
<meta charset="UTF-8">
<title>后代选择器</title>
<style type="text/css">
body p{
font-size: 20px;
color: blue;
}
</style>
</head>
2）子选择器
子选择器（E>F),只能选择某元素的子元素，其中E为父元素，F为子元素。

<html>
<head lang="en">
<meta charset="UTF-8">
<title>子选择器</title>
<style type="text/css">
body>p{
font-size: 20px;
color: blue;
}
</style>
</head>
3）相邻兄弟选择器
相邻兄弟选择器（E+F）可以选择紧接在另一个元素后面的元素，它们有一个相同的父级元素，换句话说，E和F是同辈元素，F元素在E元素后面，并且相邻。

<html>
<head lang="en">
<meta charset="UTF-8">
<title>相邻兄弟选择器</title>
<style type="text/css">
.active+p{
font-size: 20px;
color: blue;
}
</style>
</head>
<body>
<h1>北京欢迎你</h1>
<p class="active">北京欢迎你，有梦想谁都了不起</p>
</body>
</html>
4）通用兄弟选择器
通用兄弟选择器（E~F）用于选择某元素后面的所以兄弟元素，它和相邻兄弟选择器类似，需要在同一个父元素之中。也就是说E和F元素都是同辈元素，并且F元素在E元素之后，E~F将选中E元素后面的所以F元素

选择器	功能描述
E：first-child	作为父元素的第一个子元素的元素E
E：last-child	作为父元素的最后一个子元素的元素E
E F：nth-child（n）	选择父级元素E的第n个子元素F，（n可以是1.2.3），关键字为even、odd
E：first-of-type	选择父级内具有指定类型的第一个E元素
E；last-of-type	选择父元素内具有指定的最后一个E元素
E F：nth-of-type（n）	选择父元素内指定类型的第n个F元素

<html>
<head lang="en">
<meta charset="UTF-8">
<title>使用CSS3结构伪类选择器</title>
<style type="text/css">
/*ul的第一个元素*/
ul li:first-child{background: red;}
/*ul最后一个元素*/
ul li:last-child{background: green;}
/*选择到父级里的第一个元素*/
p:nth-child(1){background: yellow;}
/*父元素里第2个类型为p的元素*/
p:nth-child(2){background: blue}
</style>
</head>
<body>
<p>1</p>
<p>2</p>
<p>3</p>
<ul>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
</html>
3.属性选择器

属性选择器	功能描述
E[attr]	选择匹配具有attr的E元素
E[attr=val]	选择匹配具有属性attr的E元素，并且属性值为val（其中val区分大小写）
E[attr^=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val开头的任意字符串
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr，其属性值是以val结尾的任意字符串
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr，其属性值包含了“val”，换句话说，字符串val与属性值中的任意位置相匹配

1.E[attr]属性选择器
E[attr]属性选择器是最简单的一种，用来选择某个属性的元素即可，而无论这个属性值是什么。

a[id]{background:yellow;}
这句代码的意思是选择具有id属性的a元素。

2)E[attr=val]属性选择器
E[attr=val]属性选择器为元素E设置了属性attr，并且它的属性值为val，相比E[attr]属性选择器来说，在众多元素中已经缩小了选择范围，能进一步精确选择自己需要的元素。

a[id=first]{backgroud:red;}
这句代码的意思是选择具有id属性的a元素，并且属性值为filst

注意：E[attr=val]属性选择器中，属性和属性值必须完全匹配才能被选中。
例如：<a href="#" calss="link item"></a>
其中a[class="link"]{...}是找不到匹配元素的，只有a[class="link item"]{...}才能匹配。
3）E[attr*=val]属性选择器
E[attr*=val]属性选择器设置了通配符，为元素E设置了属性attr，并且它的属性值包含“val”字符串，也就是只要所选择的属性中包含有“val”字符串就可以匹配上了。

a[class*links]{background:red;}
这句话的意思是选择所有含有class属性的并且属性值中包含“links”字符串的a元素。

4）E[attr^=val]属性选择器
E[attr^=val]属性选择器为元素E设置了属性attr，并且他的属性值是以字符串“val”开头所以E元素。

a[href^=http]{background:red;}
这句话的意思是选择所有含有href属性的并且属性值以“http”开头的所以a元素。

5）E[attr$=val]属性选择器
E[attr$=val]属性选择器与E[attr^=val]刚好相反，表示选择attr属性的值是以字符串“val”结尾的E元素。

a[href$=png]{background:red;}
这句代码的意思选择所有含有href属性的并且属性值以“png”字符串结尾的所以a元素。

希望对你有所帮助！！！

码农公寓

相关文章