第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
⑷、相对定位与绝对定位
①、绝对定位是以父元素为基准点,进行定位---会脱离文档流
②、相对定位是根据其自身为基准点,进行定位---离开原位置,但还占着原来的空间。