css入门教程资料(2)

简介: 三.层叠样式表的格式  一般来说,样式表的声明分为选择符(selector)和块{}(block),块里包含属性(properties)和属性的取值(value),基本格式如下:选择符 {属性:值}其它格式1:选择符1,选择符2,选择符3 {属性1:值1;属性2:值2;属性3:值3}有时候多个选择符将使用相同的设置,为了简化代码,我们可以一次性为它们设置样式,并在多个选择符之间加上“,”来分隔它们。
三.层叠样式表的格式

 

一般来说,样式表的声明分为选择符(selector)和块{}(block),块里包含属性(properties)和属性的取值(value),基本格式如下:

选择符 {属性:值}

其它格式1:

选择符1,选择符2,选择符3 {属性1:值1;属性2:值2;属性3:值3}

有时候多个选择符将使用相同的设置,为了简化代码,我们可以一次性为它们设置样式,并在多个选择符之间加上“,”来分隔它们。

当有多个属性的时候,必须在两个属性之间用“;”来分隔。

其它格式2:

选择符1 选择符2 {属性1:值1;属性2:值2;属性3:值3}

和格式1非常相似,只是在选择符之间少加了“,”,但作用却大不相同。表示如果选择符2包括的内容同时包括在选择符1里的时候,所设置的样式规则才起作用。

四.层叠样式表的分类

为了使网页的格式不过分的单调,必需让相同的选择符也能分类,并能按照不同的类别来进行不同的样式设计。基本格式如下:

选择符.类别名 {属性:值}

类别名将可以在HTML的标识符里引用:

< 标识符 class=类别名>网页内容

五.层叠样式表的伪类

除了上述的分类方式外,为了使分类的使用更灵活多样,又产生了伪类的概念。类和伪类有什么样的区别呢?

一般地说,选择符可以和多个类采用捆绑的形式来设定,这样虽然能够为同一个选择符创建多种不同的样式,但捆绑的形式同时也限制了设定的类为其它的选择符所使用。伪类的产生就是为了解决这个问题,每个预声明的伪类都可以被所有的HTML标识符引用,当然有些块级内容的设置除外。基本格式如下:

.伪类名 {属性:值}

伪类可以被任何标识符在HTML里引用。

<标识符 class=伪类名>网页内容

  六.控制字体的样式

 

控制字体的样式包括控制字体类型、字体大小、字体风格、字体粗细四个部分。

1.字体类型

平时在使用WORD之类的字处理软件的时候,经常需要调整字体的显示,比如说“Arial”、“Impact”、“Verdana”等字体都是笔者使用的较多的。

基本格式如下:

font-family: 字体名称

如果在font-family后加上多种字体的名称,浏览器回按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体,一旦遇到与要求的相匹配的字体,就按这种字体显示网页内容,并停止搜索;如果不匹配就继续搜索,直到找到为止,万一样式表里的所有字体都没有安装的话,浏览器就会用自己默认的字体来替代显示网页的内容。

注意:

·当指定多种字体时,用“,”分隔每种字体名称。

·当字体名称包含两个以上分开的单词时,用“”把该字体名称括起来。

·当样式规则外已经有“”时,用‘’代替“”。

2.字体大小

基本格式如下:

font-size: 字号参数

字号的取值范围:

·以Point为单位:点单位在所有的浏览器和操作平台上都适用

·以Em为单位:指字母要素的尺寸,和Point相同距离

·以Pixes为单位:像素可以使用于所有的操作平台,但可能会因为浏览者的屏幕分辨率不同,而造成显示上的效果差异

·以in(英寸)为单位

·以cm(厘米)为单位

·以mm(毫米)为单位

·以pc(打印机的字体大小)为单位

·以ex(x-height)为单位

·smaller:比当前文字的默认大小更小一号

·larger:比当前文字的默认大小更小大号

·使用比例关系

·xx-small

·x-small

·small

·medium

·large

·x-large

·xx-large

3.字体风格

字体风格只能控制各种斜体字的显示。

基本格式如下:

font-style: 斜体字的名称

4.字体粗细

字体粗细控制粗体字的显示,取值范围从数字100~900,浏览器默认的字体粗细为400。另外可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。

基本格式如下:

font-weight: 字体粗细

相关文章
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局
17606 11
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第7章定位
162 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第9章FlexBox实战有路网
192 0
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(下)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第8章FlexBox布局(下)
189 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(下)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(下)
190 0
|
Web App开发 前端开发 开发者
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型(上)
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第5章CSS盒子模型
262 0
|
前端开发 数据安全/隐私保护
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第6章表格与表单
203 0
|
前端开发 容器
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第4章CSS文本样式
170 0
|
前端开发
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第3章初识CSS
168 0
|
前端开发 开发工具
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识
HTML5+CSS3前端入门教程---从0开始通过一个商城实例手把手教你学习PC端和移动端页面开发第2章HTML基础知识
196 0

热门文章

最新文章