CSS

来源：互联网发布：鞋业销售软件编辑：程序博客网时间：2024/05/24 06:17

第3章CSS

3.1 Web标准简介

1 什么是web标准

Web标准不是一个标准，而是由W3C和其他的标准化组织制定的一系列标准的集合。包含我们熟悉的HTML、XHTML、JavaScript以及CSS等

2、制定标准的目的

创建一个统一的用于web表现层的技术标准，以便于通过不同浏览器或终端设备向最终用户展示信息内容。

3、采用标准的好处

⑴、可以提升网页浏览速度，

⑵、缩短改版时间，将表现（样式/外观）与内容（信息/数据）相分离。只要简单地修改几个CSS文件就可以重新设计一个有成千上万页面的战点

⑶、降低网站流量的费用。

⑷、更容易被搜索引擎搜到。

⑸、内容能被更广泛的设备所访问。

4、web标准的构成

⑴、结构（structure）标准：XHTML

⑵、表现（presentation）标准:CSS

⑶、行为（behavior）标准:JavaScript

制作一个静态网页，主要用的的是XHTML与CSS，所以制作标准页面，的技术就是XHTML+CSS

5、理解表现与结构分离

⑴、内容：制造者放在页面内真正想要让访问者浏览的信息和数据

⑵、结构；使内容更加具有逻辑性和易用性

⑶、表现：用于修饰内容的外观样式的东西

⑷、行为：对内容的交互及操作结果

6、CSS特性

⑴、继承：可以根据css继承的特点，可以给父元素设置样式，它的子元素也会继承。因为子元素有自己默认的样式，所以他就不用父类的了。

⑵、层叠：网页中子元素定义了与父元素相同的样式，则子元素的样式将覆盖掉父元素的样式。

3.2 CSS

3.2.1 语法及优先权

1、CSS语法结构

⑴、层叠样式表：cascadingstyle sheets

⑵、格式：选择器{属性名：属性值；属性名：属性值；……}

2、CSS字体控制

⑴、大小：font-size

⑵、字体：尽量使用通用的字体，如宋体、Arial

⑶、颜色：color

⑷、行高：line-height

⑸、字体粗细：font-weight：normal、bold

⑹、

⑺、

⑻、

3、CSS的相对长度单位

Px是Pixel的简写，像素的意思

em:相对长度单位，相对于当前对象内文本的字体尺寸，如果当前行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。

4、CSS使用技巧：

⑴、为了CSS代码的优化，所有属性值后面，都要加上“；”

⑵、某些XHMTL标签，有自己默认的css属性值，如h1标签就有自己的属性值，自动加粗加大

⑶、为了兼容主流浏览器，或者统一效果，建议在设置时，将所有元素的CSS属性，重置为标准的

⑷、不同的浏览器有各自不同的css属性值，浏览器的兼容

⑸、尽量使用通用的字体,但如果就一个比较特殊的字体想使用，可以利用图片。中英文混合时，设置字体的顺序：讲英文字体设置在前，中文在后。

⑹、想让文字在其垂直方向上居中，，将行高设置为，元素的高度，行高=元素高度，****注意文字长度不要超过一行

⑺、CSS可以重新设置XHTML默认的样式

5、CSS的优先级：

⑴、四种方式的优先权：内联式样式 —> 嵌入式样式表 -à外部链接式“样式表“ -à导入式“样式表“

⑵、原则：①、就近原则

②、作用范围越小，优先级越高

③、离要修饰的目标越近，优先级越高

⑶、选择器优先权：行内>id>class>标签选择符

我们可以利用！importance语法来提升优先权，它用于你想要提权属性的后面。但IE6不兼容。

3.2.2 CSS与HTML结合的4中方式

1、内联式样式表：每个HTML标签都有style属性，直接在现有的标记中写入

2、嵌入式样式表当页面中有多个标签具有相同样式时，可定义style标签封装样式以复用

3、导入式“样式表“：当多个页面使用相同样式时，可将样式单独封装为CSS文件导入。

缺点：⑴、会占用html文件空间

⑵、有些浏览器，解析会出问题，浏览器会最后读取@import中内容。

4、外部链接式“样式表“：通过HTML头标签中的link标签链接一个CSS文件，这是学习XHTML+CSS的核心，即结构与样式分离。

