前端笔记2-3

CSS字体

1.font-family:设置字体，可以设置多个备选字体，逗号隔开，只有字体名带有空格或特殊符号才使用单引号

font-family:"Times New Roman",Georgia,Serif

2.font-style:

该属性有三个值：

normal - 文本正常显示
italic - 文本斜体显示
oblique - 文本倾斜显示

italic 和 oblique 的区别

font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。

斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。

通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

3.字体变形

font-variant: small-caps;

这种字母采用不同大小的大写字母

4.字体加粗

font-weight属性

使用 bold 关键字可以将文本设置为粗体。

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。

如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

5.字体大小

font-size属性

绝对值：

将文本设置为指定的大小
不允许用户在所有浏览器中改变文本大小（不利于可用性）
绝对大小在确定了输出的物理尺寸时很有用

相对大小：

相对于周围的元素来设置大小
允许用户在浏览器改变文本大小

注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

浏览器中默认的文本大小是 16 像素。因此 1em 的默认尺寸是 16 像素。

结合使用百分比和 EM

在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：

6.所有声明一起

font:italic bold 12px/30px arial,sans-serif;

CSS链接

1.链接的四种状态：

a:link - 普通的、未被访问的链接
a:visited - 用户已访问的链接
a:hover - 鼠标指针位于链接的上方
a:active - 链接被点击的时刻

当为链接的不同状态设置样式时，请按照以下次序规则：

a:hover 必须位于 a:link 和 a:visited 之后
a:active 必须位于 a:hover 之后

2.常见的链接样式

文本修饰:text-decoration:none/underline下划线去掉/保留

背景色background-color

一个例子：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
a:link,a:visited{
display: block;
font-weight: bold;
font-size: 14px;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: white;
background-color: lightseagreen;
width: 120px;
text-align: center;
padding: 4px;
text-decoration: none;
}
a:hover,a:active{
background-color: #7A991A;
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">W3School
</a>
</body>
</html>

CSS列表

1.列表类型 list-style-type

无序值:circle,square,disc,none分别是空心圆，方形，实心圆，无标志

有序值:decimal,lower-roman,upper-roman,lower-alpha,upper-alpha

2.列表项图像 list-style-image

值:url(路径)

3.列表项位置 list-style-position

inside/outside inside有缩进

确定标志出现在列表项内容之外还是内容内部

CSS表格

1.表格边框

border属性

border: 1px solid lightseagreen;

table,td,th

2.折叠边框

table 设置border-collapse:collapse

table{
border-collapse: collapse;
}
td,th{
border: 1px solid lightseagreen;
}

3.表格宽度和高度

table{
border-collapse: collapse;
width: 100%;
}
td,th{
border: 1px solid lightseagreen;
height: 50px;
}

其中百分比为占浏览器长宽的百分比

4.表格文本对齐

text-align:right,left,center

vertical-align:top,center,bottom-----只在td,th中生效

5.表格内边距

padding

6.表格颜色

border中设置边框颜色

background-color设置背景色

empty-cells: hide;隐藏空单元格

border-spacing: 10px 50px;表格边距宽度

caption-side:bottom：标题位置

CSS轮廓

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

CSS outline 属性规定元素轮廓的样式、颜色和宽度

1.outline-style

2.outline-color

3.outline-width

outline-width 属性设置元素整个轮廓的宽度，只有当轮廓样式不是 none 时，这个宽度才会起作用。如果样式为 none，宽度实际上会重置为 0。不允许设置负长度值。

发表于 2018-01-21 21:38 Luas 阅读(183) 评论(0) 编辑收藏举报

italic 和 oblique 的区别

结合使用百分比和 EM

公告