第四章 CSS基础

1、理解CSS层叠样式表(CascadingStyle Sheets)的理念和作用;

2、学会使用CSS样式的基本语法;

3、学会使用CSS的外部文件。

1、理解和熟练使用CSS基本语法,包括选择器,组合器。实现共有标签,多类标签,所有标签,指定标签等标签样式的设定方法;尤其是组合器的理念,以及“空格”和“>”规则的目的,使用场景及区别;

2、理解标签样式的编制理念,包括:让代码干净整洁,代码结构清晰,错误及改错一目了然。写法原则包括:只设定标签样式,多类标签的样式集中编写,同类标签可以指定统一样式,多标签样式可以向上级标签样式集中,发现样式问题可以逐级查找问题和修改。

3、学习调用外部CSS文件。通过<link>标签完成对外部CSS文件中样式的调用。

1、认识和理解CSS的历史沿革和理念;

2、HTML文件如何使用CSS进行样式设定,学习基本语法;

3、理解和掌握CSS选择器,又称简单选择器。规则包括:公共标签名称、“.”(名称)、“#”(id)、“*”(通用选择器,表示所有标签)、“,”(分组选择器,用于多标签);

4、理解和掌握CSS组合器,又称组合选择器。规则包括:后代选择器“空格”(表示该标签下的所有标签,可指定标签类型)、子选择器“>”(表示属于指定标签所有子标签,可指定标签类型);相邻兄弟选择器“+”(表示同级且紧随其后的标签,可指定标签类型);通用兄弟选择器“~”(表示同级的所有标签,可指定标签类型)。

5、理解CSS只管理网页标签样式的原则;

6、不同类标签样式统一赋值原则;

7、上级集中原则;

8、公共标签类样式的单独设定原则;

9、组合器中,不同类型的所有标签,统一设定样式;

10、组合器深度设定,理解“空格”与“>”的区别;

11、理解规则,不一定所有样式的都要按层级去指定;

12、应用外部CSS文件设定样式。

1、Windows10操作系统专业版;

2、HBuilderX编程工具;

3、Chrome浏览器。

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。其中时间线是这样的:

1989年Tim Berners-Lee发明HTML语言。

1990年Tim Berners-Lee和Robert Cailliau共同发明Web(全球广域网)。

1993年6月互联网工程工作小组(IETF)工作草案发布HTML1.0。

1994年,Web真正走出实验室,应用过程中HTML突显局限单调的缺点。为了提高HTML的丰富性和适应性,Hakun Lee提出了CSS的最初建议。

1995年,W3C组织(World Wide Web Consortium)成立,CSS的创作成员全部成为了W3C的工作小组,并且全力以赴负责研发CSS标准,层叠样式表的开发终于走上正轨。12月,层叠样式表的第一份正式标准CSS1(Cascadingstyle Sheets Level 1)完成,成为w3c的推荐标准。

1998年5月CSS2完成,2001年5月23日W3C完成了CSS3的工作草案。2021年CSS3仍然在不断更新。

可以看出,CSS就是为了解决HTML编码过于复杂,样式过于单调,维护难度的缺点,才针对HTML的样式这个问题提出的解决方案。

因此在使用CSS的过程就要明确几点原则:

(1)只针对标签样式进行设定;

(2)尽可能提高样式的统一性,简单性;

(3)降低代码维护的复杂性,提高维护效率;

(4)提高HTML美观程度和界面的友好程度。

我们使用第三章的网页成果,来进行CSS样式的编码改造,同时体会CSS理念和优点。

1、CSS语法和实现

首先我们在<head>标签中采用<style>标签来进行CSS代码的编写。<style>标签中可以使用“type”属性,赋“text/css”值,来表示<style>标签引用的是CSS层叠样式表。

然后我们开始设定全局样式。这里的全局样式其实就是指<html>标签和<body>标签的样式设定。

CSS通用的语法为:

选择器{属性名称:属性值;}

就是说,我们要使用CSS进行样式设定时,首先就要通多CSS的选择器规则确定我们要赋予样式的标签到底是哪个或那些。

设定<html>标签和<body>标签的样式就是采用CSS选择器规则的“公共标签名称”。这个规则只需要输入公有的标签名就可以了。

然后就是样式属性和属性值得设定,这里要通过多个属性进行样式设定的时候,要用“;”结尾和分割。

