文档章节

css入门教程资料(2)

晨曦之光
 晨曦之光
发布于 2012/03/09 16:09
字数 1180
阅读 15
收藏 0
三.层叠样式表的格式

 

一般来说,样式表的声明分为选择符(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: 字体粗细


原文链接: http://blog.csdn.net/newhappy2008/article/details/2255381

本文转载自:http://blog.csdn.net/newhappy2008/article/details/2255381

共有 人打赏支持
晨曦之光
粉丝 376
博文 4426
码字总数 2559
作品 0
深圳
程序员
2018年寒假换个姿势玩

学弟学妹们,你们好。 当下正值各种备考阶段,加油。如果明确自己不考研,个人建议把将来吃饭的专业课好好学,认真学。其他的课程,能过就行(前提是学习时间和精力不足以让你即拿到奖学金又...

batbattle
01/04
0
0
前端学习之路(从入门到入坑...)

学习前端两年多了,拿了阿里巴巴实现offer,想结合个人经历总结的前端入门方法,总结从零基础到具备前端基本技能的道路、学习方法、资料。由于能力有限,不能保证面面俱到,只是作为入门参考...

阿小庆
06/14
0
0
分享28本关于HTML5的学习书籍(免费下载)

分享28本关于HTML5的学习书籍(免费下载) 1、用HTML5新特性开发移动App 2、用HTML5CSS3实现媲美原生应用的交互体验 3、改善HTML5网页性能-译 4、WEBHTML5在LBS社区中的应用 5、WebQQ3.0:让...

邓剑彬
2012/11/30
1K
6
总有你要的编程书单(GitHub )

目录 IDE IntelliJ IDEA 简体中文专题教程 MySQL 21分钟MySQL入门教程 MySQL索引背后的数据结构及算法原理 NoSQL Disque 使用教程 Neo4j .rb 中文資源 Redis 命令参考 Redis 设计与实现 The ...

汇智网
2017/11/22
0
0
free-programming-books-zh.md

语言无关MySQL NoSQL PostgreSQL Web WEB服务器 其它 函数式概念 分布式系统 在线教育 大数据 操作系统 数据库 智能系统 正则表达式 版本控制 程序员杂谈 管理和监控 编程艺术 编译原理 编辑...

银月光海
2016/05/20
70
0

没有更多内容

加载失败,请刷新页面

加载更多

Linux安装MySQL的两种方法

1. 运行平台:CentOS 6.3 x86_64,基本等同于RHEL 6.3 2. 安装方法: 安装MySQL主要有两种方法:一种是通过源码自行编译安装,这种适合高级用户定制MySQL的特性,这里不做说明;另一种是通过...

onedotdot
28分钟前
4
0
phpize源码安装php扩展

4、进入源码中的ext/pcntl目录 ~# cd php-5.3.29/ext/pcntl/ 5、运行 phpize 命令 ~# phpizeConfiguring for:PHP Api Version: 20090626Zend Module Api No: 20090626......

bengozhong
37分钟前
2
0
Git 常用技巧

# Git 常用技巧 ## 暖场 - Git 怎么读 ? - Git 的作者是谁 ? - 谁没有 Github 账号 ? - 谁没有在 Github 提交过 issues,PR ? - 谁没有不会用命令操作 Git ? ## Git 简介 Git 是一种代码...

帝子兮
49分钟前
2
0
MySQL学习笔记

踩坑建议 对于时间相关字段,为插入及显示毫秒数据,建议使用datetime(6)类型,并设置数据库客户端显示毫秒相关数据

OSC_fly
49分钟前
0
0
spring配置文件中xsd引用异常

异常: org.xml.sax.SAXParseException; lineNumber: 78; columnNumber: 69; schema_reference.4: 无法读取方案文档 'http://www.springframework.org/schema/tx/spring-tx-3.2.xsd', 原因为......

zaolonglei
52分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部