CSS一些知识点

原创 2012年03月24日 23:47:26
1、字体大小[font-size]
字体大小可通过多种不同单位(比如像素或百分比等)来设置。在本教程中,我们将关注于最常用和最合适的单位。比如:
h1 {font-size: 30px;}
h2 {font-size: 12pt;}
h3 {font-size: 120%;}
p {font-size: 1em;}

上面四种单位有着本质的区别。‘px’和‘pt’将字体设置为固定大小,而‘%’和‘em’允许页面浏览者自行调整字体的显示尺寸。

2、CSS属性font是上述各有关字体的CSS属性的缩写用法。 
比如说下面四行应用于p元素的代码:
p {
font-style: italic;
font-weight: bold;
font-size: 30px;
font-family: arial, sans-serif;
}
如果用font属性的话,上述四行代码可简化为:
p {
font: italic bold 30px arial, sans-serif;
}
font属性的值应按以下次序书写:
font-style | font-variant | font-weight | font-size | font-family

3、字符间距[letter-spacing]
CSS属性letter-spacing用于设置文本的水平字间距。我们可以把期望的字间距宽度作为这个属性的值。例如,假如你希望p元素里的文本段落的字间距为3个像素,而h1标题的字间距为6个像素,代码可以这样写:
h1 {
letter-spacing: 6px;
}


p {
letter-spacing: 3px;
}


4、CSS允许你根据链接是未访问的、已访问的、活动的、是否有鼠标悬停等分别定义不同的属性。这样,我们便可为网站增添奇特而有用的效果。你需要通过伪类(pseudo-class)来控制这些效果。
伪类是什么?
伪类(pseudo-class)令你可以在为HTML元素定义CSS属性的时候将条件和事件考虑在内
我们来看一个例子。正如你所知道的,在HTML里,链接是通过a元素来定义的。因此,在CSS里,我们可以将a作为一个选择器selector
a {
color: blue;
}
一个链接可以有不同的状态。例如,它可以是已访问过的,也可以是未访问过的。你可以通过伪类分别为访问过的链接和未访问过的链接设置不同的样式。
a:link {
color: blue;
}


a:visited {
color: red;
}
为未访问过的链接和已访问过的链接分别使用伪类a:link和a:visited。活动的链接对应的伪类为a:active,有鼠标悬停的链接对应的伪类为a:hover。


伪类:link用于浏览者从未访问过的链接。
在下面的示例代码中,我们将未访问过的链接设为浅蓝色。
a:link {
color: #6699CC;
}


伪类: visited
伪类:visited用于浏览者已访问过的链接。比如,下面的代码将已访问过的链接设为深紫色:
a:visited {
color: #660099;
}


伪类: active
伪类:active用于活动的链接(即获得当前焦点的链接)。
下例将活动的链接设为具有黄色背景:
a:active {
background-color: #FFFF00;
}


伪类: hover
伪类:hover用于有鼠标悬停的链接。
这能制造出有趣的效果。例如,如果你要当鼠标光标移到链接上时将链接显示为橙色斜体,那么CSS可以这样写:
a:hover {
color: orange;
font-style: italic;
}


要去掉下划线,只要把text-decoration属性的值设为none就行了
a {
text-decoration:none;
}

相关文章推荐

飞雀教育CSS3知识点:文本属性

  • 2016年08月15日 17:50
  • 11KB
  • 下载

css知识点1

  • 2017年02月22日 12:06
  • 22KB
  • 下载

深入解析HTML、CSS中的核心知识点

博客核心内容:1、vertical-align(如何将文字和图片进行水平对齐) 2、如何将文字和图片设置为居中 3、我是如何在图片上插入文字的. 4、标签盒子属性—–border 5、列表的相...

CSS3知识点归纳

  • 2017年07月26日 10:21
  • 49KB
  • 下载

XHTML相关知识点总结(标签 css)

  • 2014年04月23日 17:04
  • 9KB
  • 下载

H5+CSS3简单动画 知识点 汇总

乱入几个:  1.h5的一个语义化标签   figure :用于规定独立的流内容(图像 图表 照片 代码等)   figcapition:与figure配套使用,用于标签定义figure元素标题...

CSS知识点小结

css定义

17个CSS知识点总结

1、对WEB标准以及W3C的理解与认识 标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率; 使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS一些知识点
举报原因:
原因补充:

(最多只允许输入30个字)