从零基础到web前端工程师（三）

最新推荐文章于 2024-08-23 06:12:23 发布

CharlesLC的博客

最新推荐文章于 2024-08-23 06:12:23 发布

阅读量563

点赞数

分类专栏：前端文章标签： html css web

本文链接：https://blog.csdn.net/weixin_45640609/article/details/105134093

版权

前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

前文连接：从零基础到web前端工程师（二）

CSS选择器

初始CSS

从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。
随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也越来越臃肿。于是CSS便诞生了。

CSS(Cascading Style Sheets) 美化样式，CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。
CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。

引入CSS样式表

内部样式表

内嵌式是将CSS代码集中写在HTML文档的head头部标签中，并且用style标签定义，其基本语法格式如下：

<head>
<style type="text/CSS">
    选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
   <style type="text/css">
       h3{
           color: #FF0000;
       }
       div{
           color: #8EA9DB;
       }
       h4{
           color: deeppink;
       }
   p{
       color: #FFD966;
       size: letter;
   }
   </style>
</head>
<body>
<h3>忆江南(1)</h3>

<div>唐.白居易</div>

<p>江南好，风景旧曾谙。(2) 日出江花红胜火，春来江水绿如蓝，(3) 能不忆江南。</p>

<h4>作者介绍</h4>

<p>白居易(772－846) ，字乐天，太原(今属山西)人。唐德宗朝进士，元和三年(808)拜左拾遗，后贬江州(今属江西)司马，移忠州(今属四川)刺史，又为苏州(今属江苏)、同州(今属陕西大荔)刺史。晚居洛阳，自号醉吟先生、香山居士。其诗政治倾向鲜明，重讽喻，尚坦易，为中唐大家。也是早期词人中的佼佼者，所作对后世影响甚大。</p>

<h4>注释</h4>
<p>

    (1)据《乐府杂录》，此词又名《谢秋娘》，系唐李德裕为亡姬谢秋娘作。又名《望江南》、《梦江南》等。分单调、双调两体。单调二十七字，双凋五十四字，皆平韵。(2)谙(音安)：熟悉。(3)蓝：蓝草，其叶可制青绿染料。

</p>
<h4>品评</h4>

<p>此词写江南春色，首句“江南好”，以一个既浅切又圆活的“好”字，摄尽江南春色的种种佳处，而作者的赞颂之意与向往之情也尽寓其中。同时，唯因“好”之已甚，方能“忆”之不休，因此，此句又已暗逗结句“能不忆江南”，并与之相关阖。次句“风景旧曾谙”，点明江南风景之“好”，并非得之传闻，而是作者出牧杭州时的亲身体验与亲身感受。这就既落实了“好”字，又照应了“忆”字，不失为勾通一篇意脉的精彩笔墨。三、四两句对江南之“好”进 　行形象化的演绎，突出渲染江花、江水红绿相映的明艳色彩，给人以光彩夺目的强烈印象。其中，既有同色间的相互烘托，又有异色间的相互映衬，充分显示了作者善于著色的技巧。篇末，以“能不忆江南”收束全词，既托出身在洛阳的作者对江南春色的无限赞叹与怀念，又造成一种悠远而又深长的韵味，把读者带入余情摇漾的境界中。</p>
</body>
</html>

显示效果：
在这里插入图片描述
注意：
语法中，style标签一般位于head标签中title标签之后，也可以把他放在HTML文档的任何地方。
type=“text/CSS” 在html5中可以省略，写上也比较符合规范，所以这个地方可以写也可以省略。

行内式（内联样式）

内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下：

<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>

例如，我修改了上面代码实例中最后一个p标签，修改内容：
<p style="color: #152161;background-color: #FF0000">

显示效果：
在这里插入图片描述

语法中style是标签的属性，实际上任何HTML标签都拥有style属性，用来设置行内式。其中属性和值的书写规范与CSS样式规则相同，行内式只对其所在的标签及嵌套在其中的子标签起作用。

外部样式表（外链式）

链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中，通过link标签将外部样式表文件链接到HTML文档中，其基本语法格式如下：

<head>
  <link href="CSS文件的路径"  rel="stylesheet" />
</head>

