文档章节

css入门教程资料(2)

晨曦之光
 晨曦之光
发布于 2012/03/09 16:09
字数 1180
阅读 15
收藏 0
点赞 0
评论 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

共有 人打赏支持
晨曦之光
粉丝 371
博文 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
Java视频网盘分享

Java教程视频分享 1、JavaScript视频教程 链接: http://pan.baidu.com/s/1gd57FVH 密码: d9ei 2、JPA视频教程 链接: http://pan.baidu.com/s/1dDCx1fj 密码: fwwd 3、马士兵hibernate视频教程...

PXZ6603
2017/04/26
0
0
开源电子书

目录 语言无关类 操作系统 智能系统 分布式系统 编译原理 函数式概念 计算机图形学 WEB服务器 版本控制 编辑器 NoSQL PostgreSQL MySQL 管理和监控 项目相关 设计模式 Web 大数据 编程艺术 ...

zting科技
2017/12/11
0
0
Fanta/free-programming-books-zh_CN

免费的编程中文书籍索引 免费的编程中文书籍索引,欢迎投稿。 国外程序员在 stackoverflow 推荐的程序员必读书籍,中文版。 stackoverflow 上的程序员应该阅读的非编程类书籍有哪些? 中文版...

Fanta
2016/11/14
0
0
无线客户端同学快速学习ReactNative的学习曲线

作为非前端开发人员,这两天对React-Native以及所涉及的一些必须的技术进行了一下恶补,把网上比较好的学习资料搜集了一下,方便感兴趣的同学更快的了解和切入RN的开发,并且快速扫清背景知识...

太阳黑子
2016/11/03
8
0
迄今为止见过最牛逼的程序员,300行代码打造圣诞欢乐树!

  今天小编我逛论坛,今天小编在网上看到一个关于圣诞祝福的特效,使用JavaScript做的,不愧是前端领域的顶尖人物,抱着膜拜的心情,小编我也下载了一份源码进行学习运行,暂时没有发现一点...

万能的大白
2017/12/24
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

tomcat虚拟路径的几种配置方法

tomcat虚拟路径的几种配置方法 一般我们都是直接引用webapps下面的web项目,如果我们要部署一个在其它地方的WEB项目,这就要在TOMCAT中设置虚拟路径了,Tomcat的加载web顺序是先加载 $Tomcat_ho...

Helios51
7分钟前
1
0
Mac 安装jupyter notebook的过程

MAC台式机 python:mac下自带Python 2.7.10 1.先升级了pip安装工具:sudo python -m pip install --upgrade --force pip 2.安装setuptools 工具:sudo pip install setuptools==33.1.1 3.安装......

火力全開
13分钟前
0
0
导航守卫解释与例子

“导航”表示路由正在发生改变。 正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。有多种机会植入路由导航过程中:全局的, 单个路由独享的, 或者组件级的。 记住...

tianyawhl
13分钟前
0
0
Java日志框架-logback配置文件多环境日志配置(开发、测试、生产)(原始解决方法)

说明:这种方式应该算是最通用的,原理是通过判断标签实现。 <!-- if-then form --> <if condition="some conditional expression"> <then> ... </then> </if> ......

浮躁的码农
27分钟前
1
0
FTP传输时的两种登录方式和区别

登录方式 匿名登录 用户名为: anonymous。 密码为:任何合法 email 地址。 授权登录 用户名为:用户在远程系统中的用户帐号。 密码为:用户在远程系统中的用户密码。 区别 匿名登录 只能访问...

寰宇01
28分钟前
0
0
plsql developer 配置监听(不安装oracle客户端)

plsql developer 配置监听(不安装oracle客户端)

微小宝
36分钟前
1
0
数据库(分库分表)中间件对比

本人的宗旨就是,能copy的,绝对不手写。 分区:对业务透明,分区只不过把存放数据的文件分成了许多小块,例如mysql中的一张表对应三个文件.MYD,MYI,frm。 根据一定的规则把数据文件(MYD)和索...

奔跑吧代码
39分钟前
2
0
Netty与Reactor模式详解

在学习Reactor模式之前,我们需要对“I/O的四种模型”以及“什么是I/O多路复用”进行简单的介绍,因为Reactor是一个使用了同步非阻塞的I/O多路复用机制的模式。 I/O的四种模型 I/0 操作 主要...

hutaishi
46分钟前
1
0
【2018.07.16学习笔记】【linux高级知识 20.16-20.19】

20.16/20.17 shell中的函数 20.18 shell中的数组 20.19 告警系统需求分析

lgsxp
51分钟前
0
0
用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛

用 D3.js 画一个手机专利关系图, 看看苹果,三星,微软间的专利纠葛 前言 本文灵感来源于Mike Bostock 的一个 demo 页面 原 demo 基于 D3.js v3 开发, 笔者将其使用 D3.js v5 进行重写, 并改为...

ssthouse_hust
55分钟前
23
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部