一、样式引用
1.内部样式表
内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并且用style标签定义,其基本语法格式如下:
<head>
<style type="text/CSS">
选择器 {属性1:属性值1; 属性2:属性值2; 属性3:属性值3;}
</style>
</head>
语法中,style标签一般位于head标签中title标签之后,也可以把他放在HTML文档的任何地方。type="text/CSS" 在html5中可以省略, 写上也比较符合规范, 所以这个地方可以写也可以省略。
2.行内式(内联样式)
内联样式,又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式,其基本语法格式如下:
<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>
语法中style是标签的属性,实际上任何HTML标签都拥有style属性,用来设置行内式。其中属性和值的书写规范与CSS样式规则相同,行内式只对其所在的标签及嵌套在其中的子标签起作用。
3.外部样式表(外链式)
链入式是将所有的样式放在一个或多个以.CSS为扩展名的外部样式表文件中,通过link标签将外部样式表文件链接到HTML文档中,其基本语法格式如下:
<head>
<link href="CSS文件的路径" rel="stylesheet" />
</head>
该语法中,link标签需要放在head头部标签中,并且必须指定link标签的三个属性,具体如下:
href:定义所链接外部样式表文件的URL,可以是相对路径,也可以是绝对路径。
type:定义所链接文档的类型,在这里需要指定为“text/CSS”,表示链接的外部文件为CSS样式表。
rel:定义当前文档与被链接文档之间的关系,在这里需要指定为“stylesheet”,表示被链接的文档是一个样式表文件。
二、背景样式(background)
背景颜色 background-color
• background-color:red
• 背景颜色的值可以是英文,可以是十六进制颜色值,可以是 rgb,也可以是
rgba
背景图片 background-image
• background-image:url(bg01.jpg);
• 背景图片的大小可以和容器大小不一样
• 背景图片不会占位
• 如果容器大,背景图片小,背景图片会平铺 铺满整个容器
背景图片位置 background-position
• background-position:10px 100px;
• 背景图片定位的值是两个单位,分别代表坐标 x,y轴
• 背景图片定位的值可以是应为 left,right,top,bottom,center
• 背景图片定位的值也可以是百分比或者像素
背景图片重复 background-repeat
• background-repeat:no-repeat
•repeat 默认值 垂直方向和水平方向平铺 即:完全平铺
•repeat-x 水平方向平铺 x轴
•repeat-y 垂直方向平铺 y轴
• no-repeat 设置图像不平铺
• round 自动缩放直到适应并填充满整个容器
• space 以相同的间距平铺且填充满整个容器
背景图片定位 background-attachment
• background-attachment:fixed
• 背景图像是否固定或者随着页面的其余部分滚动
• background-attachment 的值可以是 scroll(跟随滚动),fixed(固定)
background 缩写
• background:#ff0000 url(bg01.jpg) no-repeat fixed center
三、字体样式(font)
字体族 font-family
• font-family:"微软雅黑","黑体";
使用逗号隔开多种字体(优先级从前向后,如果系统中没有找到当前字体,则往后面寻找)
字体大小 font-size
• font-size:12px;
• 网页默认字体大小是 16px
• 单位px/em,% 等
• x-large;(特大) xx-small;(极小)
字体异体 font-variant
• normal(正常)
• small-caps(小体大写字母)
字体粗细 font-weight
• font-weight:400 ;
• normal(默认)
• bold(加粗)
• bolder(相当于<strong>和<b>标签)
• light 细
• lighter (常规)更细
• 100 ~ 900 整百(400=normal,700=bold)
字体颜色 color
• 颜色的英文单词 color:red;
• 十六进制色: color: #FFFF00;
• RGB(红绿蓝) color:rgb(255,255,0)
• RGBA(红绿蓝透明度)A是透明度在 0~1之间取值。 color:rgba(255,255,0,0.5)
字体斜体 font-style
• font-style:italic
• normal 文本正常显示
• italic 文本斜体显示
• oblique 文本倾斜显示
font-stretch:收缩或拉伸当前的字体系列2
•Normal(默认值。把缩放比例设置为标准)
•Wider(把伸展比例设置为更进一步的伸展值)
•Narrower(把收缩比例设置为更进一步的收缩值)
·ultra-condensed
·extra-condensed
·condensed
·semi-condensed
·semi-expanded
·expanded
·extra-expanded
·ultra-expanded
(设置 font-family 的缩放比例。)
"ultra-condensed" 是最宽的值,而 "ultra-expanded" 是最窄的值。
复合属性 font
font:italic small-caps bold 12px 宋体;