HTML/CSS基础教程 四
CSS
CSS(Cascading Style Sheets): 层叠样式表 . 它是一种用来表现HTML或XML等文件样式的计算机语言. CSS能够让网页表现与内容分离, 相对于HTML的表现而言, CSS能够对网页中的对象的位置排版进行像素级的精确控制, 支持几乎所有的字体字号样式, 拥有对网页对象和模型样式编辑的能力, 并能够进行初步交互设计, 是目前基于文本展示最优秀的表现设计语言.
上面这段来自百度百科对CSS的定义,我的理解是CSS将每个HTML标签的style进行单独的定义,这样就可以让HTML专注于表现内容.
连接HTML与CSS
只需在HTML的<head></head>下添加一个<link>标签即可链接, link包含三个属性:
1.type: 总是等于text/css
2.rel: 总是等于stylesheet
3.href:等于你css文件的地址
实现是这样的:
<head> <link type="text/css" rel="stylesheet" href="stylesheet.css" /> <title></title> </head>
css基本结构
selector { property: value; }
selector: 可以是任何HTML元素, <p>, <img>, <table>, <span>...
property: 定于selecter的样式, color, font-size, font-family, backgound-color...
value: ...
例如对<p>的定于:
p { font-family: Arial; color: blue; font-size: 24px; }
要注意的是每个语句后是有分号的.
注释
css的注释和c与语言类似, 是这样的:
/* I'm a comment */
数字调色板
定义颜色时, 我们可以使用数字形式的, 这样就以有更多的选择, 例如:
h1 { color: #cc6666 }
这里的大小写是不敏感的, 更多的颜色可以自己取找.
Pixels and ems
前面我们调整字体大小使用的是px(像素),像这样:
p { font-size: 10px; }
这个像素是你电脑上的, 这里有一个问题, 如果浏览你网页的设备的像素和你电脑的不一样会怎么样?
解决方法是使用em. 1em等于任何设备上的一个显示默认值, 因此可以这样定义:
p { font-size: 10em; }
css的内建font-family
大部分电脑理解一些流行的字体,像是Verdana, Courier, Garamond, 但每个电脑都装有不同的字体. 为了显示一致, CSS有一些内建字体:
serif
sans-serif
cursive
当然, 这些都是英文字体.
备用字体
可以同时为font指定多个字体作为备用, 这样第一个不行时, 会用下一个, 直到有一个行的, 像这样:
p { font-family: Tahoma, Verdana, sans-serif; }
边框(border)属性
可以这样设置selecter的边框属性:
selector { border: 2px solid red; }
solid: 实线
dashed: 虚线
链接的特殊属性
一般创建的文本链接下面都会有一个下划线, 可以设置text-decoration让它不显示:
a { text-decoration: none; }
