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-type
list-style-position
list-style-image
9. 表格(Table)
-
表格边框
指定CSS表格边框,使用border属性
table, th, td { border: 1px solid black; }
在上面例子中的表格有双边框,这是因为表和
th
td
元素有独立的边界若要显示一个表的单个边框,使用
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 元素的宽度和高度属性时,只是设置内容区域的宽度和高度。完整大小的元素,还必须添加内边距,边框和外边距。
-
最终元素的总宽度计算公式是这样的:
总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
-
元素的总高度最终计算公式是这样的:
总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距