但要同时赋值<html>标签和<body>标签,需要在两个标签名中间加入“,”分组选择器,达到同时完成<html>标签和<body>标签的样式设定。采用“,”分组选择器同时的设定多个标签类型是,一定要保证其属性是通用的。如果一个标签有这个属性,一个没有,则这个样式在没有属性的标签中是不生效的。

需要注意的是,我们也可以使用CSS选择器中的“*”通用选择器来实现全局样式的设定。但使用“*”通用选择器的缺点是,统一样式过于苛刻,灵活性差,具备样式冲突明显。所以不建议使用。而对<html>标签和<body>标签的设定,实际上没有影响任何其他公用标签或者自定义类名称标签,只是对<html>标签和<body>标签的样式设定。与“*”通用选择器有本质上的区别。

2、通过标签类名称设定CSS样式

所有HTML标签都有“class”属性,是用来为这个标签进行类型名称命名所设立的属性。具体语法是:

class=""

需要注意的是不同类型的标签可以命名为同样的类名称,即不同的HTML标签可以有同样的“class”属性值。我们可以为属性值相同的标签设置同样的样式。

同时“class”属性中可以同时拥有两个值,即两个CSS样式名称。也就是说,一个标签可以从不同的样式设定中继承标签样式,来满足自身的需要。

在“class”属性赋值,及为标签命名时,建议要符合一定的命名规则,保障CSS样式的唯一性,功能性,层级性,类型性和顺序性。例如:lgchyydivimg2,lg表示程序员李刚的名称缩写,c表示是类型名称,hyy是该标签是用来做“欢迎页”(拼音缩写)功能的,div是表示上级标签是<div>标签,img表示本标签的类型是<img>标签,2表示在上一级<div>标签下的第二个<img>标签。“2”这个部分我们也可以用例如“logo”表示这个标签的作用是什么。这样命名的结果是,CSS样式代码的维护简单,逻辑性强,容易发现错误。

接下来就是为这个已经命名类名称的标签进行设定样式属性,具体的语法是:

.类名称{属性名称:属性值;}

这里的“.”是类名称选择器。表示要为这一类标签进行样式设定。

3、组合器的使用

在使用CSS样式进行标签设定的时候,如果为每一个HTML标签都设定“class”类名称时,工作量巨大而繁琐。而CSS的理念之一就是简单干净。因此如果要为页面中每一个标签都设定“class”类名称,就失去了CSS样式引用的意义。

因此我们需要采用CSS选择器和组合器规则进行便捷,就有一定逻辑和精妙程度的样式设定。

例如我已经给一个标签设定了“class”类名称,他的下一标签进行CSS样式设定时,就没有必要再给下一级标签再设定一个“class”类名称了。除非,已经有类名称的标签下面有一定要区分类型和样式的子标签。

这里采用子选择器“>”来实现不通过“class”类名称命名的标签的样式设定。具体语法是:

.类名称>公共标签名称{属性名称:属性值;}

表示设定指定标签下的最近的子标签的样式。

需要理解的是,“>”虽然属于CSS组合器,但是CSS组合器的也叫组合选择器,是逻辑和规则较为复杂的选择器。因此“>”约定俗称的名称为“子选择器”。

4、CSS只设定样式的原则

当为<img>类型的标签设定CSS样式时,其实CSS功能是非常强大的。几乎HTML标签的所有属性和对应的值,CSS都可以设置。这里的<img>标签中的地址属性“src”就是可以设置和实现的,但是他需要浏览器的支持,即不一定所有浏览器都能展示这个设定。

可以确定的是,素有标签中“style”属性中的样式属性,所有类型的浏览器都是支持的。因此在这里建议,用CSS只设定样式,让HTML,CSS,以及以后JavaScript分工合作,都只做自己最擅长的部分。

5、为不同类型标签同时设定样式

当一个已经标签设定了“class”类名称的标签下,所有的标签设定CSS样式,尤其是这些标签类型还不统一时,我们依然不需要逐个标签进行设定。只要这些样式有统一的属性。具体的语法是:

.类名称 *{属性名称:属性值;}

需要注意的是,这里用到是两个选择器,一个是后代选择器“空格”和通用选择器“*”。而不是只用到了*号。CSS中的“空格”是组合器中的一种,名为“后代选择器”。意思就是该标签下的所有标签,无论类型。后代选择器“空格”和子选择器“>”的区别也就在是否指定标签类型。

6、集中统一原则

在CSS样式设定中,我们经常会发现样式设定有时会非常重复,尤其是遇到相同类型标签,功能还相同是,需要重复设定样式,增加了大量的重复工作量。因此,我们要根据经验逐步将统一的样式进行集中或者统一到上一级标签样式的原则来进行CSS的编码。

