层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
浏览器通过解析内部样式表通常位于网页的头部区域,目的是让CSS源代码在页面加载前先被解析执行,这样可以避免当网页加载完成后,没有CSS样式渲染而使的页面信息无法正常显示。3.链接外部样式表链接外部样式表是在CSS中最常用的一种形式,它将CSS样式代码单独编写到一个独立的文件中,由网页进行调用,多个网页可以同时使用同一个样式文件,其格式如下:其中,href属性设置外部样式表文件的地址,该地址可以是相对地址,也可以是绝对地址;rel属性定义该标签关联的是样式表标签;type属性定义文档的类型,即CSS文本文件。
网站通常采用链接外部样式表来设计网站的表现层,能够实现CSS样式与HTML结构的分离,这种分离原则是W3C所提倡的,因为这样可以高效地管理文档结构和样式表文件,实现代码的优化和重用。
4.导入外部样式表导入外部样式表是指在内部样式表的在@import关键字后面,使用url()函数来把外部样式表文件导入。注意使用时,外部样式表的路径、方法和链接外部样式表的方法类似,但导入外部样式表输入方式更有优势。实质上它是相当于存在内部样式表中的。
7.2CSS基本选择器
选择器决定样式规则作用于哪些元素。例如,如果要对table元素添加边框为实线、线宽1像素、蓝色的边框,则需要创建一个只识别table元素而不影响其他元素的选择器。如果要对每个区域中的table设置特殊格式,就需要创建一个稍微复杂一些的选择器,它只识别指定区域中的table元素。
7.2.1标签选择器
HTML文档都是由很多标签通过一定的规则编织而成的,我们也可以把这些标签称为网页元素。标签选择器使用网页元素定义样式。
例如,声明p元素首行缩进2字符,字体颜色为红色;所有h1字号为15px、加粗,代码如下:
其中,p和h1都是HTML特定的标签名称,直接引用即可。
注意:*号为通配符匹配页面中的所有元素名称。上面的代码设置每个元素的内外边距为0px。由于每个元素都有系统默认的内外边距值,且在不同的浏览器中显示的效果也不同,因此在设置网页样式之初使用通配符*将所有元素默认的内外边距去掉是常见做法。
7.2.2类别选择器
使用标签选择符可以方便地对标签进行样式设置,同时标签选择符也存在较多问题。因为标签选择符对标签所做的定义不单单影响所选择的标签元素,而是对整个页面中所有相同标签都会起作用。如果需要对同一个标签在网页中的不同位置显示不同的样式,使用这种方法定义的样式就存在很多不足。对于这个问题可以使用类选择器来解决。
类(Class)选择符就是为了不同元素拥有相同的显示样式而定义的。例如,在下面这个页面中包含三段文本,通过标签选择器将所有段落文本大小定义为13px,首行缩进2字符,字体颜色为蓝色。
层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
如果现在要求把第一段字体大小改为20px,字体加粗,这时就可以使用类选择符。定义格式如下:
.fontbold{font-size:20px;font-weight:bold;}
层叠样式表是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
CSS是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。
CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
在浏览器中预览,显示效果如图3所示,可以看到第一段字体被单独放大并加粗。类选择符可以精确地控制页面中某个具体元素对象,而不管这个对象是属于什么类型的标签,同时一个类样式可以在多个标签中被引用。在自定义类名时,只能够使用字母、数字、下划线(_)和连接符号(-),类名必须以字母开头,否则无效。另外,类名是区分大小写的,所以类fontbold和类Fontbold是完全不同的两个类。
7.2.3ID选择器
ID是英文Identity的缩写,它表示身份标识号码,在网络上一般指用户账号,但是在Web设计中一般指标签在HTML文档中的唯一编号。从这点来看,ID选择器只能够在HTML页面中用一次,它是与标签选择符和类选择符作用范围相反的一个选择符。ID选择符通常被来定义HTML框架结构的布局效果,因为HTML框架元素的ID值都是唯一的。
ID选择符必须以井号(#)前缀开始,然后是一个自定义的ID名,定义格式如下:
#box{width:600px;height:auto;}例如,下面实例定义一个盒子,为该盒子指定宽度和高度,并设置盒子的背景颜色以及边框和内边距大小,显示效果如图4所示。7.3复合选择器如果仅仅掌握了标签选择符、类选择符和ID选择符还远远不够,对于网页设计者来讲还应该掌握高级选择符的使用,如子选择符、相邻选择符和属性选择符。
利用标签选择符和类选择符可以控制网页中众多对象的样式;而利用ID选择符、子选择符和相邻选择符可以精确控制页面中的特定对象样式;使用属性选择符可以更敏捷、更模糊地控制页面中包含不同属性的对象样式。
7.3.1子选择符
子选择符就是指定父元素所包含的子元素的样式。子选择符使用尖角号(>)来表示,定义格式如下:
div>span{font-size:20px;}其中,div为span元素的父元素,通过子选择符连接。
例如,定义span元素的字体大小为10px,再利用子选择符来定义所有div元素包含的子元素span样式字体大小为20px,显示效果如图5所示。
CSS基础入门
层叠样式表是一种用来表现HTML(标准通用标记语7.3.2相邻选择器
相邻选择符就是指定一个元素相邻的下一个元素的样式。相邻选择符使用加号(+)来表示,格式如下:
div+span{font-size:20px;}其中,div+span表示div元素与span元素相邻。例如,利用相邻选择符递进控制并列显示的几个元素的显示样式。h1+div表示标题元素h1后面相邻的div元素样式,div+p表示div元素后面相邻的元素p的样式,p+div表示p元素后面相邻的div元素的样式,而div+div表示div元素后面相邻的div元素的样式。效果如图6所示。
图1
图2
图4
图5
图6
温馨提示:答案为网友推荐,仅供参考
第1个回答 2020-03-26
1、CSS的常用样式有哪些?
答:CSS背景、CSS文本、CSS字体、CSS超链接、CSS列表、CSS表格
相似回答