PHP.9-HTML+CSS（三）-CSS样式

CSS样式

CSS是Cascading Style Sheets的简写，它除了可以轻松设置网页元素的显示位置和格式处，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果。CSS就是要对网页的显示效果实现与Word一样的排版控制一个段落、字体、颜色、背景、边框等。

注：注释/*  */里面不能再包含注释

1、CSS的四种设置方式

内联样式表：在HTML元素标签中使用style属性内联，在需要相同样式情况下，不适用

每个HTML标签都可以加样式，如下：

	
		
aaaaa
		
bbbb
		
cccc
		wwwwwww
	

嵌入样式表：通过HTML的

外部样式表：将样式单独定义在一个后缀名为.css的文档中，并在HTML中通过link元素连接到HTML中使用。

多个页面都可以使用

输入样式表：可以将一个样式文件输入到另外一个样式文件的中，或将一个样式文件输入到 yyyyyyyyyy
xxxxxxxxxxxx
zzzzzzzzzzzzzz

hhhhhhhhhhhhhhhhhhh
uuuuuuuuuuuuuuuuuuu
xxxxxxxxxxxxxxxxxxxxx

hhhhhhhhhhhhhhhhhhh
uuuuuuuuuuuuuuuuuuu
xxxxxxxxxxxxxxxxxxxxx

##样式规则的继承

所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。

##样式规则的优先级

关联>ID选择器>CLASS选择器>HTML标签选择器

#################################################################################

如何下载页面中的css文件：http://www.daimami.com/HTML-CSS/188531.htm

#################################################################################

3、常见CSS的属性和值

1、字体 

font: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科> 

#根据值判断属性，最好按顺序输入

CSS中修饰字体的属性

属    性	描    述	属  性  值
font-family	字体族科	任意字体族科名称都可以使用例如Times、serif等，而且多个族科的赋值是可以使用的，中间用逗号分隔，以防止选择不存在的字体族科
font-size	字体大小	可以使用绝对大小、相对大小、长度或百分比
font-style	字体风格	normal（普通），italic（斜体）或oblique（倾斜）
font-weight	字体加粗	normal、bold、bolder或lighter等
font-variant	字体变形	normal（普通）或small-caps（小型大写字母）

2、文本

CSS中常见的控制文本的属性

属    性	描    述	属  性  值
letter-spacing	字母间隔	该值必须符合长度格式，允许使用负值
word-spacing	文字间隔	该值必须符合长度格式，允许使用负值
text-decoration	文字修饰	underline（下划线），overline（上划线），line-through（删除线），blink（闪烁），或默认地使用无
text-align	横向排列	left、right、center或justify
text-indent	文本缩进	该值必须是一个长度或一个百分比，若百分比则视上级元素的宽度而定
line-height	行高	可以接受一个控制文本基线之间的间隔的值。当值为数字时，行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值

3、背景 

background:  <背景颜色> || <背景图象>|| <背景重复> || <背景附件>|| <背景位置> 

CSS中常见的控制背景的属性

属    性	描    述	属  性  值
background-color	背景颜色	值和color属性值设定方式相同，或使用transparent（透明）值
background-image	背景图象	图片URL或none（无）
background-repeat	背景重复	repeat、repeat-x、repeat-y、no-repeat
background-attachment	背景附件	scroll（滚动）或fixed（固定）
background-position	背景位置	横向的关键字（left, center, right），纵向的关键字（top, center, bottom）百分比和长度也可用做安排背景图象的位置

页面优化

应用多个图标放到同一个图片里【可减少服务器请求次数，到达优化目的】

多个图标放到同一个图片里，通过定义某区块的背景定位，调用同一个图片中不同位置上的小图标，好处是可以减少对服务器的请求次数，从而加快页面的访问速度

4、位置
5、边框

a.边框属性

任何一个元素都可以设置边框

边框属性是用于设置一个元素边框风格、边框宽度、边框颜色的略写，可以一起设置 4 边的边框，也可对上边框、右边框、下边框和左边框单独设置。 

b.边框风格属性

可以通过边框风格属性 border-style 设定上下左右边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。可以使用 1 到 4 个关键字，如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。

如果给出一个值，它将被运用到各边上。

如果两个或三个值给出了，省略了的值与对边相等

也可以分别使用 border-top-style、border-bottom-style、border-left-style和border-right-style 属性单独设置各边的风格 

c.各边的风格使用的属性值

none ：没有边框，无论边框宽度设为多大

dotted ：点线式边框

dashed ：破折线式边框

solid ：直线式边框

double ：双线式边框

groove ：槽线式边框

ridge ：脊线式边框

inset ：内嵌效果的边框

outset ：突起效果的边框

d.边框宽度属性

可以通过边框宽度属性border-width设定上下左右边框的宽度，该属性用1到4个值来设置元素的边界，值是一个关键字或长度，不允许使用负值长度。
如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。
如果只给出一个值，它将被运用到各边上。
如果两个或三个值给出了，省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。
也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。除了可以使用长度单位定值外，还可以用medium（是默认值）、thin（比medium细）或thick（比medium粗）值。 

e.边框颜色属性

可以通过边框颜色属性border-color设定上下左右边框的颜色，可以使用1到4个关键字。如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。如果给出一个值，它将被运用到各边上。如果两个或三个值给出了，省略了的值与对边相等

f.略写的边框属性

CSS属性border是边框属性的一个快捷的综合写法，是一个用于设置一个元素边框的宽度、式样和颜色的略写，它包含border-width，border-style和border-color属性。 
边框属性border只能设置四种边框，也只能给出一组边框的宽度和式样。为了给出一个元素的四种边框的不同的值，网页制作者必须用一个或更多的属性，如：上边框、右边框、下边框、左边框、边框颜色、边框宽度、边框式样、上边框宽度、右边框宽度、下边框宽度或左边框宽度。

鼠标光标属性 

在网页中默认的鼠标指针只有两种，一种是最普通的箭头，另一种是当移动到链接上时出现的“小手”。但现在越来越多的网页都使用了CSS鼠标指针技术，当将鼠标移动到链接上时，可以看到多种不同的效果。CSS可以通过Cursor属性实现鼠标形状的改变，其属性可以是默认的鼠标形状default、小手形状hand、交叉十字crosshair、文本选择符号text、Windows的沙漏形状wait、带有问号的鼠标help以及move各个方向的箭头属性值。 

6、列表【常用为样式自调】

CSS中常见的控制列表的属性

nl style：无序

ol style：有序

属    性	描    述
list-style-type	设定引导列表项的符号类型，可以设置多种符号类型，值为disc、circle、square等
list-style-image	使用图像作为定制列表符号
list-style-position	决定列表项目缩进的程度

7、其他