css学习归纳总结（三）转

原文地址：css学习归纳总结（三）

为文档添加样式的三种方法

行内样式

行内样式是写在HTML标签的style属性里的，比如：

  <p style="font-size: 12px;font-weight: 200;color: #333333">Hello Everyone!</p>

行内样式会覆盖嵌入样式和链接样式。

嵌入样式

嵌入的css样式是放在HTML文档的head元素中的，这点想必大家都知道，这里就不赘述了。

链接样式

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="style.css" type="text/css"/>

</head>

链接样式的作用范围可以是整个网站。只要使用<link>标签把样式表链接到每个页面，相应的页面就可以使用其中的样式，除了link方法外，还可以使用@import指令

@import  url(css/style.css);

@import指令必须出现在样式表中其他样式之前，否则该链接的文件不会被加载

不要乱用类

不要像使用ID一样，为每个类都指定一个不同的类名，然后再为每个类编写规则。如果你有这种随意使用类的习惯的话，那么，你还不了解继承和上下文选择符的作用。继承和上下文选择符（后代选择器）能让不同的标签共享样式，从而降低你需要编写和维护的css量。

使用继承方式降低你的css代码量：

所有元素可继承：visibility和cursor

内联元素和块元素可继承：letter-spacing、word-spacing、white-space、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform、direction

块状元素可继承：text-indent和text-align

列表元素可继承：list-style、list-style-type、list-style-position、list-style-image

表格元素可继承：border-collapse

不可继承的：display、margin、border、padding、background、height、min-height、max- height、width、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

盒子边框

每一个元素都会在页面上生成一个盒子，因此，HTML页面实际上就上由一堆盒子组成的。默认情况下，每个盒子的边框是不可见的，背景也是透明的。

边框（border）有如下3个相关属性：

 1. 宽度（border-width）：可以使用`thin、medium`和`thick`等文本值，也可以使用除百分比和负值之外的任何绝对值

 2. 样式（border-style）：有none、hidden、dotted、dashed、double、groove、ridge、inset和outset等

 3. 颜色（border-color）：可以使用任意颜色值，包括RGB、HSL、十六进制颜色值和颜色关键字

叠加外边距

垂直方向上的外边距会叠加，假设有3个段落，前后相接，而且都应用以下规则：

<style type="text/css">

        p{

            color: black;

            background: #ccc;

            margin-top: 50px;

            margin-bottom: 30px;

            height: 50px;

            border: 1px solid red;

        }

</style>

第一段的下外边距与第二段的上外边距相邻，你可能认为它们之间的外边距是80px，但实际的间距却是50px。像这样的上下外边距相遇时，它们就会相互重叠，直至一个外边距碰到另一个元素的边框。因此，在这里，第二段较宽的上外边距就会碰到第一段的边框。也就是说，较宽的外边距决定两个元素最终离多远。这个过程就是外边距叠加。

css学习归纳总结（三）转

盒子有多大

设定width属性的盒子

盒模型结论一：

        为设定了宽度的盒子添加边框、内间距和外边距，会导致盒子扩展得更宽。实际上，盒子的width属性设定的只是内容区的宽度，而非盒子要占据的水平宽度

没有设定width属性的盒子

从现在开始，“元素”和“盒子”从现在起代表了同一个意思。如果我们不设置块级元素的width属性，那么这个属性的默认值是auto，结果会让元素的宽度扩展到与父元素等宽。

盒模型结论二：

        没有设定width属性的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少的量 等于 水平边框、内边框和外边距的和

看实例的话大家也比较烦，就拿着这个结论自己去验证下吧。

css学习归纳总结（三）转

布局的基本概念

多栏布局有三种基本的实现方案：固定宽度、流动、弹性。

 - 固定宽度布局的大小不会随着用户调整浏览器窗口大小而变化，一般是900到1350px像素宽。其中960像素最常见，因为这个宽度适合所有现代显示器，而且能被16，12，10，8，6，5，4和3整除，容易计算等宽分栏。

 - 流动布局的大小会随用户调整浏览器窗口大小而变化。这种布局能更好地适应大屏幕，但同时也意味着放弃会页面某些方面的控制，比如随着页面宽度变化，文本行的长度和页面元素之间的位置关系都可能变化。

 - 弹性布局是在浏览器窗口变宽时，不仅布局变宽，而且所有内容元素的大小也会变化，不过这种布局太过复杂，不好实现。

行内(inline)元素的一些属性

并不是所有的属性对行内元素都能够生效

行内元素不会应用width属性，其长度是由内容撑开的

行内元素不会应用height属性，其高度也是由内容撑开的，但是高度可以通过line-height调节

行内元素的padding属性只用padding-left和padding-right生效，padding-top和padding-bottom会改变元素范围，但不会对其它元素造成影响

行内元素的margin属性只有margin-left和margin-right有效，margin-top和margin-bottom无效

行内元素的overflow属性无效

行内元素的vertical-align属性无效（height属性无效）

使用CSS sprites

CSS sprites是指把网页中很多小图片（很多图标文件）做成按规律排列的一张大图上，在显示的时候通过background-image、background-position显示图片特定部分达到和分散的一张张小图片一样的效果。

使用CSS sprites，会将所有的小图片整合到一张图片中，网页加载只需要对一张图片进行请求，CSS再通过坐标的形式定位每一个小图片显示出来。这样做的好处是，大大减少http请求数，提高网页加载速度。

css sprites工具推荐：http://cn.spritegen.website-performance.org/

css学习归纳总结（三）转

隐藏文本

隐藏网页元素的方法有很多，比如设置display:none，或是使用全透明（opacity）。在设置文本的时候，有时并不希望文本丢失，而通常是把文字转移到屏幕外面，浏览器是可以检测到的。
有如下两种隐藏文本的方式：

 1. 使用text-indent隐藏：图片替换文本、搜索引擎优化

 2. 使用position进行定位隐藏：利于屏幕讲述工具的阅读

使用text-indent

在h1上设置logo为背景并设置居中来做SEO：

h1{

            text-indent: -9999px;/*缩进*/

            margin: 0 auto;width: 100px;height: 100px;/*居中*/

            background: url("img/sf.jpg") no-repeat;

}

使用定位

p{

            position: absolute;

            top: -9999px;

            left: -9999px;

 }

rgba和opacity

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

ou和ul的列表缩进

IE使用margin-left来缩进列表，而Safari和Firefox使用padding-left。

ol, ul { padding-left:40px; }

而IE的默认样式是：

ol, ul { margin-left:30px; }

去除li的左边距，比如：

ol, ul { padding-left:0px; }

或者也可以只针对IE进行修复：

ol, ul { _padding-left:0; }

css选择符思维导图

css学习归纳总结（三）转

css工具推荐

不写具体介绍啦截个图给你们吧说再多都比不上一张图呢

EnjoyCSS 能创建活跃，超棒的实例，EnjoyCSS 生成器大大简化了自定义类声明。EnjoyCSS 是众多 CSS 工具中非常有用的，也是开发者和设计师工具箱必备的利器之一。它能加快工作流，简单易用，不需要编码就能整合丰富的图形样式到简单的 UI。
css3生成器

css学习归纳总结（三）转

css3 maker

css学习归纳总结（三）转

hands On css3

css学习归纳总结（三）转