技巧：为提高样式的复用性和可扩展性，将多个样式单独定义并封装为CSS文件，如p.css、div.css……在一个总的CSS文件中，使用import导入这些CSS文件，然后在HTML页面中用link标签将这个总的CSS文件导入即可。

3.2.3 选择器

1、CSS选择器的作用：指定CSS样式所作用的范围，表示你将把你定义的样式用给谁

2、分类

⑴、标签选择器：针对HTML某一类标签。每个HTML标签名即为一个选择器

比如：要控制网页中所有的P标签：p{属性：值}

⑵、ID选择器：如果只想针对某一个元素进行控制，就使用它，标签的id属性，尽量保证唯一，便于JavaScript获取元素

比如：语法 #ID名称{属性：值}

#two{font-weight：bold；font-size:24px}

⑶、类选择器：针对某一类元素设置相同的样式类选择器。可以自己定义样式，应用于一个或多个网页元素，类在网页中可以出现多次，用于定义重复的样式。类以英文“.”开头，后面的名字自己定义，类定义后还需在网页中加入class=类名称，加以调用。也可以给某个元素加多个类，类名与类名之间用空格分隔。

比如：.warning{属性：值}

3、选择器详解

⑴、关联选择器：选择符的嵌套使用----包含选择符

前端开发的极限就是代码非常的精简！

如果我们针对某个元素的子元素进行控制，可以使用嵌套的方式，不必再为子元素设置ID

语法：父元素子元素{属性：值}

⑵、组合选择器（集体控制）：多个选择符会有一些相同的样式，这个时候我们就可以把这些选择符组成一个组：选择符1，选择符2，选择符3，......

例如：h1,h2,h3,strong{font-weight:nomal;}

⑶、标签指定式选择符：如果既想使用id或class，也同时想使用标签选择符

例如：p#six{backgroud:grey;}这是针对所有id为six的p标签

li.a{ color:red; }这是针对所有class为a的li标签

4、命名

⑴、CSS选择符命名，规范---语义化命名

①、驼峰命名法:除第一个单词的首字母小写外，其余所有单词首字母都大写headerBlock（优选）

②、帕斯卡命名法：与驼峰相似，区别就是所有单词的首字母都大写。

③、匈牙利命名法：是需要在名称前面加上一个或多个小写字母作为前缀

最常用的是驼峰命名法和帕斯卡命名法。

⑵、页面模块的常用CSS命名

头：header 热点：hot 新闻：news 尾：footer 下载：download 导航：nav

广告：banner 侧栏：sidebar 页面主体：栏目：column 子导航：subnav

页面外围控制整体布局宽度：wrapper 菜单：menu 登录条：loginbar 版权：copyright

5、控制所有元素----使用通配符---*

默认情况下某些html元素本身有自己的默认值，假如想要控制所有的该怎么办？选择通配符。通配选择符：*{属性：值}，用于定义所有html元素

*的作用范围很广，但是它的效率最低。（慎用）

*{margin：0；padding：0}//重置所有元素的外边距和内边距为0，大网站不用！

3.2.4 CSS控制

1、CSS控制文本

⑴、设置对象中文本缩进：text-indent：2em

⑵、文本水平对齐方式：text-align：left、right、center

⑶、对象中空白处理：white-space：normal[自动换行]、pre[换行和空白受保护，即文本什么样，就怎样显示]、nowrap[强制在同一行显示]

⑷、文本大小写控制：text-transform：none、capitalize[每个单词的第一个字母转换成大写]

⑸、元素的垂直对齐方式：vertical-align：sub、super、text-bottem[把元素的低端与父元素字体的低端对齐]

2、CSS控制链接--CSS伪类

⑴、控制元素的某种状态

伪类语法：元素名称：伪类名称{属性：值}

如果，鼠标放上效果不起作用，请修改链接状态的顺序 L-V-H-A
举例：
<style type="text/css">
   a:link{text-decoration:none;color:black;}
   a:visited{text-decoration:line-through;color:green;}
   a:hover{text-decoration:underline;color:blue;}
   a:active{text-decoration:overline;color:green;}
</style>