代码实例：
css部分（这个我创建在一个css文件夹中）

h3{
    color: #0000FF;
}
div{
    color:pink
}
p{
    color: gold;
    size: 25pt;
}

html部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文言文</title>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h3 align="center">捕蛇者说</h3>
<div align="center">作者：柳宗元</div>
<p>永州之野产异蛇：黑质而白章，触草木尽死；以啮人，无御之者。然得而腊之以为饵，可以已大风、挛踠、瘘疠，去死肌，杀三虫。其始太医以王命聚之，岁赋其二。募有能捕之者，当其租入。永之人争奔走焉。
    有蒋氏者，专其利三世矣。问之，则曰：“吾祖死于是，吾父死于是，今吾嗣为之十二年，几死者数矣。”言之貌若甚戚者。余悲之，且曰：“若毒之乎？余将告于莅事者，更若役，复若赋，则如何？”蒋氏大戚，汪然出涕，曰：“君将哀而生之乎？则吾斯役之不幸，未若复吾赋不幸之甚也。向吾不为斯役，则久已病矣。自吾氏三世居是乡，积于今六十岁矣。而乡邻之生日蹙，殚其地之出，竭其庐之入。号呼而转徙，饿渴而顿踣。触风雨，犯寒暑，呼嘘毒疠，往往而死者，相藉也。曩与吾祖居者，今其室十无一焉。与吾父居者，今其室十无二三焉。与吾居十二年者，今其室十无四五焉。非死即徙尔，而吾以捕蛇独存。悍吏之来吾乡，叫嚣乎东西，隳突乎南北；哗然而骇者，虽鸡狗不得宁焉。吾恂恂而起，视其缶，而吾蛇尚存，则弛然而卧。谨食之，时而献焉。退而甘食其土之有，以尽吾齿。盖一岁之犯死者二焉，其余则熙熙而乐，岂若吾乡邻之旦旦有是哉。今虽死乎此，比吾乡邻之死则已后矣，又安敢毒耶？”
    余闻而愈悲，孔子曰：“苛政猛于虎也！”吾尝疑乎是，今以蒋氏观之，犹信。呜呼！孰知赋敛之毒，有甚于是蛇者乎！故为之说，以俟夫观人风者得焉。</p>

</body>
</html>

显示效果：
在这里插入图片描述
注意： link 是个单标签哦!!!
该语法中，link标签需要放在head头部标签中，并且必须指定link标签的三个属性，具体如下：

href：定义所链接外部样式表文件的URL，可以是相对路径，也可以是绝对路径。
type：定义所链接文档的类型，在这里需要指定为“text/CSS”，表示链接的外部文件为CSS样式表。
rel：定义当前文档与被链接文档之间的关系，在这里需要指定为“stylesheet”，表示被链接的文档是一个样式表文件。

三种样式表总结（位置）

样式表	优点	缺点	使用情况	控制范围
行内样式表	书写方便，权重高	没有实现样式和结构相分离	较少	控制一个标签（少）
内部样式表	部分结构和样式相分离	没有彻底分离	较多	控制一个页面（中）
外部样式表	完全实现结构和样式相分离	需要引入	最多，强烈推荐	控制整个站点（多）

CSS样式规则

使用HTML时，需要遵从一定的规范。CSS亦如此，要想熟练地使用CSS对网页进行修饰，首先需要了解CSS样式规则，具体格式如下：
在这里插入图片描述

在上面的样式规则中:

1.选择器用于指定CSS样式作用的HTML对象，花括号内是对该对象设置的具体样式。
2.属性和属性值以“键值对”的形式出现。
3.属性是对指定的对象设置的样式属性，例如字体大小、文本颜色等。
4.属性和属性值之间用英文“:”连接。
5.多个“键值对”之间用英文“;”进行区分。
可以用段落和表格的对齐的演示。

CSS基础选择器

要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。

标签选择器（元素选择器）

标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。其基本语法格式如下：

标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
或者
元素名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

标签选择器最大的优点是能快速为页面中同类型的标签统一样式，同时这也是他的缺点，不能设计差异化样式。标签选择器可以把某一类标签全部选择出来 div span

前面写的代码实例其实都是标签选择器 ，都是为页面中某一标签指定统一的CSS样式。

