CSS学习笔记(Day4)

xiaoxiao2021-02-28  126

一、 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的属性整合

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

五、 CSS轮廓

轮廓是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用 参数及参数值参见http://www.w3school.com.cn/css/css_outline.asp

转载请注明原文地址: https://www.6miu.com/read-57936.html

最新回复(0)