您的位置：首页 > Web前端 > CSS

CSS学习笔记(Day4)

2017-07-11 10:54 120 查看

一、 CSS字体

1.字体系列

CSS的字体系列分为通用字体系列和特定字体系列

通用字体系列包含下列五个系列

Serif;Sans-serif;Monospace;Cursive;Fantasy

2.指定字体系列

p {font-family: Times, TimesNR, 'New Century Schoolbook',
Georgia, 'New York', serif;}


可以依次指定多个字体系列作为替补

如果字体名称中间含有空格，请使用引号

3.字体风格

font-style 属性最常用于规定斜体文本

该属性有三个值

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

4.字体加粗

font-weight 属性设置文本的粗细

属性值从100-900规定九个级别的粗细

normal对应400，bold对应700

5.字体大小

a.通过像素来设置

h1 {font-size:60px;}


b.使用em来设置

1em 等于当前的字体尺寸，如果一个元素的 font-size 为 16 像素，那么对于该元素，1em 就等于 16 像素

在设置字体大小时，em 的值会相对于父元素的字体大小改变

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

h2 {font-size:2.5em;}  /* 40px/16=2.5em */


c.结合使用百分比和em

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

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}


二、 CSS链接

1.链接状态

链接的特殊性在于能够根据它们所处的状态来设置它们的样式

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

a:link {color:#FF0000;}     /* 未被访问的链接 */
a:visited {color:#00FF00;}  /* 已被访问的链接 */
a:hover {color:#FF00FF;}    /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;}   /* 正在被点击的链接 */


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

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

a:active 必须位于 a:hover 之后

2.链接修饰

链接的修饰参见CSS文本

3.创建链接框

<!DOCTYPE html>
<html>
<head>
<style>
a:link,a:visited
{
display:block;
font-weight:bold;
font-size:14px;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#98bf21;
width:120px;
text-align:center;
padding:4px;
text-decoration:none;
}

a:hover,a:active
{
background-color:#7A991A;
}
</style>
</head>

<body>
<a href="/index.html" target="_blank">W3School</a>
</body>
</html>


三、 CSS列表

1.list-style-type属性

略，详见http://www.w3school.com.cn/cssref/pr_list-style-type.asp

2.list-style-image属性

可以将列表项标志替代为图像

ul li {list-style-image : url(xxx.gif)}


四、 CSS表格

针对table，th，tb的属
4000
性整合

属性说明属性值
border设置边框属性像素值 线条类型 颜色(1px solid blue;)
border-collapse设置是否把表格边框合并为单一的边框设置为collapse会合成单边框，默认为seperate
width表格宽度像素值或者百分数
height表格高度同上
text-align水平对齐方式略
vertical-align垂直对齐方式略
padding内边距像素值
background-color背景色略
color文本颜色略
border-spacing设置分隔单元格边框的距离一组两个像素值 分别为水平和垂直间距
caption-side设置表格标题的位置top bottom inherit(继承)
empty-cells设置是否显示表格中的空单元格hide show inherit
table-layout设置显示单元、行和列的算法automatic fix(确定的宽高) inherit

五、 CSS轮廓

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

参数及参数值参见http://www.w3school.com.cn/css/css_outline.asp
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css 学习笔记
相关文章推荐
新的分享
章节导航