类选择器

类选择器使用“.”（英文点号）进行标识，后面紧跟类名，其基本语法格式如下：

.类名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
标签调用的时候用 class=“类名” 即可。
类选择器最大的优势是可以为元素对象定义单独或相同的样式。可以选择一个或者多个标签

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Goole</title>
    <style>
        span{
            font-size: 150pt;
        }
        .g {
            color: skyblue;
        }
        .o {
            color: red;
        }
        .oo {
            color: orange;
        }
        .l {
            color: green;
        }
    </style>
</head>
<body>
<span class="g">G</span>
<span class="o">o</span>
<span class="oo">o</span>
<span class="g">g</span>
<span class="l">l</span>
<span class="o">e</span>

</body>
</html>

结果显示：
在这里插入图片描述

多类名选择器

我们可以给标签指定多个类名，从而达到更多的选择目的。
例如：
在这里插入图片描述

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.font20 {
			font-size: 20px;
			color: blue;
		}
		.red {
	 	color: red;
	 }
		.fontw {
	 	font-weight: 700;
	 }
	</style>
</head>
<body>
	<div class="font20 red fontw">多类名选择器</div>
	<div>多类名选择器</div>
	<div>多类名选择器</div>
	<div>多类名选择器</div>
	<p class="red">多类名选择器</p>
	<p>多类名选择器</p>
	<p>多类名选择器</p>
	<p class="fontw">多类名选择器</p>
	<div>多类名选择器</div>
</body>
</html>

显示效果：

在这里插入图片描述
注意:

样式显示效果跟HTML元素中的类名先后顺序无关,受CSS样式书写的上下顺序有关。(也就是是说在上面的代码中如果换了.font20和.red的顺序字体就会变蓝色)
各个类名中间用空格隔开。

id选择器

id选择器使用“#”进行标识，后面紧跟id名，其基本语法格式如下：
#id名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }
该语法中，id名即为HTML元素的id属性值，大多数HTML元素都可以定义id属性，元素的id值是唯一的，只能对应于文档中某一个具体的元素。

实例代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	#last {
		color: pink;/* id只能有一个*/
	}
	.set_color{
			color: red;
		}
	</style>
</head>
<body>
	<div>id选择器</div>
	<div >id选择器</div>
	<div class="set_color">id选择器</div>
	<div id="last">id选择器</div>  <!-- id只能有一个-->
 </body>
</html>

显示效果：
在这里插入图片描述
id选择器和类选择器区别

区别：

W3C标准规定，在同一个页面内，不允许有相同名字的id对象出现，但是允许相同名字的class。
也就是说具有相同名称的class可以出现多次，而id只能出现一次。就好比人的名字和身份证的区别。
id选择器和类选择器最大的不同在于使用次数上

通配符选择器

通配符选择器用“*”号表示，他是所有选择器中作用范围最广的，能匹配页面中所有的元素。其基本语法格式如下：

* { 属性1:属性值1; 属性2:属性值2; 属性3:属性值3; }

代码案例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style> 
	 * {  /** 代表所有标签的意思 使用较少 */
		color: lightskyblue;
	 }
	</style>
</head>
<body>
	<div>通配符选择器</div>
	<p>通配符选择器</p>
	<span>通配符选择器</span>
	<table>通配符选择器</table>
</body>
</html>

结果显示：
在这里插入图片描述

CSS字体样式属性

font-size:字号大小 ：font-size属性用于设置字号，该属性的值可以使用相对长度单位，也可以使用绝对长度单位。其中，相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。具体如下：
在这里插入图片描述

font-family:字体 ：
font-family属性用于设置字体。网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑，可以使用如下CSS样式代码：
p{ font-family:"微软雅黑";}
可以同时指定多个字体，中间以逗号隔开，表示如果浏览器不支持第一个字体，则会尝试下一个，直到找到合适的字体。

注意：

现在网页中普遍使用14px+。
尽量使用偶数的数字字号。ie6等老式浏览器支持奇数会有bug。
各种字体之间必须使用英文状态下的逗号隔开。
中文字体需要加英文状态下的引号，英文字体一般不需要加引号。当需要设置英文字体时，英文字体名必须位于中文字体名之前。
如果字体名中包含空格、#、$等符号，则该字体必须加英文状态下的单引号或双引号，例如font-family: “Times New Roman”;。
尽量使用系统默认字体，保证在任何用户的浏览器中都能正确显示。

