php-CSS-1

一.层叠样式表

1.什么是CSS

CSS是Cascading Style Sheets的缩写，它除了可以设置网页元素的显示位置和格式外，甚至还能产生滤镜，图像淡化，网页淡入淡出的渐变效果；一个样式表由样式规则组成，以告诉浏览器怎样去呈现一个文档；简而言之，CSS就是对网页显示效果实现与word一样的排版控制

2.CSS语言语法

格式: 属性1：值1；属性2：值2；

单位：颜色：#rgb #8fa #aaffaa red green rgb(255,0,10)

大小：em px pt(点，1点=1/72英寸) pc(帕，1帕=12点) cm mm(米) in(英寸)

注释：/* */ 在其中不要再包含注释

3.CSS的四种设置方式

内联样式表：在HTML元素中使用style属性内联

每个HTML标签都可以加样式；代码量大，不利于更新

嵌入样式表：通过HTML的<style>标签将CSS嵌入到HTML中使用

可以控制当前页面的所有样式；不能控制其他页面的样式

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

多个页面都可以使用

输入样式表 :可以将一个样式文件输入到另外一个文件中，或将一个样式文件输入到<style>元素中 @import url(css文件)

他们的优先级：内联的高于其他的，其他三个看加载的顺序

内联：

<html>

<head><title>CSS练习</title>

</head>

<body>

</body>

</html>

嵌入：

<html>

<head><title>CSS练习</title>

<style>

color:red;

background-color:green;

font-size:2cm

}

</style>

</head>

<body>

</body>

</html>

外部： layout.css

/* 这里直接写入CSS即可 */

color:green;

background-color:red;

border:5px solid #000;

font-size:3cm;

}

css设置.html

<html>

<head><title>CSS练习</title>

</head>

<body>

</body>

</html>

二.CSS多种选择器的使用

1.什么是样式选择器

selector{ /* selector是样式选择器 */

property:value; /* color:red; */

property:value; /* font-size:4cm */

}

selector:当定义一条样式规则时，必须指定这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。

HTML选择器

HTML有标签，CSS就有选择器；选择符就是赋予内部或外部样式表的名字；

HTML的标签，用来改变一个指定标签的样式；任何一个HTML元素都可以是一个CSS选择器

类选择器：同一个选择器有不同的类，因而允许同一个元素有不同的样式

定义的方式：[tag].类名（类名是自定义的，如果不加tag则代表所有HTML元素）

<tag class="类名类名1 类名2"> （同一个元素可以使用多个类，类名之间使用空格分开）

<html>

<head><title>HTML 类样式选择器</title>

<style>

p.cla1{ color:red;

}

p.cla2{ background-color:#00ff00;

}

p.cla3{ font-size:1cm;

}

p { border:1px solid #0000ff;

}

</style>

</head>

<body>

</body>

</html>

ID选择器:在HTML页面中，ID属性指定了某个单一元素，ID属性就是用来对单一元素定义单独样式;一个HTML页面中，ID属性值要唯一

#idname{} (idname是自定义的名称)

<html>

<head>

<title>ID选择器</title>

<style>

#id1{ color:#ff0000;

font-size:1cm ;

}

#id2 { color:#00ff00;

font-size:30px;

}

#di { color:#0000ff;

font-size:20px;

}

</style>

</head>

<body>

</body>

</html>

关联选择器：只不过是一个用空格隔开的两个或更多单一选择器组成的字符串；因为层叠顺序的规则，他们的优先级比单一的选择符大；必须按关联关系使用，顺序不能反；只要能保持关联关系就可以，不管是在多少层

<html>

<head><title>关联选择器</title>

<style>

div #one .cla p{ color:#ff0000;

font-size:4cm;

}

</style>

</head>

<body>

<div>

</div>

</body>

</html>

组合选择器：为了减少样式表的重复声明，组合是允许的；只要使用英文逗号（,）隔开每个选择符就可以了

<html>

<head><title>组合样式选择器</title>

<style>

div,#one,.cla,a,h1,h2{ color:#ff0000;

font-size:3cm;

}

</style>

</head>

<body>

<div>aaaaaaaaaaaa</div>

<a>bbbbbbbbbbbb</a>

<h1>cccccccccccccc</h1>

</body>

</html>

