CSS

第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标签封装样式以复用

    <style type=”text/css”>css代码</style>,将其嵌入到HTML文件的头部中<head>标记内

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

    <style type=”text/css”>@importurl(“1.css”);</style>

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

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

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

    <link rel=”stylesheet”href=”1.css” media属性可选,默认设备屏幕/>

技巧:为提高样式的复用性和可扩展性,将多个样式单独定义并封装为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{属性:值}

           <p class=”warning1 warning2”>...</p>

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(水平,垂直)

position:top | center | bottom | left |center | right

⑸、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>

<div id="main">

 <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伪对象的例子:

<style type="text/css">

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

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

</style>

<body>

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

</body>

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

<style type="text/css">

...

.clearFix:after{

clear:both;

display:block;

visibility:hidden;

height:0;

line-height:0;

content:"";

}

...

</style>

<body>

...

<div class="clearFix" id="main">

...

</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

⑷、相对定位与绝对定位

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

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值