css学习
本文转自：http://my.oschina.net/blogshi/blog/214535
一. HTML标记与文档结构
文本用闭合标签,引用内容用自闭合标签.常见的块级标签:<h1>~<h6>,<p>,<ol>,<li>,<blockquote>等.行内标签则有:<a>,<img>,<em>,<strong>,<abbr>,<cite>,<q>等.
下面这是一个最小的完整HTML模板,一个基本页面必然包含这些标签.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>An HTML Template</title> </head> <body> <!-- 这里是网页内容 --> </body> </html>
搜索引擎会给title标签中的文字内容赋予很高的权重,这些文字也会作为网页标题出现在搜索结果列表中.不要让"欢迎访问"之类的废话占据你的title标签.使用简洁明确的文字以及读者在搜索你的网页内容时会使用的关键词. 所谓“文档流”的效果,也就是 HTML 元素会按照它们各自在标记中出现的先后顺序,依次从页面上方“流向”下方.
几乎所有 HTML 元素的 display 属性值要么为 block,要么为 inline。最明显的一 个例外是 table 元素,它有自己特殊的 display 属性值.
块级元素(比如标题和段落)会相互堆叠在一起沿页面向下排列,每个元素分别占 一行。而行内元素(比如链接和图片)则会相互并列,只有在空间不足以并列的情 况下才会折到下一行显示。
块级元素盒子会扩展到与父元素同宽,而行内元素盒子会"收缩包裹"其内容,并且尽可能包紧.
DOM是从浏览器的视角来观察页面中的元素以及每个元素的属性,由此得出这些元素的一个Tree.
二. CSS工作原理
除了我们我们知道的行内样式,嵌入样式,引用样式之外,还有一种在样式表中链接其他样式表的方法,使用@import指令,@import url(css/style.css)这一命令必须出现在样式表其他命令之前.
选择器是CSS工作的核心:
<section> <h2>An H2 Heading</h2> <p>This is paragraph 1</p> <p>Paragraph 2 has <a href="#">a link</a> in it.</p> <a href="#">Link</a> </section>
section h2 {} 或者 section p {} 这就是后代选择器,通过空格分离,只要后者是前者的后代元素即可.如果想更确切,还有 section > p {} 子选择器以及 h2 + p {} 兄弟选择器(这里选中的是p).
h2 ~ a {} 同级元素选择器,只要有同一个父节点即可,这里选中的是a.
注意 * 号除了通配选择符还有一个很有意思的用法,就是构成非子选择符,section * a {} 任何是section的孙子元素,而非子元素的a标签都会被选中.
"标签名.类名" 这样方式可以更准确的选定元素,类似的用法还有 ".A类名.B类名" 这样的方式选中的是class = "A B"的元素,属性也有"标签名[属性]"或者"标签名[属性='属性值']"这两种方式选择.
ID这个属性也可以用在页内导航链接中,比如通过一个超链接,点击跳转到同一页的另一个位置.
<a href = "#info">info</a>这样写时href开头是#,它表示这个链接的目标在当前页面中,因而不会触发浏览器加载页面.
要避免CSS编写过程中可能级可能出现的"类泛滥".什么意思呢?就是说不要像使用ID一样为每个类都指定一个不同的类名,然后再为类编写规则.这样做很可能会给每个标签都重复写同样的样式,实际上继承和上下文选择符能让不同的标签共享样式,从而提升CSS代码的质量.
伪类的使用也许在CSS的初级阶段不多,但一旦你深入CSS,你会发现伪类无处不在.伪类这个叫法源自它们与类相似,但实际上并没有类会附加到标记中的标签上.伪类分两种,UI伪类和结构化伪类,前者会在HTML元素处于某个状态时(比如鼠标滑过)为该元素应用CSS,后者则是元素存在某种结构化的关系时(比如一组中的第一个元素)为元素加上CSS.
a::link{} a::hover{} a::visited{} a::active{} input::focus{} ul::first-child{} ul::last-child{} ul::nth-child(3)
继承!!!
一说起CSS中还有继承我想好多人是惊讶的,包括自己早些时候也认识不到原来这就是CSS中的继承.如果我们给body加上一些字体样式,我们会发现只要是body的后代元素就会继承这些字体样式,这些可以继承的样式通常是文本或者字体的.
继承涉及到样式的权重,一个HTML有很多个样式来源的时候,应该遵从哪一个样式.
CSS继承的规则虽然很繁琐,但基本上只要记住三条规则就够了,它们适用所有情况.
规则一: 包含ID的选择符胜过包含类的选择符,包含累的选择符胜过包含标签名的选择符.
规则二: 如果几个不同来源都为同一个标签的同一个属性定义了样式,行内样式胜过嵌入样式,嵌入样式胜过链接样式.在链接样式表中,具有相同特指度的样式,后声明胜过先声明.
规则二胜过规则一.也就是选择符更明确的(特指度高),无论它写在哪里,都会胜出.
规则三: 设定的样式胜过继承的样式,此时不需要考虑特指度.
三. 定位元素
盒模型的概念是整个CSS定位布局的核心,这些盒子按照可见版式模型(visual formatting model)在页面上布局.可见的页面版式主要由3个属性控制:position控制页面上元素间的位置关系,display控制元素是堆叠、并列还是根本不显示,float提供控制的方式.
盒模型的3大属性就是padding、border、margin,它们的按照top、right、bottom、left的顺时针顺序提供缩写.如果有一个方向没写,就会自动使用对边的值.
这里面外边距(margin)的垂直叠加是需要注意的,因为这和我们一般对盒模型的理解不同.垂直方向上的外边距会叠加,这个规则十分重要.假设有3个P段落,并且都应用了如下的样式:
p {
height:50px;
border:1px solid #000;
backgroundcolor:#fff;
margin-top:50px;
margin-bottom:30px;
}
按照我们所想那么相邻的两个P,因为上面的p有一个margin-bottom:30px,下面的P有一个margin-top:50px,那么看上去在页面上显示它们应该有50+30=80px的间距.但实际上是50px,因为在垂直方向上,像这样上下边距相遇时,它们会相互重叠,直到一个元素的外边距碰到另一个元素的border为止.所以实际上是较宽的外边距决定了两个元素的垂直间距.
-
盒模型原理:
盒模型结论一：没有（就是没有设置 width 的）宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距，会导致内容宽度减少，减少量等于水平边框、内边距和外边距的和。
盒模型结论二：为设定了宽度的盒子添加边框、内边距和外边距，会导致盒子扩展得更宽。实际上，盒子的 width 属性设定的只是盒子内容区的宽度，而非盒子要占据的水平宽度。
总之，你要记住一点：设定了元素的 width 属性后，再给元素添加边框、内边距和外边距，元素的行为与默认的 auto状态下会有截然不同的表现。
-
浮动和清除:
浮动元素脱离了常规文档流之后,原来紧跟其后的元素就会在空间允许的情况下提升到与浮动元素持平的位置. 在你浮动一张图片或者其他元素时，你是在要求浏览器把它往上方推,直到它碰到父元素（也就是 body元素）的内边界。后面的段落（带灰色边框）不再认为浮动元素在文档流中位于它的前面了，因而它会占据父元素左上角的位置。不过，它的内容（文本）会绕开浮动的图片。
浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。这种情况有时候并非我们想要的,三种围住浮动子元素的方法:
<section> <img src="images/rubber_duck2.jpg"> <p>It's fun to float.</p> </section> <footer> Here is the footer element that runs across the bottom of the page.</footer>
img跑了出去,section和footer都跑到img右侧了,这样的效果可不行.
(1) 方法一：为父元素添加 overflow:hidden
方法很简单，缺点是不太直观，即为父元素应用 overflow:hidden，以强制它包围浮动元素。实际上，overflow:hidden 声明的真正用途是防止包含元素被超大内容撑大。应用overflow:hidden之后，包含元素依然保持其设定的宽度，而超大的子内容则会被容器剪切掉。除此之外，overflow:hidden还有另一个作用，即它能可靠地迫使父元素包含其浮动的子元素。
(2) 方法二：同时浮动父元素
浮动 section以后，不管其子元素是否浮动，它都会紧紧地包围（也称收缩包裹）住它的子元素。因此，需要用 width:100%再让 section 与浏览器容器同宽。另外，由于 section现在也浮动了，所以 footer会努力往上挤到它旁边去。为了强制 footer依然呆在 section下方，要给它应用 clear:left。被清除的元素不会被提升到浮动元素的旁边.
(3) 方法三：添加非浮动的清除元素
为父元素的最后添加一个非浮动的子元素，然后清除该子元素。由于包含元素一定会包围非浮动的子元素，而且清除会让这个子元素位于（清除一侧）浮动元素的下方，因此包含元素一定会包含这个子元素——以及前面的浮动元素。
这个方法虽然听着比较绕口,但是这种方式在各个CSS框架都有出现,是一种比较流行的写法.这里也介绍的是比较流行的写法:
首先给section添加一个类clearfix,然后定义这个类:
|
1
2
3
4
5
6
7
|
.clearfix:after {
content
:
"."
;
display
:
block
;
height
:
0
;
visibility
:
hidden
;
clear
:
both
;
}
|
它只添加了一个清除的包含句点作为非浮动元素（必须得有内容，而句点是最小的内容）。规则中的其他声明是为了确保这个伪元素没有高度，而且在页面上不可见。 使用clear:both意味着section中新增的子元素会清除左、右浮动元素（位于左、右浮动元素下方）。这里当然可以只用left，但both也适用于将来图片float:right的情况。
最后这种定义.clearfix:after来清除浮动的方式非常常见,而且可以适应很多种情况相比于overflow:hidden以及父元素的浮动这两种方式要好一些.
-
position定位
position是CSS盒模型定位的核心,它的应用使元素可以在常规文档流中重新定位,static,relative,absolute,fixed.
static静态定位: 块级元素在页面中自上而下堆叠,维持默认的文档流.
relative相对定位: 光设置这个属性还看不出来有什么不一样，因为你只设置了它的定位方式是“相对定位”。到底相对哪里定位呢？相对的是它原来在文档流中的位置（或者默认位置）。接下来，可以使用 top、right、bottom和 left属性来改变它的位置了。但多数情况下，只用 top和 left就可以实现我们想要的效果.
使用相对定位的关键是什么呢？就是要考虑到元素原来的空间。
absolute绝对定位: 绝对定位元素默认的定位上下文是 body元素。通过 top 和 left 设定的偏移值，决定元素相对于 body 元素（标记层次中的祖先容器），而不是相对于它在文档流中的位置偏移多远——这一点与相对定位的元素不同。由于绝对定位元素的定位上下文是 body，所以在页面滚动的时候，为了维护与 body元素的相对位置关系，它也会相应地移动。
fixed固定定位: 从完全移除文档流的角度来说它与绝对定位类似,不过它的定位上下文是浏览器的窗口,因此不会随页面滚动而滚动.
定位上下文: 通过postition设置的元素可以通过left或top等进行元素偏移,相较于偏移的这个元素就是定位上下文.绝对定位时默认的参照物,也就是定位上下文是body,但是其实任何被设置了relative或者absolute的偏移元素的祖先元素都可以是该元素的参照物.
-
display和visibility的区别
display最重要的地方就是将元素在行内和块级之间转换,而且它的display:none会使标记的占有空间被回收,而visibility的hidden还会保留"占位",但是看上去是什么都没有.
-
背景
元素背景可以使颜色或者图片,它是与CSS盒模型紧密联系的.看一下示意图:
关于背景的应用现在非常多,可以说画面上大多数色彩效果是靠背景色去完成的.不一一列举了,就列出一些关键点好了:
-
如果没有设置border的颜色,那么元素的背景色会影响元素的border颜色.
-
比元素小的背景图片会在水平和垂直方向上重复,知道铺满整个元素.
-
background-position是背景设置中最复杂的一个属性,通过它可以实现一张图片整合多个图样,从而只需要下载一次图片即可.
这里补充一点东西,就是有些属性会出现"厂商前缀"这么个东东.
-
为了鼓励浏览器的厂商尽早的使用W3C的CSS3标准,于是就有了厂商前缀的概念,有了这些前缀浏览器厂商就可以实现W3C覆盖新CSS属性的草案.这是为了迅速实现CSS3的一种过渡方式,不过很属性必须这么写,比如transform或者border-image等.
说到transform额外多说两句,这个属性一般都不是很熟悉,它表示将一个元素转为2D或者3D,从而可以对这个元素进行旋转,缩放,倾斜和移动.现在已经在CSS3的效果中很普及,用于一些特效上.
1232
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
