CSS
CSS简介:
为了弥补HTML在样式排版功能上的不足而制定的一套扩展样式标准(若将建造一个网页比喻成盖一座房子,则HTML是毛胚房,CSS是精装修房)。
CSS特点:
1)易于修改和使用:CSS可以将样式定义HTML文档的header部分中的style标签中/专门的CSS文件/html标签的style属性中。
2)多页面应用:利用CSS文件,实现多个页面风格的统一。
3)层叠:对一个元素多次设置同一个样式,这将使用最后一次设置的属性值。
4)页面压缩:CSS样式表的复用更大程度缩减了页面的体积。
CSS优点:
1)一个样式表可用于多个页面,有更好的易用性和扩展性。
2)内容和样式分离,使网页设计简单明了。
3)弥补了HTML对样式控制的不足(如标题、行间距、字间距等)。
4)加快网页加载的速度,缩减带宽成本。
CSS基本语法:
CSS的每个规则都包括三部分:
选择器、样式属性、属性值。
语法规范:
selector{property:value[ ;property:value;…… property:value]}
selector:选择器,指定了需要改变样式的HTML元素(若是多个以逗号分隔)。
property:样式的属性,即样式的名称。
value:样式的值。
注:属性和值之间用冒号分开,多个声明(声明=样式属性+属性值)之间用分号隔开。
CSS作用方式:
1.内联样式:HTML中每个元素均可设置其style属性, 设置相应的css样式。(无法做到通用和共享)
2.内部样式表:通过在<head>元素中增加style标签设置样式(style标签所定义的区域是专门用来设置当前HTML页的元素样式,即这种方法只适用于单个文档)。
3.外部样式文件:HTML引用一个单独的CSS文件。
外部样式文件的引用方式:
(1)<link>链接方式(放在<head>区)
格式:<link rel="stylesheet" type="text/css" href="url" />
说明:rel="stylesheet"指调用的相关文件为样式表文件。
type="text/css"指引入的文件类型是样式表文本。
(2)@import引入方式。
格式:<style type="text/css">
@import url("url");
</style>
说明:@import规定必须放在<style>标签的第一行。
区别与联系:前者是建立一个链接,在HTML的标记需要CSS样式的时候才会以链接的方式引入;后者则是将样式文件内嵌到当前页面中,作为内容的一部分。
CSS选择器种类:
1)元素选择器:直接指定HTML元素标签,设置CSS样式要作用的元素,若指定html元素标签(即多个元素使用同一组样式)有多个则用“,”隔开,允许使用“*”通配符(指定所有元素)。
2)ID选择器:为锚点ID的HTML元素指定样式(以一个"#"开始)。
3)类选择器:在HTML中以class属性表示,在CSS中,以一个点“.”开始定义。
4)属性选择器:用某个属性名称作为选择器。格式:元素标签[属性名] {设置的CSS}(允许出现多个属性名,若元素标签的地方出现*表示所有带有该属性的标签都生效)
例:<style>
*[title] {color:red}
a[href][title] {color:red;}//若body标签a只有一个href/title属性则不生效
img[alt='default'] {border:solid 1px}//只对img标签中属性为alt且属性值为default生效
</style>
5)派生选择器
(1)后代选择器(允许两个元素之间的层次间隔是无限的)
例:h1 em {color:red;}//当em标签在h1中对em标签中的内容生效(标签的嵌套)
(2)子元素选择器:选择相邻层次上的上下层子元素(>指定上下层间的关系)
(3)相邻兄弟选择器
6)CSS3中选择器
7)选择器的组合:多个选择器的组合。
例:<style>
.classA.classB{……}//中间没有空格,表示两个类选择器同时出现在某个元素的class属性中
.classA .classB{……}//后代选择器
</style>
CSS颜色:
1)十六进制颜色:#RRGGBB(RR红色,GG绿色,BB蓝色)
2)RGB颜色:RGB(红, 绿,蓝)。(每个参数在0-255或0%-100%之间)
3)RGBA颜色:A即alpha,在0.0-1.0之间,表示透明的参数
4)颜色名称
CSS超链接样式:
选择器 | 描述 |
---|---|
a:link | 未被访问的链接 |
a:visited | 已访问的链接 |
a:hover | 鼠标指针位于链接上方 |
a:active | 链接被点击时刻 |
其中text-decoration:none此声明表示该链接没有下划线。
例:a:link{color:black;font-size:10pt;text-decoration:none}
文本样式属性:
用于设置html中 文本显示的字体、大小、形态等
属性 | 描述 | 值 |
---|---|---|
color | 设置文本颜色 | 颜色 |
direction | 设置文本方向 |
|
letter-spacing | 设置字符间距 | |
link-height | 设置行高 | |
text-align | 对其元素中的文本 |
center、justify(文本若有多行 ,则两端对齐)、right |
text-decoration |
向文本添加修饰(向文本添加上 横线、删除线、下划线) |
overline、underline、 line-through、none(默认值) |
text-indent | 缩进元素中文本的首行 | 长度取值 |
text-shadow | 设置文本阴影 | |
text-transform | 控制元素中的字母 | |
unicode-bidi | 设置或返回文本是否被重写 | |
vertical-align | 设置元素的垂直对齐 | |
white-space | 设置元素中空白的处理方式 | |
word-spacing | 设置字间距 |
字体样式属性:
用于设置html页面中 文字显示的字体相关效果
属性 | 描述 |
---|---|
font | 简写属性,一条属性设置所有属性值 |
font-family | 指定字体名称 |
font-size |
字体大小 |
font-wight | 字体加粗 |
font-style | 字体斜体 |
line-height | 行高 |
font-variant | 是否以小型大写字母的字体显示文本 |
背景样式属性:
定义html标签的背景效果。
样式属性 | 描述 |
background | 简写属性,作用是将背景属性设置在一个声明中 |
background-attachment | 背景图像是否固定或者随着页面的其余部分滚动 |
background-color | 设置元素的背景颜色 |
background-image | 把图像设置为背景 |
background-position | 设置背景图像的起始位置 |
background-repeat | 设置背景图像是否及如何重复 |
边框样式
属性:border-[id1]-[id2]
1)id1取值在top、left、right、bottom中,表明方向。
2)id2取值在style、color、width中,分别表明边框样式、颜色、宽度。
3)若两个参数都不存在,则表示简写属性,用于针对把四个边的属性设置在一个声明里。
4)若id1不存在,则针对id2参数对所有边框的样式生效。
5)若id2不存在,则把id1所表示的边框位置的所有属性设置在一个声明中。
6)border-style属性取值:
取值 | 说明 |
dotted | 点线边框 |
dashed | 虚线边框 |
solid | 实线边框 |
double | 两个边框 |
groove | 3D沟槽边框 |
ridge | 3D脊边框 |
inset | 3D嵌入边框 |
outset | 3D突出边框 |