伪元素选择器：是指同一个HTML元素在不同的状态下的一种定义方式；目前只有a和p两个HTML元素可以使用；语法：标签[.类名]：伪元素

a:link 没有任何动作前的状态 a:hover 光标移动到超链接的状态

a:active 选中超链接的状态 a:visited 访问过超链接的状态

p:first-letter 一个段落中首个字母的状态 p:first-line 一个段落首行的状态

<html>

<head><title>伪元素选择器</title>

<style>

a:link{ color:#00ff00;

font-size:1cm;

}

a:hover { color:#0000ff;

font-size:2cm;

}

a:active { color:#ff0000;

font-size:2cm;

}

a:visited { color:yellow;

font-size:1cm;

}

</style>

</head>

<body>

</body>

</html>

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

<html>

<head><title>样式的继承选择器</title>

<style>

div { color:#0000ff;

font-size:3cm;

background-color:yellow;

}

</style>

</head>

<body>

<div><p>aaaaaaaaaaaaaa</p>

</div>

</body>

</html>

样式规则的优先级：关联选择器>ID选择器>CLASS选择器>HTML标签选择器

三.CSS常见的属性和值

CSS中修饰字体的属性

font-family 字体族科任意字体族科名称都可以使用例如Times、serif、courier、sans-serif等，而且多个族科的赋值是可以使用的，中间用逗号分隔，以防止选择不存在的字体族科

font-size 字体大小可以使用绝对大小、相对大小、长度或百分比

font-style 字体风格 normal(普通) italic(斜体) oblique(倾斜)

font-weight 字体加粗 normal、bold、bolder、lighter

font-variant 字体变形 normal(普通) small-caps(小型大写字母)

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

font:italic bold 12px courier,serif;

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

letter-spacing 字母间隔该值必须符合长度格式，允许使用负值

word-spacing 文字间隔该值必须符合长度格式，允许使用负值

text-decoration 文字修饰 underline(下划线) overline(上划线) line-through(删除线) blink(闪烁)或默认使用无

text-align 横向排列 left right center或justify

text-indent 文本缩进该值必须是一个长度或一个百分比，若百分比则视上级元素的宽度而定

text-transform 字母大小写 lowercase uppercase

line-height 行高可以接受一个控制文本基线之间的间隔的值。当值为数字时，行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值

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)百分比和长度也可用作安排背景图像的位置

格式： background:<背景颜色>||<背景图像>||<背景重复>||<背景附件>||<背景位置>

应用多个图标放到同一个图片里

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

边框属性

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

通过边框风格属性border-style设定上右下左边框的风格，该属性用于设置一个元素边框的样式，而且必须用于指定可见的边框。可以使用1到4个关键字，如果四个值都给出了，他们分别应用于上、右、下和左边框的式样；如果给出一个值，他将被运用到各边上；如果给两个或三个值，省略的值与对边相同；也可以分别使用border-top-style、border-right-style、border-bottom-style和border-left-style属性单独设置各边的风格。

各边的风格使用的属性值：

none：无边框 dotted：点线式边框

dashed：破折式边框 solid：直线式边框

double：双线式边框 groove：槽线式边框

ridge：脊线式边框 inset：内嵌效果边框 outset：突起效果边框

边框宽度属性：

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

边框颜色设置：

可以通过边框颜色属性border-color设定上右下左边框的颜色，该属性用1到4个值来设置元素的边框颜色；如果只给一个值，它将被运用到各边上；如果给两个或三个值，省略的值与对边相同；如果给四个值，它们分别应用于上、右、下和左边框的式样

略写的边框属性：

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

鼠标光标属性：

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

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

list-style-type 设定引导列表项的符号类型，可以设置多种符号类型，值为disc、circle、square等

list-style-image 使用图像作为定制列表符号

list-style-position 决定列表项目缩进的程度

<html>

</head>

<body>

<li>aaaaaaaaa</li

<li>bbbbbbbb</li>

<li>cccccccccc</li>

</ul>

</body>

</html>

四.DIV CSS标准化网页布局

