专注Java教育14年 全国咨询/投诉热线:444-1124-454
赢咖4LOGO图
始于2009,口口相传的Java黄埔军校
首页 hot资讯 CSS基础培训视频,实战入门

CSS基础培训视频,实战入门

更新时间:2021-01-26 17:13:10 来源:赢咖4 浏览739次

层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

 

CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

 

css基础培训视频

 

语言基础编辑

 

属性和属性值

 

属性

 

属性的名字是一个合法的标识符,它们是CSS语法中的关键字。一种属性规定了格式修饰的一个方面。例如:color是文本的颜色属性,而text-indent则规定了段落的缩进。

要掌握一个属性的用法,有六个方面需要了解。具体叙述如下:

 

①该属性的合法属性值(legal value)。显然段落缩进属性text-indent只能赋给一个表示长度的值,而表示背景图案的background.image属性则应该取一个表示图片位置链接的值或者是关键字none表示不用背景图案。

 

②该属性的默认值(initial value)。当在样式表单中没有规定该属性,而且该属性不能从它的父级元素那儿继承的时候,则浏览器将认为该属性取它的默认值。

 

③该属性所适用的元素(Applies to)。有的属性只适用于某些个别的元素,比如white-space属性就只适用于块级元素。white-space属性可以取normal、pre和nowrap三个值。当取normal的时候,浏览器将忽略掉连续的空白字符,而只显示一个空白字符。当取pre的时候,则保留连续的空白字符。而取nowrap的时候,连续的空白字符被忽略,而且不自动换行。

 

④该属性的值是否被下一级继承(inherited)。

 

⑤如果该属性能取百分值(percentage),那么该百分值将如何解释。也就是百分值所相对的标准是什么。如margin属性可以取百分值,它是相对于margin所存元素的容器的宽度。

 

⑥该属性所属的媒介类型组(media groups)。

 

属性值

 

①整数和实数

 

这和普通意义上的整数和实数没有多大区别。在CSS中只能使用浮点小数,而不能像其他编程语言那样使用科学记数法表示实数,即1.2E3在CSS中将是不合法的。下面是几个正确的例子,整数:128、-313,实数:12.20、1415、-12.03。

 

②长度量

 

一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位,因而长度单位也分为相对长度单位和绝对长度单位。

相对长度单位有:em——当前字体的高度,也就是font.size属性的值;ex——当前字体中小写字母x的高度;Dx——一个像素的长度,其实际的长度由显示器的设置决定。

另一一点值得注意的是,子级元素不继承父级元素的相对长度值,只继承它们的实际计算值。

 

③百分数量(percentages)

 

百分数量就是数字加上百分号。显然,百分数量总是相对的,所以和相对长度量一样,百分数量不被子级元素继承。[10]

 

选择器

 

类型选择器

 

CSS中的一种选择器是元素类型的名称。使用这种选择器(称为类型选择器),可以向这种元素类型的每个实例上应用声明。例如,以下简单规则的选择器是H1,因此规则作用于文档中所有的H1元素:

 

H1{color:red}

 

简单属性选择器

 

CLASS属性

 

CLASS属性允许向一组在CLASS属性上具有相同值的元素应用声明。BODY内的所有元素都有CLASS属性。从本质上讲,可以使用CLASS属性来分类元素,在样式表中创建规则来引用CLASS属性的值,然后浏览器自动将这些属性应用到该组元素。

 

类选择器以标志符(句点)开头,用于指示后面是哪种类型的选择器。对于类选择器,之所以选择句点是因为在很多编程语言中它与术语“类”相关联。翻译成英语,标志符表示“带有类名的元素”。

 

ID属性

 

ID属性的操作类似于CLASS属性,但有一点重要的不同之处:ID属性的值在整篇文档中必须是唯一的。这使得ID属性可用于设置单个元素的样式规则。包含ID属性的选择器称为ID选择器。

 

需要注意的是,ID选择器的标志符是散列符号(#)。标志符用来提醒浏览器接下来出现的是ID值。

 

STYLE属性

 

尽管在选择器中可以使用CLASS和ID属性值,STYLE属性实际上可以替代整个选择器机制。不是只具有一个能够在选择器中引用的值(这正是ID和CLASS具有的值),STYLE属性的值实际上是一个或多个CSS声明。

 

通常情况下,使用CSS,设计者将把所有的样式规则置于一个样式表中,该样式表位于文档顶部的STYLE元素内(或在外部进行链接)。但是,使用STYLE属性能够绕过样式表将声明直接放置到文档的开始标记中。

 

组合选择器类型

 

可以将类型选择器、ID选择器和类选择器组合成不同的选择器类型来构成更复杂的选择器。通过组合选择器,可以更加精确地处理希望赋予某种表示的元素。例如,要组合类型选择器和类选择器,一个元素必须满足两个要求:它必须是正确的类型和正确的类以便使样式规则可以作用于它。

 

外部信息:伪类和伪元素

 

在CSS1中,样式通常是基于在HTML源代码中出现的标记和属性。对于很多设计情景而言这种做法完全可行,但是它无法实现设计者希望获得的一些常见的设计效果。

 

设计伪类和伪元素可以实现其中的一些效果。这两种机制扩充了CSS的表现能力。在CSS1中,使用伪类可以根据一些情况改变文档中链接的样式,如根据链接是否被访问,何时被访问以及用户和文档的交互方式来应用改变。借助于伪元素,可以更改元素的第一个字母和第一行的样式,或者添加源文档中没有出现过的元素。

 

伪类和伪元素都不存在于HTML;也就是说,它们在HTML代码中是不可见的。这两种机制都得到了精心设计以便能够在CSS以后的版本中做进一步地扩充;也就是说实现更多的效果。

 

赢咖4CSS基础视频教程详细讲解了什么是css 。层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。

 

课程学习目录


1.CSS教程-CSS概述
2.CSS教程-HTML引入CSS样式的三种方式概述1
3.CSS教程-HTML引入CSS样式的三种方式概述2
4.CSS教程-HTML引入CSS样式的第一种方式内联方式
5.CSS教程-HTML引入CSS样式的第二种方式样式块
6.CSS教程-id选择器标签选择器和类选择器
7.CSS教程-HTML引入CSS样式的第三种方式引入外部独立css文件
8.CSS教程-列表样式
9.CSS教程-绝对定位

 

css基础培训视频

 

以上就是赢咖4赢咖4注册机构的小编针对“CSS基础培训视频,实战入门”的内容进行的回答,希望对大家有所帮助,如有疑问,请在线咨询,有专业老师随时为你服务。

 

提交申请后,顾问老师会电话与您沟通安排学习

免费课程推荐 >>
技术文档推荐 >>