一、CSS基础
CSS:即Cascading Style Sheet(层叠样式表),是用来控制网页的表现的一门技术,使用css能让单调的html网页更富表现力,css使html文档的表现形式与结构分离开来。
CSS语法:
CSS规则有两个主要部分组成:选择器,以及一条或多条声明。如下
1 p{ 2 color:red; 3 text-indent:2em; 4 }
选择器就是需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成,属性是设置的样式属性(style attribute),每个属性都有一个值,属性和值用冒号分隔。CSS 声明总是以分号 ; 结束,声明组以大括号 {...} 括起来。为了让 CSS 可读性更强,可以每行只描述一个属性。
CSS 注释是用来解释代码,并且可以随意编辑,浏览器会忽略它。CSS注释以 "/*" 开始,以 "*/" 结束。如下:
1 p{ 2 color:red; 3 text-indent:2em; /* 段落缩进2个字,即段落开头空2个汉字的位置。 */ 4 }
1、css的四种引用方式:外部样式表,内部样式表,内联样式表,导入外部样式表
(1)外部样式表
外部样式表是最理想的css引用方式。所谓的“外部样式表”就是把css代码和html代码单独放在不同的文件中,然后在html文档中使用link标签来引用css样式。
1 <head> 2 <link rel="stylesheet" type="text/css" href="css/style.css"> 3 </head>
注意:<link> 标签中 rel="stylesheet" type="text/css" 是固定代码格式,不可更改。外部样式表可以在任何文本编辑器中进行编辑,样式文件不能包含任何的 HTML 标签,样式表以 .css 扩展名进行保存。
(2)内部样式表:就是把html代码和css代码放在同一个文件中,其中css代码放在<style></style>标签对内,并且<style></style>标签对是放在head标签对内。
1 <head> 2 <style> 3 p{ 4 color:blue; 5 font-size:14px; 6 } 7 </style> 8 </head>
(3)内联样式表:也是把html代码和css代码放在同一个文件中,但是跟内部样式表不同的是内联样式不是在<style></style>标签对内定义,而是在标签的style属性中定义:
<div style="200px;height:100px;border:1px solid black;"></div>
由于要将表现和内容混杂在一起,内联样式会损失掉样式表的许多优势。因此需要慎用这种方法,例如当样式仅需要在一个元素上应用一次时,可以使用内联样式。要使用内联样式,需要在相关的标签内使用样式属性定义,style 属性可以包含任何 CSS 属性。
(4)导入外部样式文件(一般不推荐使用该方式)
语法:#import "样式文件" 或者 @import url(“样式文件”)
@import语句也是放在<style></style>标签内
四种引用方式的优先级:
内联 > 内部 > import > link
二、CSS选择器
1、元素的id和class:是html元素中最基本的两个公共属性、
id属性被赋予了表示页面元素的唯一身份。如果一个页面出现了多个相同的id属性取值,css选择器或者javascript就无法分辨要控制的元素。
有了class属性,我们可以为同一个页面的相同元素或不同元素设置相同的class,然后使得相同的class元素具有相同的css样式。
对于元素的id和class,需要注意以下两点:
a、一个标签可以同时定义多个class
b、id也可以想成name,区别在于name是html中额标准,而id是xhtml中的标准。现在网页的标准都是使用id。
2、选择器:就是一种选择原始的方式。
语法:
选择器{
样式属性1:属性值1;
样式属性2:属性值2;
}
3.id和class选择器
(1)id选择器:可以为标有特定id的HTML元素指定特定的样式,id属性和身份证一样具有唯一性。HTML元素以id属性来设置id选择器,css中id选择器以“#”来定义。(id属性不能以数值开头)
<head> <style> #heading{ color:red; text-align:center; } </style> </head> <body> <h1 id="heading">CSS 选择器</h1> </body>
(2)class选择器:用于描述一组元素的样式,也叫做类选择器,class选择器有别于id选择器,class可以在多个元素中使用,并且一个元素也可以指定多个类名。class选择器在HTML中以class属性表示,在CSS中,类选择器以一个“.”号来定义。可以设置所有带指定class的HTML元素,也可以指定特定的HTML元素使用class。(class的第一个字符也能使用数字)。
<head> <style> .center{ text-align:center; } .col{ color:red; } .font{ font-size:18px; font-family:"Microsoft YaHei"; } </style> </head> <body> <h1 class="center">class 选择器</h1> <p class="center col">我是一个段落。</p> <p class="center font">我是另一个段落。</p> </body>
(3)、ID 选择器和类(class)选择器的区别
相同点:可以应用于任何元素。
不同点:
①、ID 选择器只能在文档中使用一次。与类选择器不同,在一个 HTML 文档中,ID 选择器只能使用一次,而且仅一次。而类选择器可以使用多次。
②、可以使用类选择器为一个元素同时设置多个样式。在一个 HTML 文档中,可以为一个元素同时设置多个样式,但只可以用类选择器的方法实现,ID 选择器是不可以的,即一个元素可以指定多个类名,如 <span class="one two three">文本</span>,而 ID 只能指定一个。
4、元素选择器
最常见的css选择器就是元素选择器,即标签选择器。即HTML的元素就是最基本的选择器。
语法:元素{属性1:属性值1;属性2:属性值2}
h1{
color:red;
text-align:center;
}
5、子选择器
就是指选中某个元素或某一类元素下的子元素,然后对该子选择器设置css样式。(选择器嵌套的一种)
语法:#father #p1{color:red;}(父选择器#father和子选择器#p1之间用一个空格隔开)
6、相邻选择器
指选择该元素的下一个兄弟元素。其操作的对象是该元素的同级元素。
语法:#lv+div{color:red;}
7、群组选择器
指同时对几个选择器进行相同的操作
语法:h3,div,p,span{color:blue;}
对于群组选择器,两个选择器之间必须用逗号隔开
三、字体样式
1、css字体样式属性
font-family:字体类型
font-family:用于设置文本的字体系列。应该始终为font-family属性设置多个字体名称作为一种后备机制。
注意事项:如果字体系列的名称超过一个字,他必须用引号,如font-family:“黑体”,“Microssoft YaHei”,中文也是需要加引号的。
font-family:Arial,"Microsoft YaHei","黑体","宋体",sans-serif; font-family:Helvetica,'Microsoft Yahei','微软雅黑',Arial,sans-serif;
font-size:字体大小
字体大小可以是绝对或相对大小:
绝对大小:a、指定文字大小。b、不允许用户在所有浏览器中改变文字大小。c、确定了输出的物理尺寸时,绝对大小很有用。
相对大小:a、相对于周围的元素来设置大小。b、允许用户在浏览器中改变文字大小。
字体的大小可以使用px、em、%组合来设置。
px:通过像素设置文本大小,可以对字体进行完全控制,虽然可以通过浏览器的缩放工具调整文本大小,但是,这种调整是整个页面,而不仅仅是文本。
em:em是W3C推荐使用的尺寸单位,可以使用em代替px。1em等于当前字体尺寸,在浏览器中默认的文字大小是16px,因此,1em的默认大小是16px。可以通过公式:px/16=em,将像素转换为em。
<head> <style> .p1{ font-size:2.5em; /* 40px/16=2.5em */ } .p2{ font-size:1.25em; /* 20px/16=1.25em */ } .p3{ font-size:0.875em; /* 14px/16=0.875em */ } </style> </head> <body> <p class="p1">我是第一个段落</p> <p class="p2">我是第二个段落</p> <p class="p3">我是最后一个段落</p> </p> </body>
如果不指定一个字体的大小,那么默认大小和普通文本段落一样,是 16 像素,即 1个汉字 = 16px = 1em。
使用%和em组合设置字体大小:在所有浏览器的解决方案中,设置<body>元素的默认字体大小是100%,可以显示相同的文本大小,并允许所有浏览器缩放文本的大小。
<head> <style> body{ font-size:100%; } .p1{ font-size:2.5em; /* 40px/16=2.5em */ } .p2{ font-size:1.25em; /* 20px/16=1.25em */ } .p3{ font-size:0.875em; /* 14px/16=0.875em */ } </style> </head> <body> <p class="p1">我是第一个段落</p> <p class="p2">我是第二个段落</p> <p class="p3">我是最后一个段落</p> </p> </body>
font-weight:字体加粗
有四个属性值:normal:标准字体 bold:粗体字体 bolder:更粗的字体 lighter:更细的字体
或者使用数值指定:从100-900定义由细到粗的字体。
font-style:字体斜体
有三个属性值:normal:默认值,正常显示文本 italic:斜体,浏览器斜体的字体样式 oblique:定义斜的文字,和斜体非常类似。
italic和oblique的区别:
这两个值都可以设置文本向右倾斜显示。一种字体有粗体、斜体、划线等多种字体属性,但是一些字体,或许只有正常体,并没有斜体,这时候就可以用 oblique 定义,他可以让没有斜体属性的文字倾斜,从 CSS 规范中就可以看出,italic 定义的是斜体,而 oblique 定义的是倾斜的文字,注意是倾斜的文字,而不是斜体字,这就是他们的区别。那么,如果一种字库中没有提供斜体字,当使用 italic 时,浏览器实际上是按 oblique 显示的。
color: 字体颜色
font-variant:字体变形,设置以小型大写字体(small-caps)或者正常字体显示文本(normal)。
<head> <style> .p1{ font-variant:normal; } .p2{ font-variant:small-caps; } </style> </head> <body> <p class="p1">Why are you so diao ?</p> <p class="p2">Why are you so diao ?</p> <p>Why are you so diao ?</p> </body>
四、文本样式
字体样式主要涉及字体本身的形体效果,而文本样式主要涉及多个文字的排版效果,即整个段落的排版效果。字体样式注重个体,文本样式注重整体。所以css在命名时,特意使用了font和text前缀来区分两类不同的性质。
1、文本水平对对齐方式:text-align(包括居中center、left、right、justify(两端对齐)四个取值,默认值为left)
当 text-align 属性的值设置为 justify 时,则表示文本两端对齐,每一行将被展开为宽度相等,左、右外边距对齐,就像杂志和报纸那样,常应用于书刊杂志排版。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上,然后,调整单词和字母间的间隔,使各行的长度恰好相等。那就是说对于英文这样定义是可以的,但是对于中文两端对齐支持并不是很好。解决办法就是再定义 text-justify 属性,将其值设置为 inter-ideograph,用表意文本来对齐内容,他增加或减少表意字和词间的空格。表意字顾名思义,就是字形有一定表达意思性的文字,汉字属于表意文字,他是文字萌芽时期的产物,是汉语形成历史中最早的一种文字。该属性值的默认值为 auto,让浏览器决定两端对齐算法。
<head> <style> .part{ color:red; text-align:justify; text-justify:inter-ideograph; } .p1{ 300px; } .p2{ 300px; } .p3{ 400px; } .p4{ 300px; } </style> </head> <body> <h1>text-align 实例</h1> <p class="part p1">当 text-align 属性的值设置为 justify 时,每一行将被展开为宽度相等,左、右外边距是对齐的,即文本两端对齐,如杂志和报纸那样。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。也就是说对于英文这样定义就可以了,但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。</p> <p class="part p2">当 text-align 属性的值设置为 justify 时,每一行将被展开为宽度相等,左,右外边距是对齐的,即文本两端对齐,如杂志和报纸那样.在两端对齐文本中,文本行的左右两端都放在父元素的内边界上.然后,调整单词和字母间的间隔,使各行的长度恰好相等.也就是说对于英文这样定义就可以了,但是对于中文这样定义是不行的.解决办法就是使用 text-justify 属性.</p> <p class="part p3">当 text-align 属性的值设置为 justify 时,每一行将被展开为宽度相等,左、右外边距是对齐的,即文本两端对齐,如杂志和报纸那样。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。也就是说对于英文这样定义就可以了,但是对于中文这样定义是不行的。解决办法就是使用 text-justify 属性。</p> <p class="part p4">当属性的值设置为时,每一行将被展开为宽度相等,左、右外边距是对齐的,即文本两端对齐,如杂志和报纸那样。在两端对齐文本中,文本行的左右两端都放在父元素的内边界上。然后,调整单词和字母间的间隔,使各行的长度恰好相等。也就是说对于英文这样定义就可以了,但是对于中文这样定义是不行的。解决办法就是使用属性。</p> </body>
综上所述,如果文本是中文,文本两端的对齐效果十分理想。如果文本是中英文混合的,通过适当的调整宽度,文本两端对齐效果相对来说比较理想,但对于宽度的调整可能会影响到整体布局,其实不调整宽度,显示效果也无伤大雅。如果文本的标点符号使用半角,或者半角和全角混合使用,那么文本两端对齐效果则相当糟糕。
text-justify 属性是 CSS3 版本中定义的属性,用于规定当 text-align 被设置为 justify 时的齐行方法,该属性指定如何对齐文本以及对齐间距,目前只有 IE 支持该属性,其他主流浏览器都不支持,如果不设置该属性,在 IE 中两端对齐则无效果,但是对于其他浏览器则无影响。该属性有多个值,除了上面提到的2个值之外,还有 none 禁用齐行。inter-word 通过增加/减少单词间的间隔对齐文本。inter-cluster 只对不包含内部单词间隔的内容进行排齐,比如亚洲语系。distribute 类似报纸版面,除了在东亚语系中最后一行是不齐行的。kashida 通过拉伸字符来排齐内容。
2、文本修饰:text-decoration,用来设置或删除文本的修饰。从设计角度来讲该属性主要是用来删除超链接的下划线,如下:
<head> <style> .a1{ text-decoration:none; } </style> </head> <body> <a href="#" target="_blank">默认带有下划线的超链接</a><br/><br/> <a class="a1" href="#" target="_blank">text-decoration:none; 删除超链接下划线</a> </body>
也可以使用其他值来设置文本的修饰,text-decoration:overline; 设置文本上划线。text-decoration:line-through; 设置文本中间划线。text-decoration:underline; 设置文本下划线。
3.文本格式:text-indent(文本缩进)、line-height(行高)、letter-spacing/word-spancing(字间距)、white-space(文本空白处理)
(1)文本缩进:text-indent属性是用来指定文本的首行缩进,允许为负值,如果为负数,第一行向左缩进。
语法:text-indent:2em;
(2)行高:line-height属性用于设置行高,不允许为负值。
(3)字间距:letter-spacing和word-spacing这两个属性都可用来增减或减少文本间的空白,即字间距。不同的是:letter-spacing属性设置字符间距,而word-spacing属性设置单词间距。注意:word-spacing属性对中文无效,因此在设置中文的字间距时请使用letter-spacing属性。
需要注意:letter-spacing 和 text-align:justify 是两个冲突的属性,不能同时使用。
(4)文本空白处理:white-space属性指定元素内的空白如何处理,默认值为normal,空白会被浏览器忽略。
其他属性值有:
nowrap:禁止换行,文本不会换行,文本会在同一行上继续,知道遇到<br/>标签为止。
pre:文本空白会被浏览器保留,这种方式类似HTML中的<pre>标签,用于定义预格式文本。
pre-wrap:指定保留空白符序列,但是正常地进行换行。
pre-line:指定合并空白符序列,但保留换行符,并允许自动换行。
<head> <style> .p1{ white-space:nowrap; } .p2{ white-space:pre; } .p3{ white-space:pre-wrap; } </style> </head> <body> <p class="p1">white-space:nowrap 指定文本不换行,直到遇到 <br> 标签。。<mark>1——</mark> 指定文本不换行,直到遇到 <br> 标签。。<mark>2——</mark> 指定文本不换行,直到遇到 <br> 标签。。<mark>3——</mark> 指定文本不换行,直到遇到 <br> 标签。。<mark>4——</mark> 指定文本不换行,直到遇到 <br> 标签。。<br/><mark>5——</mark> 指定文本不换行,直到遇到 <br> 标签。。 </p> <p class="p2"> white-space:pre 空白会被浏览器保留,该方式类似 HTML 中的 <pre> 标签。 white-space:pre 空白会被浏览器保留,该方式 类似 HTML 中的 <pre> 标签。 </p> <p class="p3"> white-space:pre-wrap 保留空白符序列,但是正常地进行换行。<mark>1——</mark> 保 留 空 白 符 序 列,但 是 正 常 地 进 行 换 行。<mark>2——</mark> 保留 空白 符序列,但是 正常地 进行换行。<mark>3——</mark> 保 留 空 白 符 序 列,但 是 正 常 地 进行换行。 </p> </body>
4、文本转换:text-transform属性控制文本中间的字母。文本转换属性是用来指定在一个文本中的大写和小写字母,可用于将所有字母变成大写或小写字母,或每个单词的首字母大写。
属性值有:capitalize---文本中每个单词首字母大写
uppercase---文本中每个单词中的字母都大写
lowercase---文本中每个单词中的字母都小写
<head> <style> .p1{ text-transform:capitalize; } .p2{ text-transform:uppercase; } .p3{ text-transform:lowercase; } </style> </head> <body> <p class="p1">this is some text. 单词以大写字母开头。</p> <p class="p2">this is some text. 仅有大写字母。</p> <p class="p3">This IS SOme Text. 仅有小写字母。</p> </body>
五、边框样式
任何一个元素都可以设置边框属性。要定义一个元素的边框必须要设置以下三个方面:
边框宽度:border-width:像素值;
边框外观:border-style :(none | hidden | solid | dashed | dotted | double);
none:无样式
hidden:与none相同,不过应用于表除外,对于表hidden用于解决边框冲突
solid:实线
dashed:虚线
dotted:点线
double:双线(宽度等于border-width)
另外,border-style还有一些3D属性值:inset:内凹,outset:外凸,ridge:脊线,growe:槽线
常用的属性值主要是solid和dashed
边框颜色:border-color :颜色值;
img{ border-1px; border-style:solid; border-color:red; }
border属性的简洁方法:border:1px solid red;
局部边框样式:上边框:border-top:1px solid red;
六、背景样式
background属性用于定义HTML元素的背景。 定义元素的背景效果的css属性有以下五种:
a、background-color
b、background-image
c、background-repeat
d、background-position
e、background-attachment
1、background-color:背景颜色
background-color属性定义了元素的背景颜色。页面的背景颜色可以使用body元素选择器进行定义:
1 body{ 2 background-color:gray; 3 }
css中定义颜色值通常使用以下方式定义:
a、十六进制,如:#ff0000,类似这样的形式,可以缩写为#f00
b、RGB,如:rgb(255,0,0)
c、关键字:如red
2、background-image:背景图像
background-image属性描述了元素的背景图像,默认背景下,背景图像进行平铺重复显示,以覆盖整个元素实体,页面背景图片设置如下:
1 body{ 2 background-image:url('images/wallpaper.jpg'); 3 }
3、background-repeat:背景图像设置水平或垂直平铺或不平铺
默认情况下,background-image 属性会在页面的水平或者垂直方向平铺。一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:background-repeat:repeat-x,定义垂直方向平铺语法:background-repeat:repeat-y。
在使用背景图像时,默认会平铺重复显示,这样不仅不具有美感,还会影响文本的排版。如果不想让图像平铺,并且只显示一次,那么就这样定义:background-repeat:no-repeat。
1 <head> 2 <style> 3 body{ 4 background-image:url('images/wallpaper.jpg'); 5 background-repeat:no-repeat; 6 } 7 </style> 8 </head> 9 <body> 10 <h1 class="center col">class 选择器</h1> 11 <p class="center col">我是一个段落。</p> 12 <p class="center col font">我是另一个段落。</p> 13 <h2 class="center">h2 标题</h2> 14 </body>
4、background-position:背景图像设置定位
在上面的例子中,背景图像与文本显示在同一个位置,这样不利于文本的阅读,为了让页面排版更加合理,可以利用 background-position 属性改变图像在背景中的位置:
1 body{ 2 background-image:url('images/wallpaper.jpg'); 3 background-repeat:no-repeat; 4 background-position:right top; 5 }
此时,背景图像会显示在页面的右上角。background-position 属性设置背景图像的位置,如果背景图像要重复,也将从这一点开始。
background-position 属性值可以使用关键字表示:left | right | center,如果仅指定一个关键字,其他值将会是 "center"。该方法可能的值的有:left top、left center、left bottom、right top、right center、right bottom、center top、center center、center bottom。
background-position 属性值也可以使用百分比表示:x%y%,默认值为:0%0%,第一个值是水平位置,第二个值是垂直位置。左上角是 0%0%,右下角是 100%100%。如果仅指定了一个值,其他值将是 50%。
background-position 属性值还可以使用长度单位精确表示,单位可以是像素或任何其他 CSS 单位,通常都使用像素。第一个值是水平位置,第二个值是垂直位置,左上角是 0 0,两个数值之间用空格隔开,例如:background-position:12px 24px; 表示背景图片距离该元素左上角的水平方向位置是 12px,垂直方向位置是 24px。该属性就是图像左上角相对于元素左上角的位置偏移,如果取负值,则向上向左偏移。该方法在制作 CSS 雪碧图(即 CSS Sprite,也叫做 CSS 精灵)时,将十分重要。
5、background-attachment:背景图像设置固定或滚动
background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动,默认值是 scroll,背景图片随页面的其余部分滚动。如果需要设置图像不随着页面的其他部分滚动,那么属性值则使用 fixed,定义背景图像是固定的,如下:
1 <head> 2 <style> 3 body{ 4 height:2000px; 5 background-image:url('images/fix.gif'); 6 background-repeat:no-repeat; 7 background-attachment:fixed; 8 } 9 </style> 10 </head> 11 <body> 12 <p>我是一个段落,我是一个段落</p> 13 <p>我是一个段落,我是一个段落</p> 14 <p>我是一个段落,我是一个段落</p> 15 <p>我是一个段落,我是一个段落</p> 16 <p>我是一个段落,我是一个段落</p> 17 <p>我是一个段落,我是一个段落</p> 18 <p>我是一个段落,我是一个段落</p> 19 <p>我是一个段落,我是一个段落</p> 20 <p>我是一个段落,我是一个段落</p> 21 <p>我是一个段落,我是一个段落</p> 22 <p>我是一个段落,我是一个段落</p> 23 <p>我是一个段落,我是一个段落</p> 24 <p>我是一个段落,我是一个段落</p> 25 <p>我是一个段落,我是一个段落</p> 26 <p>我是一个段落,我是一个段落</p> 27 <p>我是一个段落,我是一个段落</p> 28 <p>我是一个段落,我是一个段落</p> 29 <p>我是一个段落,我是一个段落</p> 30 <p>我是一个段落,我是一个段落</p> 31 <p>我是一个段落,我是一个段落</p> 32 <p>我是一个段落,我是一个段落</p> 33 </body>
6、背景属性的缩写
在上面实例中,设置页面的背景效果时,通过很多的单个属性来进行定义,这样代码就显得很繁琐,为了简化这些属性的代码,可以将这些属性合并在同一个属性中,如下:
1 body{ 2 background:green url('images/fix.gif') no-repeat fixed 12px 24px; 3 }
background 属于复合属性,也叫快捷属性,他可以简化代码,提高页面的运行效率,但是在使用 JS 时却不能使用复合属性来获取元素的样式,需要使用单个属性精确获取,如果一个元素定义了多个背景样式,那么使用复合属性获取,浏览器并不知道你到底需要哪个样式,就出错了。类似这样的复合属性还有:font、border、padding 和 margin 等。
当使用简写属性时,属性值的顺序依次为:
background-color --> background-image --> background-repeat --> background-attachment --> background-position
以上属性无需全部使用,可以按照页面的实际需要使用,比如只定义背景颜色,就可以这样设置:background:#90C;
七、超链接样式
不同的链接可以设置不同的样式,设置链接样式可以用任何 CSS 属性(如 color,background,font 等),链接的特殊性在于能够根据它们所处的状态来设置它们的样式。
在所有浏览器中,链接的默认外观如下:
①:未被访问的链接带有下划线而且是蓝色的。
②:已被访问的链接带有下划线而且是紫色的。
③:活动链接带有下划线而且是红色的。
文本修饰属性 text-decoration:none 可用于删除链接中的下划线。
链接的四种状态是:
①:a:link - 正常,未访问过的链接。
②:a:visited - 已访问过的链接。
③:a:hover - 当鼠标滑动到链接上时。
④:a:active - 链接被点击的那一刻。
当为链接的不同状态设置样式时,必须遵循以下顺序规则:
①:a:hover 必须跟在 a:link 和 a:visited 后面。
②:a:active 必须跟在 a:hover后面。
在这四种状态中,最常被应用到的状态是 a:hover,:hvoer 是一个 CSS 伪类,在鼠标移动到元素上时添加的特殊样式,可用于所有元素,不只是链接,常被用来做鼠标滑过动画。当应用到链接上时,可以使用列表布局导航栏菜单,也叫选项卡,当鼠标移动到链接菜单上时,可以显示特殊的样式。
1 <head> 2 <style> 3 *{padding:0;margin:0;font:bold 18px '微软雅黑';} 4 a{ 5 color:black; 6 background-color:green; 7 text-decoration:none;//取消连接下划线 8 display:block; 9 120px; 10 padding:10px; 11 margin:20px; 12 text-align:center; 13 } 14 a:hover{ 15 color:white; 16 background-color:lightgray; 17 text-shadow:0 0 4px red;//文字阴影 18 } 19 </style> 20 </head> 21 <body> 22 <a href="#" >CSS 基础知识</a> 23 </body>
八、图片样式
1、图片大小:在css中,对图片的大小,我们也是用width和height这两个属性来定义。
2、图片边框:在css中,设置图片边框,也是使用border属性来设置
3、图片水平到齐:在css中,设置图片水平对齐,也是使用text-align属性来设置
4、图片垂直对齐:在css中,使用vertical-align属性来定义图片的垂直对齐方式
语法:vertical-align:属性值;
属性值的取值有:top:顶部对齐; middle:中部对齐; baseline:基线对齐; bottom:底部对齐;
W3C对vertical-align属性的定义是:vertical-align属性定义行内元素相对于该元素的垂直对齐方式。
九、列表样式
从某种意义上讲,不是描述性的文本的任何内容都可以认为是列表,比如家谱、人口普查、太阳系,甚至你的所有朋友都可以表示为一个列表或者是列表的列表。
由于列表如此多样,这使得列表相当重要,在 HTML 中,有两种类型的列表:①:无序列表 - 列表项标记用特殊图形,默认以小黑点样式显示。②:有序列表 - 列表项的标记默认以数字样式显示。
CSS 列表属性作用如下:①:设置不同的列表项标记。②:设置列表项标记为图像。
通过CSS,可以列出进一步的样式,并可用图像作列表项标记。修改列表项标记使用list-style-type,使用图像作为标记可以利用list-style-image 属性完成。
1、无序列表项标记
无序列表可被用来做导航栏菜单,通常都需要隐藏无序列表项的标记,那么就使用list-style-type:none,表示无标记。list-style-type 属性的默认值为disc 实心圆,即小黑点。
1 <head> 2 <style> 3 ul{ 4 list-style-type:none; 5 } 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li>HTML 超文本标记语言</li> 11 <li>CSS 层叠样式表</li> 12 <li>JavaScript 赋予 HTML 动态交互</li> 13 <li>jQuery 最好用的JS库</li> 14 <li>Bootstrap 前端开发框架</li> 15 </ul> 16 </body>
无序列表除了可以无标记之外,还可以修改标记类型,如circle 空心圆,square 实心方块。实例:
1 <head> 2 <style> 3 .ul1{ 4 list-style-type:circle; 5 } 6 .ul2{ 7 list-style-type:square; 8 } 9 </style> 10 </head> 11 <body> 12 <ul class="ul1"> 13 <li>HTML 超文本标记语言</li> 14 <li>CSS 层叠样式表</li> 15 <li>JavaScript 赋予 HTML 动态交互</li> 16 </ul> 17 <ul class="ul2"> 18 <li>jQuery 最好用的JS库</li> 19 <li>Zepto 兼容 jQuery 语法的移动端JS库</li> 20 <li>Bootstrap 前端开发框架</li> 21 </ul> 22 </body>
2、有序列表
有序列表项标记默认使用数字样式显示,即 list-style-type:decimal,也可以将标记项修改为其他类型,cjk-ideographic 则指定汉语数字(表意数字)作为标记。decimal-leading-zero 指定以0开头的数字作为标记,如 01, 02, 03, 等。lower-roman 指定以小写罗马数字作为标记,如 i, ii, iii, iv, v, 等。upper-roman 指定以大写罗马数字作为标记,如 I, II, III, IV, V, 等。lower-alpha 指定以小写英文字母作为标记。upper-alpha 指定以大写英文字母作为标记。
3、图像作为列表项标记
要指定列表项标记的图像,可以使用 list-style-image 属性,只需要简单地设置一个 url() 值,就可以将图像作为标记类型。
1 <head> 2 <style> 3 ul{ 4 list-style-image:url('images/ul-icon.jpg'); 5 } 6 </style> 7 </head> 8 <body> 9 <ul> 10 <li>HTML 超文本标记语言</li> 11 <li>CSS 层叠样式表</li> 12 <li>JavaScript 赋予 HTML 动态交互</li> 13 <li>jQuery 最好用的JS库</li> 14 <li>Bootstrap 前端开发框架</li> 15 </ul> 16 </body>
4、列表项标记的位置
list-style-position 属性可以设置列表中列表项标记的位置。默认值为 outside 保持标记位于文本的左侧,列表项标记放置在文本以外,且环绕文本不根据标记对齐。inside 则指定列表项目标记放置在文本以内,且环绕文本根据标记对齐。如下:
1 <head> 2 <style> 3 .ul1{ 4 list-style-position:outside; 5 } 6 .ul2{ 7 list-style-position:inside; 8 } 9 li{ 10 margin:5px; 11 border:2px solid red; 12 } 13 </style> 14 </head> 15 <body> 16 <ul class="ul1"> 17 <li>HTML 超文本标记语言</li> 18 <li>CSS 层叠样式表</li> 19 <li>JavaScript 赋予 HTML 动态交互</li> 20 <li>jQuery 最好用的JS库</li> 21 <li>Bootstrap 前端开发框架</li> 22 </ul> 23 <ul class="ul2"> 24 <li>HTML 超文本标记语言</li> 25 <li>CSS 层叠样式表</li> 26 <li>JavaScript 赋予 HTML 动态交互</li> 27 <li>jQuery 最好用的JS库</li> 28 <li>Bootstrap 前端开发框架</li> 29 </ul> 30 </body>
在上面例子中,使用了2个无序列表,第一个列表项标记位置为默认,第二个列表项标记被放置在文本以内,为了增强演示效果,给每个列表项都设置外边距和边框,在浏览器中可以很直观的看到二者的不同,默认值的标记在边框外,而inside则在边框内,还有一点需要注意:在Chrome 和Firefox 中这两个值的标记位置与列表项之间的空白都是相等的,而在IE中可以很明显的看到,使用inside值后,标记位置与列表项之间的空白比默认值宽。
5、列表属性简写
在单个属性中可以指定所有的列表属性,可以将以上 3 个列表样式属性合并为一个方便的属性:list-style。
当使用简写属性时,属性值的顺序依次为:
list-style-type --> list-style-position --> list-style-image
可以不设置其中的某个值,比如 list-style:square inside 也是允许的,未设置的属性将使用默认值。
无序列表项的标记在隐藏时,使用简写属性,且考虑到浏览器的兼容性,可以定义为:list-style:none outside none; 或者不设置第三个值也好。
十、表格样式
使用css可以大大提高HTML表格的外观。
1、表格表框
给表格设置边框,可以使用 CSS 的 border 属性定义,也可以使用表格标签的 border 属性定义。如下:
1 <head> 2 <style> 3 table,th,td{ 4 border:1px solid black; 5 } 6 </style> 7 </head> 8 <body> 9 <table> 10 <tr> 11 <th>粗粮</th> 12 <th>蔬菜</th> 13 <th>水果</th> 14 </tr> 15 <tr> 16 <td>大豆</td> 17 <td>黄瓜</td> 18 <td>香蕉</td> 19 </tr> 20 <tr> 21 <td>高粱</td> 22 <td>菠菜</td> 23 <td>柠檬</td> 24 </tr> 25 </table> 26 </body>
注意,这样设置的表格具有双线条边框,这是由于 table、th 以及 td 元素都有独立的边框。为了显示一个单线条边框的表格,就使用 border-collapse 属性。
2、折叠边框
border-collapse 属性设置是否将表格边框合并为单一线条的边框。该属性的默认值为 separate 边框会分开显示,不会忽略 border-spacing 和 empty-cells 属性。collapse 如果可能,边框会合并为一个单一的边框,该值会忽略 border-spacing 和 empty-cells 属性,即设置这两个属性无效。如下:
1 <head> 2 <style> 3 table{ 4 border-collapse:collapse; 5 } 6 table,th,td{ 7 border:1px solid black; 8 } 9 </style> 10 </head> 11 <body> 12 <table> 13 <tr> 14 <th>粗粮</th> 15 <th>蔬菜</th> 16 <th>水果</th> 17 </tr> 18 <tr> 19 <td>大豆</td> 20 <td>黄瓜</td> 21 <td>香蕉</td> 22 </tr> 23 <tr> 24 <td>高粱</td> 25 <td>菠菜</td> 26 <td>柠檬</td> 27 </tr> 28 </table> 29 </body>
border-spacing 属性用于设置相邻单元格的边框间的距离,仅用于边框分离模式,即双线条边框表格。使用 px、cm 等单位指定距离,不允许使用负值。如果定义一个参数,那么定义的是水平和垂直间距。如果定义两个参数,那么第一个设置水平间距,而第二个设置垂直间距。
empty-cells 属性设置是否显示表格中的空单元格,仅用于边框分离模式,即双线条边框表格。该属性用于定义不包含任何内容的表格单元格如何显示,如果显示,就会绘制出单元格的边框和背景。该属性的默认值为 show 在单元格周围绘制边框,hide 不在单元格周围绘制边框。
除非表格的边框显示为双线条边框,否则这两个属性都无效。
1 <head> 2 <style> 3 .tab1{ 4 empty-cells:hide; 5 border-spacing:10px; 6 } 7 .tab2{ 8 border-spacing:20px 50px; 9 margin-top:20px; 10 } 11 </style> 12 </head> 13 <body> 14 <table border="1" class="tab1"> 15 <tr> 16 <th>粗粮</th> 17 <th>蔬菜</th> 18 <th>水果</th> 19 </tr> 20 <tr> 21 <td></td> 22 <td>黄瓜</td> 23 <td></td> 24 </tr> 25 <tr> 26 <td>高粱</td> 27 <td></td> 28 <td>柠檬</td> 29 </tr> 30 </table> 31 <table border="1" class="tab2"> 32 <tr> 33 <th>粗粮</th> 34 <th>蔬菜</th> 35 <th>水果</th> 36 </tr> 37 <tr> 38 <td></td> 39 <td>黄瓜</td> 40 <td></td> 41 </tr> 42 <tr> 43 <td>高粱</td> 44 <td></td> 45 <td>柠檬</td> 46 </tr> 47 </table> 48 </body>
3、表格宽度和高度
width 和 height 属性定义表格的宽度和高度。
4、表格对齐
text-align 和 vertical-align 属性用于设置表格中文本的对齐方式。
①、text-align 属性设置水平对齐方式,比如左对齐,右对齐和居中。
②、vertical-align属性设置垂直对齐方式,比如顶部对齐,底部对齐或中间对齐。
vertical-align:top; 顶部对齐。vertical-align:middle; 中间对齐。vertical-align:bottom; 底部对齐。
caption-side 属性可以设置表格标题的位置,默认值为 top 将标题定位在表格之上,bottom 可以把表格标题定位在表格之下。
5、表格内边距
如果需要控制表格中内容与边框的距离,就应该增加内容的内边距,即为 td 和 th 元素设置 padding 属性。
6、表格颜色
可以为表格的边框指定边颜色,也可以为表头以及单元格指定背景颜色,还可以设置文本的颜色。
综合实例:
1 <head> 2 <style> 3 #tab{ 4 50%; 5 font-family:"微软雅黑"; 6 border-collapse:collapse; 7 } 8 #tab th,#tab td{ 9 border:1px solid #7AC942; 10 padding:5px 10px; 11 } 12 #tab th{ 13 color:white; 14 background-color:#9C3; 15 font-size:1.125em; 16 text-align:left; 17 padding-top:4px; 18 padding-bottom:8px; 19 } 20 #tab .list td{ 21 color:#000; 22 background-color:#FFC; 23 } 24 caption{ 25 margin-bottom:10px; 26 font-weight:bold; 27 font-size:1.5em; 28 } 29 </style> 30 </head> 31 <body> 32 <table id="tab"> 33 <caption>食物类别</caption> 34 <thead> 35 <tr class="list"> 36 <th>粗粮</th> 37 <th>蔬菜</th> 38 <th>水果</th> 39 </tr> 40 </thead> 41 <tbody> 42 <tr> 43 <td>大豆</td> 44 <td>黄瓜</td> 45 <td>香蕉</td> 46 </tr> 47 <tr class="list"> 48 <td>高粱</td> 49 <td>菠菜</td> 50 <td>柠檬</td> 51 </tr> 52 <tr> 53 <td>玉米</td> 54 <td>辣椒</td> 55 <td>芒果</td> 56 </tr> 57 <tr class="list"> 58 <td>燕麦片</td> 59 <td>白菜</td> 60 <td>西瓜</td> 61 </tr> 62 </tbody> 63 </table> 64 </body>
十一、CSS盒子模型
1、css盒子模型
在css盒子模型中,页面内的所有元素都可以看成盒子,并且占据着一定的页面空间。
一个页面由很多这样的盒子组成,这些盒子之间会互相影响,因此掌握盒子模型可以从两方面来理解:一个理解单独盒子的内部结构,二是理解多个盒子之间的相互关系。
每个元素都看成一个盒子,盒子模型由content(内容),padding(内边距),border(边框),margin(外边距)这四个属性组成。此外,在盒子模型中,还有宽度width和高度height两大辅助性属性。
(一个盒子的宽度或高度是由content+padding+border+margin组成,页面中的所有元素都可以看作一个盒子)
(1)content(内容区):是盒子模型的中心,它呈现了盒子的主要信息内容,这些内容可以是文本、图片等多种类型。内容区是盒子模型必备的组成部分,其他的三部分都是可选的。
内容区有三个属性:width、height和overflow
width、height两个属性是针对内容区而言,并不包括padding部分。
当内容信息太多,超出了内容区所占的范围时,可以使用overflow溢出来指定处理方法。
overflow属性的取值:hidden(溢出隐藏) auto(自适应加滚动条) scroll(无论溢出与否都加滚动条)
(2)padding(内边距):指的是内容和边框之间的空间,可以看作是内容区的背景区域。
关于内边距的属性有5中,即padding-top、padding-bottom、padding-left、padding-right以及综合了以上四个方向的简洁内边距属性padding。
语法:
padding:20px;四个方向的padding值都是20px
padding:20px 40px;上下为20px,左右为40px
padding:10px 20px 30px 40px;顺序是上右下左。
(3)border(边框):在css盒子模型中,边框跟我们之前学的边框是一样的。
(4)margin(外边距):指的是两个盒子之间的距离,他可能是子元素与父元素之间的距离,也可能是兄弟元素之间的距离。
外边距使得元素之间不必紧凑的连接在一起,是css布局的一个重要手段。
语法:
margin:20px;
margin:20px 40px;
margin:10px 20px 30px 40px;顺序与padding设置顺序一致。
十二、浮动布局
1、HTML文档流
(1)正常文档流
html文档流:就是元素在页面出现的先后顺序。
正常文档流,将窗体自上而下分成一行一行,块元素独占一行,相邻行内元素在每行中按从左到右依次排列元素。
(2)脱离正常文档流
相对于正常文档流而言,正常文档流就是我们没有用css样式去控制的html文档结构,你写的界面的顺序就是网页展示的顺序。
所谓脱离正常文档流就是指它所显示的位置和文档代码顺序不一致。
在css布局中,我们可以使用浮动或者定位这两种技术来实现“脱离正常文档流”,从而随心所欲地控制页面的布局。
2、浮动float(不完全脱离文档流)
浮动属性float是css布局的最佳利器,我们可以通过不同的浮动属性值灵活地定位div元素,以达到布局网页的目的。
我i么可以说通过css的属性float使元素向左或向右浮动。
在css中,任何元素都可以浮动。
浮动元素会生成一个块级框,而不论它本身是何种元素。
语法:float:取值;(取值包括left和right)
如果子元素是浮动的。则撑不开父元素的高度,(解决办法是给父元素田间一个overflow:hidden)
3、清除浮动clear
在css中,清除浮动都是在定义了浮动的元素之后设置的。
语法:clear:取值;(取值主要包括:left取消左浮动,right清除右浮动,both左右浮动一起清除)
十三、定位布局position
定位布局使得用户精准定位页面中的任意元素成为可能,页面布局操作变的更加随心所欲。
定位布局共有四种:固定定位、相对定位、绝对定位、静态定位
(1)固定定位fixed
当元素的position属性设置为fixed时,这个元素就被固定了,被固定的元素不会随着滚动条的拖动而改变位置。
在视野中,固定定位的元素位置是不会改变的。即它是指定元素相对于可视区域的位置,原来位置消失,不能与float连用。
语法:position:fixed;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
left和top的优先级高于right和bottom。
(2)相对定位relative
采用相对定位的元素,其位置是相对于它原始位置计算而来的。
语法:position:relative;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
(3)绝对定位absolute
使用最为广泛,能够将元素移动到你想要的位置。
一个元素变成了绝对定位元素,这个元素就完全脱离了正常文档流了,绝对定位的前面或后面的元素会认为这个元素并不存在,即这个元素浮于其他元素上方,它是独立出来的。
语法:position:absolute;
top:像素值;
bottom:像素值;
left:像素值;
right:像素值;
(4)静态定位static
如果没有指定元素的position属性值,也就是默认情况下:元素是静态定位。只要是支持position属性的html对象都是默认的static,static是position属性的默认值,他表示块保留在应该在的位置,不会重新定位。
(5)z-index属性用于调整定位时重叠块的上下位置,当块设置了position属性时,该值便可以设置各项的重叠高低关系,默认值为0;