-
css教程之样式表属性列表
样式表属性列表
CSS样式表通过设定不同标记的不同属性值达到修改外观效果的目的,因此属性值即显的尤为重要,具体设定参看文件css.chm中的属性一节。
伪类
CSS样式表中常用的伪类有4种,如下
1. :link
设置<a>对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性的<a>对象,此伪类不发生作用。
例如:
a:link { font-size: 14pt; text-decoration: underline; color: blue; }
2. :hover
设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于<a>对象。对于无href属性(特性)的<a>对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
例如:
a:hover { font-size: 14pt; text-decoration: underline; color: blue; }
a:hover span{ color:red; }
3. :active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
在CSS1中此伪类仅可用于<a>对象。对于无href属性(特性)的<a>对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
例如:
a:active { font-size: 14pt; text-decoration: underline; color: blue; }
4. :visited
设置<a>对象在其链接地址已被访问过时的样式表属性。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性(特性)的a对象,此伪类不发生作用。
例如:
a:visited { font-size: 14pt; text-decoration: underline; color: blue; }
伪对象
:first-letter
语法格式:Selector : first-letter { sRules }
设置对象内的第一个字符的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。 在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。
例如:
p a:first-letter { color: green }
div:first-letter { color:red;font-size:16px;float:left; }
:first-line
语法格式:Selector : first-line { sRules }
设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。如果未强制指定对象的width属性, 首行的内容长度可能不是固定的。
例如:
p a:first-line { color: green }
div:first-line { color:red;font-size:16px; }
规则
@import
语法格式: @import url (url) sMedia ;
参数:
url : 使用绝对或相对地址指定导入的外部样式表文件。
sMedia : 指定设备类型。
指定导入的外部样式表及目标设备类型。
该规则必须在样式表头部最先声明。并且其后的分号是必需的,如果省略了此分号,外部样式表将无法正确导入,并会生成错误信息。
导入的外部样式表中的定义将被HTML文本中的同名定义覆盖。
例如
<style>
@import url("foo.css") screen, print;
@import "print.css"
</style>
@page
语法格式: @page label pseudo-class { sRules }
参数:
label : 页标
pseudo-class : 伪类。
sRules : 样式表定义
设置页面容器的版式,方向,边空等。
页面容器包括页面内容区域和内容区域外围的边空补白区域。
例如
@page thin:first { size: 3in 8in }
@media
语法格式:@media sMedia { sRules }
参数:
sMedia : 指定设备名称。
sRules : 样式表定义
指定样式表规则用于指定的设备类型
例如
// 设置显示器用字体尺寸
@media screen {
BODY {font-size:12pt; }
}
// 设置打印机用字体尺寸
@media print {
@import "print.css"
BODY {font-size:8pt;}
}
声明(!important)
提升指定样式规则的应用优先权
p{ color:blue!important }
如下:
<style>
p{ color:blue!important }
p{ color:red; }
</style>
<p>提升优先权后为蓝色,否则为红色</p>
长度单位
单位换算:1in = 2.54cm = 25.4 mm = 72pt = 6pc
设备类型
CSS样式表通过设定不同标记的不同属性值达到修改外观效果的目的,因此属性值即显的尤为重要,具体设定参看文件css.chm中的属性一节。
伪类
CSS样式表中常用的伪类有4种,如下
1. :link
设置<a>对象在未被访问前的样式表属性。默认值由浏览器决定。对于无href属性的<a>对象,此伪类不发生作用。
例如:
a:link { font-size: 14pt; text-decoration: underline; color: blue; }
2. :hover
设置对象在其鼠标悬停时的样式表属性。
在CSS1中此伪类仅可用于<a>对象。对于无href属性(特性)的<a>对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。
例如:
a:hover { font-size: 14pt; text-decoration: underline; color: blue; }
a:hover span{ color:red; }
3. :active
设置对象在被用户激活(在鼠标点击与释放之间发生的事件)时的样式表属性。
在CSS1中此伪类仅可用于<a>对象。对于无href属性(特性)的<a>对象,此伪类不发生作用。在CSS2中此伪类可以应用于任何对象。并且:active状态可以和:link以及:visited状态同时发生。
例如:
a:active { font-size: 14pt; text-decoration: underline; color: blue; }
4. :visited
设置<a>对象在其链接地址已被访问过时的样式表属性。
默认值由浏览器决定。定义网页过期时间或用户清空历史记录将影响此伪类的作用。对于无href属性(特性)的a对象,此伪类不发生作用。
例如:
a:visited { font-size: 14pt; text-decoration: underline; color: blue; }
伪对象
:first-letter
语法格式:Selector : first-letter { sRules }
设置对象内的第一个字符的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。 在此伪类中配合使用font-size属性和float属性可以制作首字下沉效果。
例如:
p a:first-letter { color: green }
div:first-letter { color:red;font-size:16px;float:left; }
:first-line
语法格式:Selector : first-line { sRules }
设置对象内的第一行的样式表属性。此伪对象仅作用于块对象。内联对象要使用该伪对象,必须先设定对象的height或width属性,或者设定position属性为absolute,或者设定display属性为block。如果未强制指定对象的width属性, 首行的内容长度可能不是固定的。
例如:
p a:first-line { color: green }
div:first-line { color:red;font-size:16px; }
规则
@import
语法格式: @import url (url) sMedia ;
参数:
url : 使用绝对或相对地址指定导入的外部样式表文件。
sMedia : 指定设备类型。
指定导入的外部样式表及目标设备类型。
该规则必须在样式表头部最先声明。并且其后的分号是必需的,如果省略了此分号,外部样式表将无法正确导入,并会生成错误信息。
导入的外部样式表中的定义将被HTML文本中的同名定义覆盖。
例如
<style>
@import url("foo.css") screen, print;
@import "print.css"
</style>
@page
语法格式: @page label pseudo-class { sRules }
参数:
label : 页标
pseudo-class : 伪类。
sRules : 样式表定义
设置页面容器的版式,方向,边空等。
页面容器包括页面内容区域和内容区域外围的边空补白区域。
例如
@page thin:first { size: 3in 8in }
@media
语法格式:@media sMedia { sRules }
参数:
sMedia : 指定设备名称。
sRules : 样式表定义
指定样式表规则用于指定的设备类型
例如
// 设置显示器用字体尺寸
@media screen {
BODY {font-size:12pt; }
}
// 设置打印机用字体尺寸
@media print {
@import "print.css"
BODY {font-size:8pt;}
}
声明(!important)
提升指定样式规则的应用优先权
p{ color:blue!important }
如下:
<style>
p{ color:blue!important }
p{ color:red; }
</style>
<p>提升优先权后为蓝色,否则为红色</p>
长度单位
长度单位 | 简介 |
相对长度单位 | |
em | 相对于当前对象内文本的字体尺寸 |
ex | 相对于字符“x”的高度。通常为字体高度的一半 |
px | 像素(Pixel) |
绝对长度单位 | |
pt | 点(Point) |
pc | 派卡(Pica)。相当于我国新四号铅字的尺寸 |
in | 英寸(Inch) |
cm | 厘米(Centimeter) |
mm | 毫米(Millimeter) |
设备类型
设备类型名 | 简介 |
all | 所有设备类型 |
打印机 | |
screen | 计算机显示器 |
栏目列表
最新更新
nodejs爬虫
Python正则表达式完全指南
爬取豆瓣Top250图书数据
shp 地图文件批量添加字段
爬虫小试牛刀(爬取学校通知公告)
【python基础】函数-初识函数
【python基础】函数-返回值
HTTP请求:requests模块基础使用必知必会
Python初学者友好丨详解参数传递类型
如何有效管理爬虫流量?
SQL SERVER中递归
2个场景实例讲解GaussDB(DWS)基表统计信息估
常用的 SQL Server 关键字及其含义
动手分析SQL Server中的事务中使用的锁
openGauss内核分析:SQL by pass & 经典执行
一招教你如何高效批量导入与更新数据
天天写SQL,这些神奇的特性你知道吗?
openGauss内核分析:执行计划生成
[IM002]Navicat ODBC驱动器管理器 未发现数据
初入Sql Server 之 存储过程的简单使用
这是目前我见过最好的跨域解决方案!
减少回流与重绘
减少回流与重绘
如何使用KrpanoToolJS在浏览器切图
performance.now() 与 Date.now() 对比
一款纯 JS 实现的轻量化图片编辑器
关于开发 VS Code 插件遇到的 workbench.scm.
前端设计模式——观察者模式
前端设计模式——中介者模式
创建型-原型模式