DIV+CSS标准化布局的优势：使用“DIV+CSS”对网站进行布局符合W3C标准，采用这种方式布局通常是为了说明与HTML表格定位方式的区别。因为现在的网站设计标准中，已经不再使用表格定位技术，而是采用DIV+CSS的方式实现各种定位。通过使用div盒子模型结构将各部分内容划分到不同的区块，然后用css来定义盒子模型的位置、大小、边框、内外边距、排列方式等。简单的说，div用于搭建网站结构（框架）、css用于创建网站表现（样式/美化）。该标准简化了HTML页面代码，获得一个较优秀的网站结构，有利于日后网站维护、协同工作和便于搜索引擎抓取。当然并不是所有的网页都需要用div布局，例如数据页面、报表之类的页面，还是使用HTML的表格会比较方便，web标准里并没有说要抛弃table。优点：表现和内容分离；代码简洁，提高页面浏览速度；易于维护和改版；提高搜索引擎对页面的索引效率

各个浏览器之间的差异：安装多种浏览器，对比差异进行调试；在FF浏览器中安装firebug（firebug为你的firefox集成了浏览网页的同时随手可得的丰富开发工具。你可以对任何网页的CSS、HTML和JavaScript进行实时编辑、调试和监控）；就算在不同的浏览器中效果不完全一致，也要做到大概一致。

“无意义”的元素div和span

HTML只是赋予内容的手段，大部分HTML标签都有其意义（例如，标签p创建段落，h1标签创建标题等等）的，然而div和span标签似乎没有任何内容上的意义，听起来就像一个泡沫做成的锤子一样无用。但实际上，与CSS结合起来后，它们被用得十分广泛。你所需要记住的是span和div是“无意义”的标签。它们的存在纯粹是应用样式，所以当样式表失效时它就没有任何的作用

它们被用来组合成一大块的HTML代码并赋予一定的信息，大部分用类属性class和标识属性id与元素联系起来。span和div的不同之处在于span是内联的，用在一小块的内联HTML中。而div（division）元素是块级的（简单地说，它等同于其前后有断行），用于组合一大块的代码，为HTML 文档内大块的内容提供结构和背景的元素，可以包含段落、标题、表格甚至其他部分，这使div便于建立不同集成的类。

div的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由div标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。

盒子模型

每个HTML元素都可以看作一个装了东西的盒子，盒子具有宽度（width）和高度（height），盒子里面的内容到盒子的边框之间的距离即填充（padding），盒子本身有边框（border），而盒子边框外和其他盒子之间，还有边界（margin）。

布局中的主要模式

font line-height color margin

padding border text-align background

•

•height

•float:

•clear

•display

定位属性：

position：用于定义一个元素是否absolute（绝对），relative（相对），static（静态），或者fixed（固定）

top：层距离顶点纵坐标的距离

left：层距离顶点横坐标的距离

width：层的宽度，可以用一个长度或“auto”值来指定其宽度，不允许使用负值

height：层的高度，可以用一个长度或“auto”值来指定其高度，不允许使用负值

z-index：决定层的先后顺序和覆盖关系，值高的元素会覆盖值比较低的元素

display：是一个显示属性，设定block值是以块状显示，在元素后面添加换行符，既其他元素不能在其后面并列显示。如果设定inline值则内联显示，在元素后面删除换行符，多个元素可以在一行内并列显示。使用值none将关闭指定元素及其子元素的显示

visibility：这个属性是针对嵌套层的设置，如果存在嵌套的层（子层）和被嵌套的层（父层）时，可以使用inherit值设置子层继承父层的可见性，如果父层可见，子层也可见。当使用visible值时，无论父层是否可见，子层都可见。而值为hidden时，无论父层是否可见，子层都隐藏

overflow：用于设置层内的内容超出层所能容纳的范围处理方式，为该属性设置visible值时，无论层的大小，内容都会显示出来。当设置hidden值时，会隐藏超出层大小的内容。当设置值为scroll时，不管内容是否超出层的范围，选中此项都会为层添加滚动条。而值使用auto值时，只在内容超出层的范围时才显示滚动条

<html>

<head><title>DIV+CSS网页设计</title>

<style>

#main{ 300px;

height:200px;

border:solid 2px;

background-color:#ff0000;

position:absolute;

top:50%;

left:50%;

margin-top:-100px;

margin-left:-150px;

}

</style>

</head>

<body>

aaaaaaaaaa

</div>

</body>

</html>

使用区块框设计页面布局