集中样式设定就需要用到“.”类名称选择器和“,”分组选择器同时使用。具体语法是:

.类名称,.类名称,…{属性名称:属性值;}

同时,上级统一样式时,需要逐步尝试,不能从顶层设计开始就完成样式的设定。这时尤其不利于初学者。需要逐步调试,慢慢调整和适应逻辑。尤其是,不是CSS代码越简洁越好,更不是逻辑越复杂越好。过犹不及,原因是最简洁的代码可能是底层功能接口的统一,并不一定具有所有浏览器的适应性。而逻辑复杂的编码,维护成本高,而且前已发动全身,导致更多不可预见性。所以CSS编码没有最好,是越适合自己越好。

7、公共标签设定

其实前面讲到的<html>标签和<body>标签样式设定就属性公共标签设定。虽然<html>标签和<body>标签的样式设定完成了一个全局的样式标准确定工作。但也只是针对<html>标签和<body>标签自身完成的样式确定。如<a>、<input>等标签的样式其实都需单独设定。这里建议,公共标签尽可能不集中设定样式,而且公共标签本身也要尽可能区别设定。这里提一个选择器语法:

a.类名称{属性名称:属性值}

表示<a>标签中所有相同“class”属性值相同的标签,具有相同的样式。虽然我们本章没有具体介绍,但是实际应用非常广泛。

8、深度指定具体标签样式

当我们遇到类似于<table><tr><td>表格标签这种组合式标签时,而且单元格内还有<div>标签、<a>标签、<img>标签的各种不同组合,尤其是相同重复单元格非常多的时候,对于CSS样式的设定,就需要很强的逻辑能力和长期经验了。

我们需要掌握3条原则:

(1)遇到重复的标签,采用后代选择器“空格”;

(2)遇到需要特指标签,采用子选择器“>”;

(3)瞄准最深的目标写样式,一个实现全部实现。

例如:

.lgcnrltable tr td > div > img{}

这段CSS编码表示,要为类名称为“lgcnrltable”标签设定相应的样式。“空格tr”表示“lgcnrltable”标签下所有的<tr>都要执行;“空格td”表示“lgcnrltable”标签下每一个<tr>中的所有<td>标签都要执行;“> div”表示每一个<td>标签紧随其后的<div>标签都要执行;而“> img”表示最终要为每一个<div>标签紧随其后的<img>标签设定具体的CSS样式。

此外,这种深度的样式直达的写法,很多时候是非常繁琐的。但也许我们想一想,如果所有的表单单元格中都有一个<a>标签。我们只要写成如下代码就可了。例如:

.lgcnrltable a{}

以上代码就表示类名称为“lgcnrltable”的标签下,所有的<a>标签的样式设定。

9、运行调试和微调

运行最终的网页,发现问题,再进行局部调整,形成最终成果。

当我们发现问题时,一定要先找到样式设定的部分,或者要修改的目标,然后找到样式逻辑的代码,通过运行进行逐步调试。

10、引用外部CSS样式文件;

首先新建一个CSS样式文件,即文件后缀名称为“.css”。然后将我们写好的<style>标签中的CSS代码复制粘贴到CSS文件中,保存并记录文件路径。

在网页<head>标签中输入<link>标签,通过其“href”属性确定外部文件的访问路径。同时设定“rel”属性和“type”属性,值分别是“stylesheet”和“text/css”。用来表示引用类型为表样式和CSS编码规则。

删掉<style>标签和其中的所有内容,实现对CSS外部文件的调用。

1、打开第三章成果网页,在此基础上通过CSS设定样式,体会CSS的作用和理念;

2、选择公共标签名称样式设定,及<html>标签和<body>标签的样式设置,体会总体样式设置的作用。多类型标签指定统一样式的时候,需要通过基本语法,并用到“,”选择器;

3、命名标签类名称,并为指定类名称的标签设置样式,需要用到“.”选择器;

4、为指定标签下的某一类子标签设定样式,需要用到“>”组合器;

5、为<img>标签设置样式,理解如何只设置样式,不去触及标签的其他属性;

6、同级标签的相同样式,虽然类名称不同,但是可以同时利用“,”选择器设置属性;

7、很多样式一样的标签,可以统一到上级标签的样式中,甚至最高的样式,例如字体;

8、为公共标签单独设置样式,理解所有公共类型的样式都要单独设定;