⑵、自定义链接的CSS类
a.类名称:状态
CSS伪类用于像某些选择器添加特殊效果
语法：选择符：伪类名称{属性：值}
例如：a:hover{color:#FF00FF;text-decoration:underline;}
:focus 设置对象在成为输入焦点（该对象的onfucs事件发生）时的样式（IE6/7不支持）

3、控制边框的属性

border : border-width (粗细)|| border-style(样式) || border-color(颜色)

由语法推理可得：如果只写border，则后面要跟着的是三个不同的子属性，第一个代表粗细，第二个代表样式，第三个代表颜色

举例：border：2px solid blue;（四条边属性全相同）

border-top：2px solid blue;

4、控制列表

⑴、列表属性：list-style:typeposition image

⑵、列表项目类型：list-style-type:none（一般就这样设置） disc circle aquare decimal lower-roman upper-roman lower-alphaupper-alpha

⑶、列表项目位置：list-style-position:insideoutside

⑷、列表项目图片：list-style-image:URL、none

3.2.5、CSS盒子模型

1、从内到外：content padding border margin

⑴、盒子中的内容content

⑵、盒子的边框 border

⑶、盒子的边框与内容的距离，成为填充--padding 内边距，内补丁

⑷、多个盒子存在，盒子与盒子之间的举例，称为边界--margin 外边距，外补丁

整个盒子模型在页面中所占的实际宽度=左边界+左边框+左填充+内容+右填充+右边框+右边界

2、CSS盒子相关属性

⑴、内容属性：内容本身的宽/高=width/height

⑵、内填充属性：内容与边框之间的属性=padding

如果是四个参数都有，表示：上右下左（顺时针方向）举例：padding：20px 0 0 20px;

在定义盒子的宽度时，要考虑盒子的内填充，边框，边界的存在。如果增加了内填充，要使所占空间不变，则应将盒子的宽度要减去增加值

⑶、以下规则适用于padding margin

padding：20px 30px40px 50px;

如果只有一个参数时，表示上右下左，例如：padding：20px;

如果只有两个参数时，表示上下，左右，例如：padding：20px 50px;

如果有三个参数时，表示上，左右，下例如：padding：20px 50px 100px;

总结：如果没有值，就去它的对面找值。

⑷、注意：

①、在使用外边距的时候要注意浏览器的兼容性问题。

②、除了值为0的情况，所有的非零的值后面都要加单位px

③、由于各个浏览器存在着内外边距的默认值，而且不相同。我们需要将所有的浏览器的默认内外编剧都从零开始计算。这个方法可以解决问题：*{margin:0;padding:0;}但是效率最低。所以我们是用到了哪个元素就把哪个元素归零。

3、CSS 小技巧

⑴、让盒子水平居中。将对象的左右边界，设置为auto。

⑵、让盒子中的内容垂直居中，设置行高等于盒子的高度。但是注意只能是单行，不可以换行

⑶、我们在调试的适合可以适当加背景颜色，调试完去掉

4、CSS中元素的分类

不同的元素在文档类型定义DTD（DucumentType Definition）内有默认的分类，可以通过CSS修改分类的来义。

⑴、块状元素:{display：block}单独显示一行，可以设置宽高，可以用display属性转化为内联元素。如：p div body h1-h6 ul li

⑵、内联元素：{display：inline}不单独显示一行，不影响换行，不可以设置宽高，可以用display属性转为块状元素，如a em span等。

如何使内敛元素宽高起作用？

隐藏元素:{display：none}当某元素被设置为display：none的时候，浏览器会完全忽略掉这个元素，此元素将不会被显示，虽然存在于HTML文档内。

将a 由内联元素转化为块状元素--display：block;

将div由块状元素转化为内联元素--display：inline；

4、CSS控制背景

⑴、background：color image repeat position

⑵、background-color:blue;

⑶、background-image:url(pic.jpg)

⑷、background-position：top、center、bottom。[left center right]

background-position : length || length （x,y）

length: 百分数 | 由浮点数字和单位标识符组成的长度值

background-position : position || position(水平，垂直)

⑸、background-attachment : scroll | fixed

scroll:默认值。背景图像是随对象内容滚动

fixed：背景图像固定

背景图片的依附方式：固定的含义是，将图片固定在屏幕（可视区域）的某个位置。不是固定在元素的某个位置。具有兼容性问题（IE6）：IE6只有html和body两个元素支持这个属性值。

5、翻转效果CSS sprites(CSS精灵)

（1）其实思路就是，准备两张大小相同，内容不同的图片，正常情况下显示一张，在鼠标移上去的时候显示另一张。

（2）把两张一样大小的图片拼接起来，用background-positon来控制

background-position：0 -npx; n为图片height的一半

CSS精灵技术：主要是为了减少http请求。

3.2.6 CSS布局的方式

1、默认文档流方式，就是按照文档流的顺序。按html的结构顺序

2、浮动布局方式，用float属性来布局

⑴、浮动

浮动是将块元素的独占一行属性取消，允许别人与他一行，浮动其实是这个块从原来的文档流模式中分离出来，它后面的对象就视为它不存在。

浮动，先浮后动，浮动的对象会先浮起来，离开原来的位置。后动，就是它后面的对象会向它原来的位置上动起来。他可以向右或向左浮动，向右可以浮到该元素的父元素的边界。向左浮动也会浮到该元素的父元素的边界，他后面的块元素会接在他后面

如何注意兼容性问题？我们在制作时，你多使用不同的浏览器查看你的结果，这样你就可以知道各种浏览器的差别。

总结：IE6父元素中的子元素的高度超过了父元素的高度，IE6默认会把父元素的高度自动增加

如果想让多个块显示在同一行中，可以将这些块都设置为浮动，且浮动方向相同。

⑵、清除浮动：就是去掉前面对象浮动对后面对象的影响

当元素有浮动属性时，会对父元素或后面的元素产生影响，会出现一个布局错乱现象。

用clear:left 不允许左边有浮动对象

clear:right 不允许右边有浮动对象

clear:none 都可以

clear:both 都不可以

原来在一行中的两个块会因为浏览器的大小改变而改变原来的位置，换行？解决办法：在两个块的外面加一个父块，用于控制整体的宽度

清除浮动的方法：当父元素没有指定高度时候，并且它的子元素有浮动，这时这个父元素的高度不会自动增加

①、额外标签法（最简单）

在容器的末尾增加一个clear：both 的元素，强迫容器适应它的高度以装下所有的float元素

举例：

<style>

...

.class{clear:both}

...

</style>

<divid="left">left box</div>

<div id="right">rightbox</div>

<divclass="clear"></div>/*增加一个空div（空盒子）*/

</div>

缺点：会增加代码

②、父元素使用overflow方法

通过设置父元素 overflow：hidden，缺点：如果子元素使用了定位布局，就很难实现。

相关知识：CSS中溢出的使用 overflow

语法：

overflow : visible | auto | hidden | scroll

取值：

visible :　默认值。不剪切内容也不添加滚动条。假如显式声明此默认值，对象将以包含对象的 window 或 frame 的尺寸裁切。并且 clip 属性设置将失效

auto :　在必需时对象内容才会被裁切或显示滚动条

hidden :　不显示超过对象尺寸的内容

scroll :　总是显示滚动条

③、利用伪对象after方法（网上最流行的方法）

before和after伪对象的例子：

p:before{content:"我是在前面加的东西"}

p:after{content:"我是在后面加的东西"}

</style>

<body>

<p>[我是原p标签的内容]</p>

</body>

*******网上最流行的清楚浮动代码：*******

...

.clearFix:after{

clear:both;

display:block;

visibility:hidden;

height:0;

line-height:0;

content:"";

}

...

</style>

<body>

...

...

</div>

...

</body>

.clearFix{zoom:1;}/*解决IE6、7不兼容问题*/

3、定位布局方式：就是通过元素的position属性控制元素的位置

⑴、语法：position : static | absolute | fixed | relative

⑵、取值：

①、static:默认值，页面中的每一个对象的默认值，对象遵循HTML定位规则

②、absolute:将对象从文档流中拖出，使用 left ， right ， top ， bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，则依据 body 对象。而其层叠通过 z-index 属性定义

③、fixed:未支持。对象定位遵从绝对(absolute)方式。但是要遵守一些规范

④、relative:对象不可层叠，但将依据 left ， right ， top ， bottom 等属性在正常文档流中偏移位置

⑶、绝对定位时，必须要有两个条件：

①、必须给父元素加定位属性，一般建议使用 position：relative；

②、给子元素加绝对定位position：absolute；同时要加方向属性 top leftright bottom

⑷、相对定位与绝对定位

①、绝对定位是以父元素为基准点，进行定位---会脱离文档流

②、相对定位是根据其自身为基准点，进行定位---离开原位置，但还占着原来的空间。