概述
第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
⑷、相对定位与绝对定位
①、绝对定位是以父元素为基准点，进行定位---会脱离文档流
②、相对定位是根据其自身为基准点，进行定位---离开原位置，但还占着原来的空间。
最后
以上就是调皮冬日为你收集整理的CSS的全部内容，希望文章能够帮你解决CSS所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
发表评论 取消回复