CSS Unicode字体：
在 CSS 中设置字体名称，直接写中文是可以的。但是在文件编码（GB2312、UTF-8 等）不匹配时会产生乱码的错误。xp 系统不支持类似微软雅黑的中文。

方案一：你可以使用英文来替代。比如 font-family:“Microsoft Yahei”。

方案二：在 CSS 直接使用 Unicode 编码来写字体名称可以避免这些错误。使用 Unicode 写中文字体名称，浏览器是可以正确的解析的。
例如：
font-family: "\5FAE\8F6F\96C5\9ED1"，表示设置字体为“微软雅黑”。

这里关于字体和Unicode编码转化的表格

字体名称	英文名称	Unicode 编码
宋体	SimSun	\5B8B\4F53
新宋体	NSimSun	\65B0\5B8B\4F53
黑体	SimHei	\9ED1\4F53
微软雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷体_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隶书	LiSu	\96B6\4E66
幼园	YouYuan	\5E7C\5706
华文细黑	STXihei	\534E\6587\7EC6\9ED1
细明体	MingLiU	\7EC6\660E\4F53
新细明体	PMingLiU	\65B0\7EC6\660E\4F53

font-weight:字体粗细
字体加粗除了用 b 和 strong 标签之外，可以使用CSS 来实现。

font-weight属性用于定义字体的粗细，其可用属>性值：normal、bold、bolder、lighter、>100~900（100的整数倍）(其中400等价于normal，而700等价于bold)。

font-style:字体风格
字体倾斜除了用 i 和 em 标签之外，可以使用CSS 来实现.
font-style属性用于定义字体风格，如设置斜体、倾斜或正常字体，其可用属性值如下：

normal：默认值，浏览器会显示标准的字体样式。
italic：浏览器会显示斜体的字体样式。
oblique：浏览器会显示倾斜的字体样式。

font:综合设置字体样式
font属性用于对字体样式进行综合设置，其基本语法格式如下：
选择器{font: font-style font-weight font-size/line-height font-family;}

使用font属性时，必须按上面语法格式中的顺序书写，不能更换顺序，各个属性以空格隔开。
注意：其中不需要设置的属性可以省略（取默认值），但必须保留font-size和font-family属性，否则font属性将不起作用。

CSS外观属性

color:文本颜色
color属性用于定义文本的颜色，其取值方式有如下3种：

预定义的颜色值，如red，green，blue等。
十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用的定义颜色的方式。
RGB代码，如红色可以表示为rgb(255,0,0)或rgb(100%,0%,0%)。

需要注意的是，如果使用RGB代码的百分比颜色值，取值为0时也不能省略百分号，必须写为0%。
line-height:行间距
ine-height属性用于设置行间距，就是行与行之间的距离，即字符的垂直间距，一般称为行高。line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最多的是像素px.

text-align:水平对齐方式
text-align属性用于设置文本内容的水平对齐，相当于html中的align对齐属性。其可用属性值如下：

left：左对齐（默认值）
right：右对齐
center：居中对齐

text-indent:首行缩进
text-indent属性用于设置首行文本的缩进，其属性值可为不同单位的数值、em字符宽度的倍数、或相对于浏览器窗口宽度的百分比%，允许使用负值, 建议使用em作为设置单位。

1em 就是一个字的宽度如果是汉字的段落， 1em 就是一个汉字的宽度

text-decoration 文本的装饰
text-decoration 通常我们用于给链接修改装饰效果

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。下划线也是我们链接自带的
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。

CSS复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。(就是两者都要满足的意识)
在这里插入图片描述

并集选择器:

并集选择器（CSS选择器分组）是各个选择器通过逗号连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。

在这里插入图片描述


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        div.red{
            color: red; /*交集选择器*/
        }
        p,span{
            color:pink; /*并集选择器*/
        }
    </style>

