learning website——菜鸟教程
6. CSS字体
-
CSS字型
在CSS中，有两种类型的字体系列名称：
-
通用字体系列 - 拥有相似外观的字体系统组合（如 “Serif” 或 “Monospace”）
-
特定字体系列 - 一个特定的字体系列（如 “Times” 或 “Courier”）
-
-
字体系列
font-family属性应该设置几个字体名称作为一种"后备"机制-
注意: 如果字体系列的名称超过一个字，它必须用引号，如
Font Family：“宋体” ； 多个字体系列是用一个逗号分隔指明p{ font-family:"Times New Roman", Times, serif;}
-
-
字体样式
font-style主要是用于指定斜体文字的字体样式属性p.normal { font-style:normal;} //正常 - 正常显示文本 p.italic { font-style:italic;} //斜体 - 以斜体字显示的文字 p.oblique { font-style:oblique;} //倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持） -
字体大小
font-size属性设置文本的大小 ， 字体大小的值可以是绝对或相对的大小- 绝对大小：
- 设置一个指定大小的文本
- 不允许用户在所有浏览器中改变文本大小
- 确定了输出的物理尺寸时绝对大小很有用
- 相对大小：
- 相对于周围的元素来设置大小
- 允许用户在浏览器中改变文字大小
- 绝对大小：
PS： 如果不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）
h1 {
font-size:2.5em;} /* 40px/16=2.5em */
h2 {
font-size:1.875em;} /* 30px/16=1.875em */
p {
font-size:0.875em;} /* 14px/16=0.875em */
body {
font-size:100%;}
h1 {
font-size:2.5em;}
h2 {
font-size:1.875em;}
p {
font-size:0.875em;}
代码非常有效 ， 在所有浏览器中，可以显示相同的文本大小，并允许所有浏览器缩放文本的大小
p.normal {
font-weight:normal;}
p.light {
font-weight:lighter;}
p.thick {
font-weight:bold;}
p.thicker {
font-weight:900;}
p.normal {
font-variant:normal;}
p.small {
font-variant:small-caps;}
p.ex2
{
font:italic bold 12px/30px Georgia,serif;
}
7. 链接（link）
-
链接样式
四个链接状态：
a:link- 正常，未访问过的链接a:visited- 用户已访问过的链接a:hover- 当用户鼠标放在链接上时a:active- 链接被点击的那一刻
顺序规则：
a:hover必须跟在a:link和a:visited后面a:active必须跟在`` a:hover`后面
-
文本修饰
text-decoration属性主要用于删除链接中的下划线a:link { text-decoration:none;} a:visited { text-decoration:none;} a:hover { text-decoration:underline;} a:active { text-decoration:underline;} -
背景颜色
a:link { background-color:#B2FF99;} a:visited { background-color:#FFFF85;} a:hover { background-color:#FF704D;} a:active { background-color:#FF704D;}
8. 列表（List）
-
列表类型
- 无序列表
ul- 列表项标记用特殊图形（如小黑点、小方框等） - 有序列表
ol- 列表项的标记有数字或字母
- 无序列表
-
不同的列表项标记
<style> ul.a { list-style-type:circle;} ul.b { list-style-type:square;} ol.c { list-style-type:upper-roman;} ol.d { list-style-type:lower-alpha;} </style> -
指定列表项的标记图像
ul { list-style-image: url('sqpurple.gif'); } -
浏览器兼容性解决方案
ul { list-style-type: none; padding: 0px; margin: 0px; } ul li { background-image: url(sqpurple.gif); background-repeat: no-repeat; background-position: 0px 5px; padding-left: 14px; }解释：
ul:- 设置列表类型为没有列表项标记
- 设置填充和边距 0px（浏览器兼容性）
ul中所有li:- 设置图像的 URL，并设置它只显示一次（无重复）
- 您需要的定位图像位置（左 0px 和上下 5px）
- 用
padding-left属性把文本置于列表中
-
简写属性
ul { list-style: square url("sqpurple.gif"); }可以按顺序设置如下属性：
list-style-typelist-style-positionlist-style-image
9. 表格（Table）
-
表格边框
指定CSS表格边框，使用border属性
table, th, td { border: 1px solid black; }在上面例子中的表格有双边框，这是因为表和
thtd元素有独立的边界若要显示一个表的单个边框，使用
border-collapse属性 -
折叠边框
border-collapse属性设置表格的边框是否被折叠成一个单一的边框或隔开table { border-collapse:collapse; } table,th, td { border: 1px solid black; } -
表格宽度和高度
width和height属性定义表格的宽度和高度 -
表格文字对齐
text-align属性设置水平对齐方式，向左，右，或中心vertical-align属性设置垂直对齐，比如顶部，底部或中间 -
表格填充
如果在表的内容中控制空格之间的边框，应使用
td和th元素的填充属性td { padding:15px; }
10. 盒子模型（Box Model）
不同部分说明：
- Margin(外边距) - 清除边框外的区域，外边距是透明的
- Border(边框) - 围绕在内边距和内容外的边框
- Padding(内边距) - 清除内容周围的区域，内边距是透明的
- Content(内容) - 盒子的内容，显示文本和图像
PS： 当指定一个 CSS 元素的宽度和高度属性时，只是设置内容区域的宽度和高度。完整大小的元素，还必须添加内边距，边框和外边距。
-
最终元素的总宽度计算公式是这样的：
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
-
元素的总高度最终计算公式是这样的：
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距