9、为某一个标签下所有类型的标签,统一设置样式,需要利用“*”选择器与“空格”组合器;

10、深度指定具体标签样式,需要“空格”组合器和“>”组合器,系统使用;

11、为指定标签下所有同类标签设定属性,不一定要进行深度样式的指定;

12、进行问题样式的修改,理解修改理念、方法和思路;

13、新外部CSS文件,利用<link>标签引用并实现样式的设定。

1、CSS全称为层叠样式表,可以为网页标签设定样式,达到网页代码整洁、干净、逻辑性强、容易纠错的编程目标。

2、CSS的基本语法为<style>标签引用CSS编码规则,基础CSS的编码规则是标签名称、类型、ID的确定,用{}中的属性名和属性值进行确定;

图1-4-1 CSS基本语法

3、CSS选择器,包括:公共标签名称、“.”(名称)、“#”(id)、“*”(通用选择器,表示所有标签)、“,”(分组选择器,用于多标签);

4、CSS组合器,又称组合选择器,也是选择器的原理。包括:后代选择器“空格”(表示该标签下的所有标签,可指定标签类型)、子选择器“>”(表示属于指定标签所有子标签,可指定标签类型);相邻兄弟选择器“+”(表示同级且紧随其后的标签,可指定标签类型);通用兄弟选择器“~”(表示同级的所有标签,可指定标签类型)。

5、CSS“.lgcnrltabletr td > div > img{}”代码设定的是:类名称为“lgcnrltable”的标签下,所有的<tr>标签,以及每一个<tr>标签下的<td>标签中,多包涵的<div>标签下的<img>标签的样式。

6、尽可能让重复的标签样式,在上级,或者统一组合的样式中设定,节省代码,方便维护。但也不能追求极致,否则会忘记原理,让CSS变得复杂;

7、本课程使用的标签;

标签

说明

<style>

样式设定标签,用来网页文件内设定CSS样式;用<head>标签中。

<link>

链接外部资源标签。样例代码为:<link rel="stylesheet" type="text/css" href="cssfilename.css" />。其中rel="stylesheet"  type="text/css"为标准写法,表示应用的样式为“样式表单”,语言类型为CSS;用<head>标签中。

8、标签属性及含义。

标签属性

含义

class

类名称属性,为标签样式进行类型命名。

type

表示标签内部编程语言的类型,进而配置到标准的编译器中。

rel

规定当前文档与被链接文档之间的关系。值"stylesheet"表示样式表。

href

外部文件地址属性。可以为绝对地址,相对地址和网址。

1、为第二章案例编写CSS样式;

2、第二章案例中background-image属于样式属性的范畴,与src非样式属性是不同的,是可以在CSS文件中设置的。尝试用CSS设定背景,尤其是观察相对路径的写法。


点赞(0) 打赏

评论列表 共有 0 条评论

暂无评论

热门产品

历史上的今天:03月29日

热门专题

易捷尔单招|易捷尔单招,易捷尔单招培训,易捷尔单招报名,易捷尔单招考试,易捷尔单招培训学校,易捷尔单招分数
易捷尔单招
昆明综合高中|昆明综合高中
昆明综合高中
开放大学|开放大学报名,开放大学报考,开放大学,什么是开放大学,开放大学学历,开放大学学费,开放大学报名条件,开放大学报名时间,开放大学学历,开放大学专业
开放大学
安徽开放大学|安徽开放大学报名,安徽开放大学报考,安徽开放大学,什么是安徽开放大学,安徽开放大学学历,安徽开放大学学费,安徽开放大学报名条件,安徽开放大学报名时间,安徽开放大学学历,安徽开放大学专业
安徽开放大学
云南网站建设|云南网站制作,网站建设,云南网站开发,云南网站设计,云南网页设计,云南网站建设公司,云南网站建设
云南网站建设
小程序开发|微信小程序,小程序开发,小程序,小程序制作,微信小程序开发,小程序公司,小程序开发公司,分销,三级分销系统,分销系统
小程序开发
一年制中专|中专学历,中专是什么学历,中专是什么,中专有什么专业,中专升大专,一年制中专
一年制中专
安徽中源管业|安徽中源管业,安徽中源管业mpp电力管,安徽中源管业cpvc电力管,安徽中源管业pe穿线管,安徽中源管业电力管,安徽中源管业排水管,安徽中源管业通信管,安徽中源管业管材
安徽中源管业

微信小程序

微信扫一扫体验

立即
投稿

微信公众账号

微信扫一扫加关注

发表
评论
返回
顶部