</head>
<body>
    <div class="red">复合选择器</div>
    <div>复合选择器</div>
    <div>复合选择器</div>
    <p>复合选择器</p>
    <p>复合选择器</p>
    <p>复合选择器</p>
    <span>复合选择器</span>
    <span>复合选择器</span>

</body>
</html>

实例结果:
在这里插入图片描述

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。

代码实例：
这里有个需求，只要把div下的p标签下的天天向上变为红色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后代选择器</title>
    <style>
        div p{
            color: red;
        }
    </style>
</head>
<body>
    <div>好好学习</div>
    <div>好好学习</div>
    <div>好好学习</div>
    <div> <p>
        天天向上
    </p></div>
<p>天天向上</p>
<p>天天向上</p>
<p>天天向上</p>

</body>
</html>

效果实现：
在这里插入图片描述

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接，注意，符号左右两侧各保留一个空格。(就指亲儿子)

比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

一个小案例：

需求

链接登录的颜色为红色,同时主导航栏里面的所有的链接改为蓝色
主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。
主导航栏里面的一级菜单链接文字颜色为绿色。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>小案例</title>
<!--    需求-->
<!--    1. 链接 登录 的颜色为红色,同时主导航栏里面的所有的链接改为蓝色   -->
<!--    2. 主导航栏和侧导航栏里面文字都是14像素并且是微软雅黑。-->
<!--    3. 主导航栏里面的一级菜单链接文字颜色为绿色。-->
    <style>
        .site-r > a{
            color: red;
        }
        .nav{
            color: blue;
        }
        .nav,.sitenav{
            font-family: "微软雅黑";
            font-size: 14px;

        }
        .nav > ul > li >a{
            color: green;
        }


    </style>
</head>
<body>
<div class="nav">    <!-- 主导航栏 -->
    <ul>
        <li><a href="#">公司首页</a></li>
        <li><a href="#">公司简介</a></li>
        <li><a href="#">公司产品</a></li>
        <li>
            <a href="#">联系我们</a>
            <ul>
                <li><a href="#">公司邮箱</a></li>
                <li><a href="#">公司电话</a></li>
            </ul>
        </li>
    </ul>
</div>
<div class="sitenav">    <!-- 侧导航栏 -->
    <div class="site-l">左侧侧导航栏</div>
    <div class="site-r"><a href="#">登录</a></div>
</div>
</body>
</html>

显示效果：
在这里插入图片描述

伪类选择器

链接伪类选择器

:link /* 未访问的链接 */
:visited /* 已访问的链接 */
:hover /* 鼠标移动到链接上 */
:active /* 选定的链接 */

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	a:link {  /* 未访问过的连接状态*/
		color: #3c3c3c;
		font-size: 25px;
		text-decoration: none;  /*取消下划线*/
		font-weight: 700;
	}
	a:visited {  /*这个链接我们已经点过的样子  已访问过链接*/

		color: orange;

	}
	a:hover {  /*鼠标经过连接时候的样子*/
		color: #f10215;
	}
	a:active {  /*鼠标按下时候的样子*/
		color: green;

	}

	</style>
</head>
<body>
	<a href="http://www.百度.com">秒杀</a>
</body>
</html>

显示效果：
点击前是颜色是：#3c3c3c（差不多黑色）经过是红色，点击是绿色，点击后是橘色，
而且一般按这4个状态的顺序写
在这里插入图片描述
但是，在项目中，我们一般这样写：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	 a {
	 	color: #333;
	 	text-decoration: none;
	 	font-size: 25px;
	 	font-weight: 700;
	 }
	 a:hover {  /*鼠标经过*/
		color: #f10215;;
	 }
	</style>
</head>
<body>
	<a href="http://www.baidu.com">秒杀</a>
</body>
</html>

感谢，你能看到这里，文章中难免会有错误，请指出或提出建议
下文链接：跟新中 $\cdots$

CharlesLC的博客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
3
评论
从零基础到web前端工程师（三）

前文连接：从零基础到web前端工程师（二）CSS选择器文章目录CSS选择器初始CSS引入CSS样式表内部样式表行内式（内联样式）外部样式表（外链式）三种样式表总结（位置）CSS样式规则CSS基础选择器标签选择器（元素选择器）类选择器多类名选择器初始CSS从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属...
复制链接

扫一扫