CSS样式表 初识
1.CSS的作用
让结构和样式进行分开,提升效率;
2.css属性详解
font-family 设置字体
例如:
font-family:<font1>,<font2>...<fontn> 浏览器会依次查询设置的字体,如果都没有,则使用默认的字体.
font-style 字体风格
例如:
font-style:normal|italic|oblique 分别是:默认,斜体,倾斜显示
font-variant 字体变形
例如:
font-variant:normal|small_caps 分别是:默认,小型大写字母
font-weight 字体加粗
例如:
font-weight:normal|bold|bolder|lighter|100|200 分别是:默认为7,约为400;粗体,约为700;粗体再加粗,约为900;比默认的还小;数字越小,字体越细
font-size 字号的控制
例如:
font-size:35px;//px是浏览器通用的.还有其他的单位.pt...
text-transform 文字的更改
例如:
text-transform:uppercase|lowercase|capitalize|none 分别是:大写,小写,首字母大写,正常显示
text-decoration 文字修饰
例如:
text-decoration:underline|overline|line-through|blink|none 分别是:下划线,上划线,删除线,文字闪烁,无上述效果,正常显示;
font 字体属性
例如:
font:font-family|font-style|font-variant|font-weight|font-size
word-spacing/letter-spacing 设置字间距以及字母间距(单词,字母)
line-height 设置行距
text-align/vertical-align 文字对齐
例如:
text-align:left|right|center|justify
vertical-align:top|bottom|text_bottom|baseline|middle|sub|supper
text-indent 首行缩进
例如:
text-indent:数字|百分比
color 颜色
例如:
color:red;
background-color 背景颜色
例如:
background-color:red;
background-image 背景图像属性
例如:
background-image:<url>|none;
background-repeat 背景图片重复属性
例如:
background-repeat:repeat|repeat-x|repeat-y|no-repeat
background-attachment 固定背景图片属性
例如:
background-attachment:scroll|fixed
表示:背景图片是随内容滚动的还是固定的.
background-position 背景图片的位置
例如:
background-position:百分比|长度|关键字
background-positon:X% y%|x y|
background 背景
例如:
background:上述背景的属性.
标签<a> 对应的anchor的语法说明:
a:link 尚未链接过的超链接文字的样式
a:sisited 已经链接过的超链接的文字
a:active 鼠标单击超链接后,链接文字的显示样式
a:hover 鼠标拖动到超链接文字上时,超链接显示的文字效果
cursor 设置光标的属性
margin,border padding来控制段落.图片和表格等对象的样式
例如:
margin-(top,right,bottom,left):长度|百分比|auto
border-width 是指边框的宽度
例如:
border-width:thin|medium|thick|长度
border-style 设置边框的样式
例如:
border-style:none|solid|double|dotted|dashed|groove|ridge|inset|outset 分别是:实线,双直线,小点虚线,大点虚线,3D凹线,
padding-(top,right,left,bottom) 设置内边界
例如:
padding-(top,right,left,bottom):长度|百分比
1.CSS的作用
让结构和样式进行分开,提升效率;
2.css属性详解
font-family 设置字体
例如:
font-family:<font1>,<font2>...<fontn> 浏览器会依次查询设置的字体,如果都没有,则使用默认的字体.
font-style 字体风格
例如:
font-style:normal|italic|oblique 分别是:默认,斜体,倾斜显示
font-variant 字体变形
例如:
font-variant:normal|small_caps 分别是:默认,小型大写字母
font-weight 字体加粗
例如:
font-weight:normal|bold|bolder|lighter|100|200 分别是:默认为7,约为400;粗体,约为700;粗体再加粗,约为900;比默认的还小;数字越小,字体越细
font-size 字号的控制
例如:
font-size:35px;//px是浏览器通用的.还有其他的单位.pt...
text-transform 文字的更改
例如:
text-transform:uppercase|lowercase|capitalize|none 分别是:大写,小写,首字母大写,正常显示
text-decoration 文字修饰
例如:
text-decoration:underline|overline|line-through|blink|none 分别是:下划线,上划线,删除线,文字闪烁,无上述效果,正常显示;
font 字体属性
例如:
font:font-family|font-style|font-variant|font-weight|font-size
word-spacing/letter-spacing 设置字间距以及字母间距(单词,字母)
line-height 设置行距
text-align/vertical-align 文字对齐
例如:
text-align:left|right|center|justify
vertical-align:top|bottom|text_bottom|baseline|middle|sub|supper
text-indent 首行缩进
例如:
text-indent:数字|百分比
color 颜色
例如:
color:red;
background-color 背景颜色
例如:
background-color:red;
background-image 背景图像属性
例如:
background-image:<url>|none;
background-repeat 背景图片重复属性
例如:
background-repeat:repeat|repeat-x|repeat-y|no-repeat
background-attachment 固定背景图片属性
例如:
background-attachment:scroll|fixed
表示:背景图片是随内容滚动的还是固定的.
background-position 背景图片的位置
例如:
background-position:百分比|长度|关键字
background-positon:X% y%|x y|
background 背景
例如:
background:上述背景的属性.
标签<a> 对应的anchor的语法说明:
a:link 尚未链接过的超链接文字的样式
a:sisited 已经链接过的超链接的文字
a:active 鼠标单击超链接后,链接文字的显示样式
a:hover 鼠标拖动到超链接文字上时,超链接显示的文字效果
cursor 设置光标的属性
margin,border padding来控制段落.图片和表格等对象的样式
例如:
margin-(top,right,bottom,left):长度|百分比|auto
border-width 是指边框的宽度
例如:
border-width:thin|medium|thick|长度
border-style 设置边框的样式
例如:
border-style:none|solid|double|dotted|dashed|groove|ridge|inset|outset 分别是:实线,双直线,小点虚线,大点虚线,3D凹线,
padding-(top,right,left,bottom) 设置内边界
例如:
padding-(top,right,left,bottom):长度|百分比