最近需要为自己的公众号开发一个小程序,所以要温习一下css样式知识,在此做个笔记也供以后便捷温习学习;

css学习笔记

样式

  • 行内样式:

    This paragraph simply takes on the browser’s default paragraph style.

    By adding inline CSS styling to this paragraph, you override the default styles.

  • 嵌入式样式:
  • 链接样式:
    @import url(css/styles2.css)

选择符:

  • 上下文选择符
  • 特殊的上下文选择符:子选择符、紧邻同胞选择符+、一般同胞选择符~、通用选择符*、
  • ID选择符:href=”#id”定位到顶部或id那个地方
  • 类选择符:多类
  • 属性选择符:img[title] {border:2px solid blue;}
  • 属性值选择符:img[title=”red flower”] {border:4px solid green;}

伪类

UI(User Interface,用户界面)伪类会在HTML元素处于某个状态时(比如鼠标指针位于链接上),为该元素应用CSS样式。
  • 链接伪类
    • Link。此时,链接就在那儿等着用户点击。
    • Visited。用户此前点击过这个链接。
    • Hover。鼠标指针正悬停在链接上。
    • Active。链接正在被点击(鼠标在元素上按下,还没有释放)。
      p:hover {background-color:gray;}
  • :focus伪类:e:focus{}e代表任何元素
    input:focus {border:1px solid blue;}
  • :target伪类
    More Information

    This is the information you are looking for.


    ”#more_info:target {background:#eee;}”
结构化伪类会在标记中存在某种结构上的关系时(如某个元素是一组元素中的第一个或最后一个),为相应元素应用CSS样式。
  • :first-child和:last-child

    1
    2
    3
    4
    5
    6
    ol.results li:first-child {color:blue;}||ol.results li:last-child {color:red;}
    <ol class="results">
    <li>My Fast Pony</li>
    <li>Steady Trotter</li>
    <li>Slow Ol' Nag</li>
    </ol>
  • :nth-child
    e:nth-child(n)/e:nth-child(odd)/e:nth-child(even)

伪元素

  • ::first-letter伪元素:p::first-letter {font-size:300%;}(段落首字符放大的效果,也可以用一个实现)
  • ::first-line伪元素:p::first-line {font-variant:small-caps;}
    p::first-line {font-variant:small-caps;} (第一行以小型大写字母显示)
  • ::before和::after伪元素

    1
    2
    3
    4
    <p class="age">25</p>
    p.age::before {content:"Age: ";}
    p.age::after {content:" years.";}
    Age: 25 years.

    这种用法可以用在后台查询数据给前台时,进行一些渲染

继承-层叠-特指

在一个较大的样式表中,可能会有很多条规则都选择同一个元素的同一个属性。比如,一个带有类属性的段落,可能会被一条以标签名作选择符的规则选中并指定一种字体,而另一条以该段落的类名作选择符的规则却会给它指定另一种字体。我们知道,字体属性在任意时刻都只能应用一种设定,那此时该应用哪种字体呢?为解决类似的冲突,确定哪条规则“胜出”并最终被应用,CSS提供了三种机制:继承、层叠和特指。接下来的三节,就分别讨论这三种机制。

继承

body {font-family:helvetica, arial, sans-serif;}
body是所有所有元素的祖宗,所有元素都会继承它的样式,对于个别想使用自己的样式,只需自身指定即可,就如同OOP编程语言里面的类继承类似,如果子类想定义自己从父类的方法,也可重写实现自己的特性。
有些属性可以继承:颜色、字体、字号等
有些属性不能继承:边框、外边距、内边距

层叠
样式来源

以下就是浏览器层叠各个来源样式的顺序:

  • 浏览器默认样式表
  • 用户样式表
  • 作者链接样式表(按照它们链接到页面的先后顺序)
  • 作者嵌入样式
  • 作者行内样式
    以上样式会以冒泡交换的法则进行继承式替换。
    层叠规则
  • 层叠规则一:找到应用给每个元素和属性的所有声明。浏览器在加载每个页面时,都会据此查到每一条CSS规则,标识出所有受到影响的HTML元素
  • 层叠规则二:按照顺序和权重排序。浏览器依次检查5个来源,并设定匹配的属性。如果匹配的属性在下一个来源也有定义,则更新该属性的值,如此循环,直到检查完页面中所有标签受影响属性的全部5个来源为止。最终某个属性被设定成什么值,就用什么值来显示。声明也可以有权重。可以像下面这样为单独的声明增加权重:p {color:green !important; font-size:12pt;}空格!important分号(;)用于加重声明的权重。这条规则加重了将文本设置为绿色的权重。于是,就算层叠的下一来源给段落设定了其他颜色,最终的颜色值仍然还是绿色。
  • 层叠规则三:按特指度排序,举例来说就是比如类选择符选中的规则比普通标签选择要高。
    这里涉及到特指度的计算:I - C - E
    • 选择符中有一个ID,就在I的位置上加1;
    • 选择符中有一个类,就在C的位置上加1;
    • 选择符中有一个元素(标签)名,就在E的位置上加1;
    • 得到一个三位数。
  • 层叠规则四:顺序决定权重。如果两条规则都影响某元素的同一个属性,而且它们的特指度也相同,则位置最靠下(或后声明)的规则胜出
规则声明

css属性值主要分为三类

  • 文本值:font-weight:bold
  • 数字值(又分为相对值和绝对值):font-size:12px

  • 颜色值:color:#336699

    • 十六进制颜色(#RRGGBB或#RGB):#rrggbb-十六进制以16为基数,使用数字0-9和字母a-f,共16个值。其中,a-f代表10到15。由于每种颜色用两位十六进制值表示,因此该颜色就有256(16×16)种可能的值,结果就是16 777 216(256×256×256)种组合,也就是可以表示那么多种颜色。纯红色是#ff0000,纯绿色是#00ff00,而纯蓝色是#0000ff。大多数十六进制颜色值不仔细分析可不容易猜,比如#7ca9be是深蓝绿色,我怎么知道的? 首先我们来看每一对rgb值中的第一个值,也就是7、a、b。蓝色和绿色值相差无几,而红色值也没有那么深。有了这些信息,就可以大致猜出这个颜色了,对,是蓝绿色
    • RGB颜色值(R, G , B)
    • RGB百分比值(R%, G%, B%)
    • HSL (色相, 饱和度%, 亮度%)
    • Alpha通道:RGBA,HSLA
      色彩网站

定位元素

页面版式主要由三个属性控制:position属性、display属性和float属性。其中,position属性控制页面上元素间的位置关系,display属性控制元素是堆叠、并排,还是根本不在页面上出现,float属性提供控制的方式,以便把元素组成成多栏布局。

理解盒模型

  • 边框(border)。可以设置边框的宽窄、样式和颜色。
  • 内边距(padding)。可以设置盒子内容区与边框的间距。
  • 外边距(margin)。可以设置盒子与相邻元素的间距。

简写样式

1
2
3
4
5
6
7
8
9
10
{margin-top:5px; margin-right:10px; margin-bottom:12px; margin-left:8px;}
{margin:5px 10px 12px 8px;}
{margin:12px 10px 6px;}/*由于没有写最后一个值(左边的值),所以左边就会使用右边的值,即10px。*/
{border:2px dashed red;}/*全部3个属性,全部4条边 */
{border-style:dashed;}/*1个属性,全部4条边 */
{border-left-style:dashed;}/*1个属性,1条边*/
{border:4px solid red;} /* 先给4条边设置相同的样式 */
{border-left-width:1px;} /* 修改左边框宽度 */
{border-right:none;} /* 移除右边框 */
/*类似地,其他属性也都有这三级粒度,例如padding和border-radius等。*/

盒子边框

边框(border)有3个相关属性。

  • 宽度(border-width)。可以使用thin、medium和thick等文本值,也可以使用除百分比和负值之外的任何绝对值。
  • 样式(border-style)。有none、hidden、dotted、dashed、solid、double、groove、ridge、inset和outset等文本值。
  • 颜色(border-color)。可以使用任意颜色值,包括RGB、HSL、十六进制颜色值和颜色关键字。
    一般在开发中,我们会采用中和内外边距的写法,给需要边距的再单独编写样式:“* {margin:0; padding:0;}”
    下面的这个样式表不仅重置了外边距和内边距,还对很多元素在跨浏览器显示时的外观进行了标准化。至于为什么,可以参考博客文章12
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    /* http://meyerweb.com/eric/tools/css/reset/
    v2.0 | 20110126
    License: none (public domain)
    */
    html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
    article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    }
    blockquote, q {
    quotes: none;
    }
    blockquote:before, blockquote:after,
    q:before, q:after {
    content: '';
    content: none;
    }
    table {
    border-collapse: collapse;
    border-spacing: 0;
    }

叠加外边距

请看例子

1
2
3
4
为简明起见,省略了字体声明
p {height:50px; border:1px solid #000; backgroundcolor:#fff; margin-top:50px; margin-bottom:30px;}
由于第一段的下外边距与第二段的上外边距相邻,你自然会认为它们之间的外边距是80像素(50+30),但是你错啦!它们实际的间距是50像素。
也就是说较宽的外边距决定两个元素最终离多远。

外边距的单位

根据经验,为文本元素设置外边距时通常需要混合使用不同的单位。比如说,一个段落的左、右外边距可以使用像素,以便该段文本始终与包含元素边界保持固定间距,不受字号变大或变小的影响。而对于上、下外边距,以em为单位则可以让段间距随字号变化而相应增大或缩小

1
2
/*这里使用了简写属性把上、下外边距设置为.75em,把左、右外边距设置为30像素*/
p {font-size:1em; margin:.75em 30px;}

盒子模型详解

没有宽度的盒子

1
2
body {font-family:helvetica, arial, sans-serif; font-size:1em; margin:0px; background-color:#caebff;}
p {margin:0 30px; background-color:#fff; padding:0 20px; border:solid red; border-width:0 6px 0 6px;}

外边距在元素盒子与窗口之间创造了空白,此时内容宽度变成了288像素(400 – ( (20 + 6 + 30)× 2) )。而元素声明的总宽度并没有变,仍然是400像素。
盒模型结论一:没有(就是没有设置width的)宽度的元素始终会扩展到填满其父元素的宽度为止。添加水平边框、内边距和外边距,会导致内容宽度减少,减少量等于水平边框、内边距和外边距的和。

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

浮动和清除

浮动和清除是用来组织页面布局的又一柄利剑,这柄剑的剑刃就是float和clear属性。浮动,你看这俩字儿多形象,意思就是把元素从常规文档流中拿出来。拿出来干什么?一是可以实现传统出版物上那种文字绕排图片的效果,二是可以让原来上下堆叠的块级元素,变成左右并列,从而实现布局中的分栏。浮动元素脱离了常规文档流之后,原来紧跟其后的元素就会在空间允许的情况下,向上提升到与浮动元素平起平坐。如果浮动元素后面有两个段落,而你只想让第一段与浮动元素并列(就算旁边还能放下第二段,也不想让它上来),怎么办?用clear属性来“清除”第二段,然后它就乖乖地呆在浮动元素下面了。

浮动

CSS设计float属性的主要目的,是为了实现文本绕排图片的效果。然而,这个属性居然也成了创建多栏布局最简单的方式。
文本绕排图片

…the paragraph text…


/为简明起见,省略了字体声明/
p {margin:0; border:1px solid red;}
/外边距防止图片紧挨文本/
img {float:left; margin:0 4px 4px 0;
动图片会从文档流中被移除,如果在标记中有文本元素跟在它后面,则其中的文本会绕开图片.浮动非图片元素时,必须给它设定宽度,否则后果难以预料。图片无所谓,因为它本身有默认的宽度。

浮动还用另一种用途是实现分栏

围住浮动元素的三种方法
  • 为父元素添加overflow:hidden
  • 同时浮动父元素,同时给父元素下面的文档流一个{clear:left}
  • 添加非浮动的清除元素
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <section>
    <img src="images/rubber_duck.jpg">
    <p>It's fun to float.</p>
    <div class="clear_me"></div>
    </section>
    <footer> Here is the footer element…</footer>
    <!-- section {border:1px solid blue;}
    img {float:left;}
    .clear_me {clear:left;}
    footer {border:1px solid red;} -->
    <section class="clearfix">
    <img src="images/rubber_duck.jpg">
    <p>It's fun to float.</p>
    </section>
    <footer> Here is the footer element…</footer>
    <!-- .clearfix:after {
    content:".";
    display:block;
    height:0;
    visibility:hidden;
    clear:both;
    } -->
    <!-- 这个clearfix规则最早是由程序员Tony Aslett发明的,它只添加了一个清除的包含句点作为非浮动元素(必须得有内容,而句点是最小的内容)1。规则中的其他声明是为了确保这个伪元素没有高度,而且在页面上不可见。
    使用clear:both意味着section中新增的子元素会清除左、右浮动元素(位于左、右浮动元素下方)。这里当然可以只用left,但both也适用于将来图片float:right的情况。-->

定位

CSS布局的核心是position属性,对元素盒子应用这个属性,可以相对于它在常规文档流中的位置重新定位。position属性有4个值:static、relative、absolute、fixed,默认值为static。

  • 静态定位:static块级元素会在默认文档流中上下堆叠
  • 相对定位reletive:相对的是它原来在文档流中的位置,可以使用top、right、bottom和left属性来改变它的位置了。但多数情况下,只用top和left就可以实现我们想要的效果。{position:relative; top:25px; left:30px;}
  • 绝对定位absolute:绝对定位会把元素彻底从文档流中拿出来,有的时候是相对body进行定位,这就涉及到定位上下文的概念了。绝对定位默认的上下文是body元素。
  • 固定定位fixed:从完全移出文档流的角度说,固定定位与绝对定位类似,{position:fixed; top:30px; left:20px;},但不同之处在于,固定定位元素的定位上下文是视口(浏览器窗口或手持设备的屏幕),因此它不会随页面滚动而移动。固定定位并不常用,最常见的情况是用它创建不随页面滚动而移动的导航元素。
  • 定位上下文:把元素的position属性设定为relative、absolute或fixed后,继而可以使用top、right、bottom和left属性,相对于另一个元素移动该元素的位置。这里的“另一个元素”,就是该元素的定位上下文。
    在讲绝对定位的时候,我们知道绝对定位元素默认的定位上下文是body。这是因为body是标记中所有元素唯一的祖先元素。而实际上,绝对定位元素的任何祖先元素都可以成为它的定位上下文,只要你把相应祖先元素的position设定为relative即可。

显示属性

所有元素都有postion和display,display的默认值是block和inline。块级元素和行内元素可以相互转换
/默认为block/p {display:inline;}/默认为inline/a {display:block;}
display属性设置为none,会把元素的display设定为none,该元素及所有包含在其中的元素,都不会在页面中显示。它们原先占据的所有空间也都会被“回收”。与此相对的是visibility属性,这个属性最常用的两个相对的值是visible(默认值)和hidden。把元素的visibility设定为hidden,元素会隐藏,但它占据的页面空间仍然“虚位以待”。

背景色

每个元素盒子都可以想象成由两个图层组成。元素的前景层包含内容(如文本或图片)和边框,元素的背景层可以用实色填充(使用background-color属性),也可以包含任意多个背景图片(使用background-image属性),背景图片叠加在背景颜色之上。
背景色

背景颜色

元素的background-color是蓝绿色,段落的background-color是白色,前景色color是灰色,前景色既影响文本,也影响边框

背景图片

background-image:url(images/blue_circle.png);比元素小的背景图片会在水平和垂直方向上重复出现,直至填满整个背景空间
要改变默认的水平和垂直重复效果,可以修改background-repeat属性;要改变背景图片的起点,可以修改background-position属性。
默认值就是repeat另外3个值分别是只在水平方向重复的repeat-x、只在垂直方向上重复的repeat-y和在任何方向上都不重复(或者说只让背景图片显示一次)的no-repeat

背景位置

用于控制背景位置的background-position属性,是所有背景属性中最复杂的。background-position属性有5个关键字值,分别是top、left、bottom、right和center,这些关键字中的任意两个组合起来都可以作为该属性的值。比如,top right表示把图片放在元素的右上角位置,center center把图片放在元素的中心位置。设定背景位置时可以使用三种值:关键字、百分比、绝对或相对单位的数值

背景尺寸

background-size:

  • 50%:缩放图片,使其填充背景区的一半。
  • 100px 50px:把图片调整到100像素宽,50像素高。
  • cover:拉大图片,使其完全填满背景区;保持宽高比。
  • contain:缩放图片,使其恰好适合背景区;保持宽高比。
    background-size
    背景粘附
    “background-attachment属性控制滚动元素内的背景图片是否随元素滚动而移动。这个属性的默认值是scroll,即背景图片随元素移动。如果把它的值改为fixed,那么背景图片不会随元素滚动而移动。
    background-attachment:fixed最常用于给body元素中心位置添加淡色水印,让水印不随页面滚动而移动。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    p{ background-image:url(images/watermark.png);
    background-position:center;
    background-color:#fff;
    background-repeat:no-repeat;
    background-size:contain;
    background-attachment:fixed;
    }
    /*简写*/
    body {background:url(images/watermark.png) center #fff no-repeat contain fixed;}
多背景图片
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
p {
height:150px;
width:348px;
border:2px solid #aaa;
margin:20px auto;
font:24px/150px helvetica, arial, sansserif;
text-align:center;
background:
url(images/turq_spiral.png) 30px -10px no-repeat,
url(images/pink_spiral.png) 145px 0px no-repeat,
url(images/gray_spiral.png) 140px -30px no-repeat, #ffbd75;
}
/*多张图片可以在背景中叠加起来,CSS规则中先列出的图片在上层*/

背景渐变

渐变分两种,一种线性渐变,一种放射性渐变。线性渐变从元素的一端延伸到另一端,放射性渐变则从元素内一点向四周发散。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/*为元素盒子添加样式*/
div {
height:150px;
width:200px;
border:1px solid #ccc;
float:left;
margin:16px;
}
/*例1:默认为从上到下*/
.gradient1 {
background:linear-gradient(#e86a43, #fff);
}
/*例2:从左到右*/
.gradient2 {
background:linear-gradient(left, #64d1dd, #fff);
}
/*例3:左上到右下*/
.gradient3 {
background:linear-gradient(-45deg, #e86a43, #fff);
}

渐变点
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
/*例1:50%处有一个渐变点*/
.gradient1 {
background:linear-gradient(#64d1dd, #fff 50%, #64d1dd);
}
/*例2:20%和80%处有两个渐变点*/
.gradient2 {
background:linear-gradient(#e86a43 20%, #fff 50%, #e86a43 80%);
}
/*例3:25%、50%、75%处有三个渐变点*/
.gradient3 {
background:linear-gradient(#64d1dd, #fff 25%, #64d1dd 50%, #fff 75%, #64d1dd);
}
/*例4:为同一个渐变点设定两种颜色可以得到突变效果*/
.gradient4 {
background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%, #fff 75%, #e86a43);
}

放射性渐变
1
2
3
4
5
6
7
8
9
.gradient1 {
background: -webkit-radial-gradient(#fff, #64d1dd, #70aa25);
}
.gradient2 {
background: -webkit-radial-gradient(circle, #fff, #64d1dd, #e86a43);
}
.gradient3 {
background: -webkit-radial-gradient(50px 30px, circle, #fff, #64d1dd, #4947ba);
}

厂商前缀

为鼓励浏览器厂商尽早采用W3C的CSS3推荐标准,于是就产生了VSP(Vendor Specific Prefixes,厂商前缀)的概念。有了这些CSS属性的前缀,厂商就可以尝试实现W3C涵盖新CSS属性的工作草案。在迅速实现新属性的同时,还可以声明它们是过渡的、部分实现的,或者实验性的。总之,后果由使用者自负。
就拿W3C推荐的transform属性为例,标准语法是这样的:
transform: skewX(-45deg);

1
2
3
4
5
-moz-transform:skewX(-45deg); /* Firefox */
-webkit-transform:skewX(-45deg); /* Chrome及Safari */
-ms-transform:skewX(-45deg); /* 微软Internet Explorer */
-o-transform:skewX(-45deg); /* Opera */
transform:skewX(-45deg); /* 最后是W3C标准属性 */

Safari和Chrome都使用相同的-webkit-前缀,是因为它们都使用Webkit渲染引擎。”
以下CSS3属性必须加VPS:
border-image translate
linear-gradient transition
radial-gradient background
transform background-image

transform-origin

字体和文本

页面布局

为了达到三栏布局,可以使用float:left,但还有时候随着给一栏增加内外边距等,会使得第三栏放不下,浮到下面,这里面有,这种情况下有三种手段解决:

  • 从设定的元素宽度中减去添加的水平外边距、边框和内边距的宽度和。
  • 在容器内部的元素上添加内边距或外边距。
  • 使用CSS3的box-sizing属性切换盒子缩放方式,比如section {box-sizing:border-box;}。 应用box-sizing属性后,给section添加边框和内边距都不会增大盒子,相反会导致内容变窄。
  • 子-星选择符
    预防过大的元素
    设计一个将来可能由他人维护的动态网站时,需要考虑得更长远一些。比如,应该预见到可能出现一些过大的元素。
  • img {max-width:100%;}
  • overflow:hidden
  • word-wrap:break-word
    三栏-中栏流动布局
    实现中栏流动布局有两种方法。一种是在中栏改变大小时使用负外边距定位右栏,另一种是使用CSS3让栏容器具有类似表格单元的行为。负外边距适合比较老的浏览器,而CSS的table属性则要简单得多
  • 用负外边距实现:实现三栏布局且让中栏内容区流动(不固定)的核心问题,就是处理右栏的定位,并在中栏内容区大小改变时控制右栏与布局的关系。解决方案是控制两个外包装(通过ID值为wrapper)容器的外边距。其中一个外包装包围所有三栏,另一个外包装只包围左栏和中栏。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    <div id="main_wrapper">
    <header>
    <!-- 页眉-->
    </header>
    <div id="threecolwrap">/*三栏外包装(包围全部三栏)*/
    <div id="twocolwrap">/*两栏外包装(包围左栏和中栏)*/
    /*左栏*/
    <nav>
    <!-- 导航 -->
    </nav>
    /*中栏*/
    <article>
    <!-- 区块 -->
    </article>
    </div>/*结束两栏外包装(twocolwrap)*/
    /*右栏*/
    <aside>
    <!-- 侧栏 -->
    </aside>
    </div>/*结束三栏外包装(threecolwrap)*/
    <footer>
    <!-- 页脚 -->
    </footer>
    </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
* {margin:0; padding:0;}
body {font:1em helvetica, arial, sans-serif;}
div#main_wrapper{
min-width:600px; max-width:1100px;
/*超过最大宽度时,居中布局*/
margin:0 auto;
/*背景图片默认从左上角开始拼接*/
background:url(images/bg_tile_150pxw.png) repeat-y #eee;
}
header {
padding:5px 10px;
background:#3f7ccf;
}
div#threecolwrap {
/*浮动强制它包围浮动的栏*/
float:left;
width:100%;
/*背景图片右对齐*/
background:url(images/bg_tile_210pxw.png) top right repeat-y;
}
div#twocolwrap {
/*浮动强制它包围浮动的栏*/
float:left;
width:100%;
/*把右栏拉到区块外边距腾出的位置上*/
margin-right:-210px;
}
nav {
float:left;
width:150px;
background:#f00;
padding:20px 0;
}
/*让子元素与栏边界保持一定距离*/
nav > * {margin:0 10px;}
article {
width:auto;
margin-left:150px;
/*在流动居中的栏右侧腾出空间*/
margin-right:210px;
background:#eee;
padding:20px 0;
}
*让子元素与栏边界保持一定距离*/
article > * {margin:0 20px;}
aside {
float:left;
width:210px;
background:#ffed53;
padding:20px 0;
}
*让子元素与栏边界保持一定距离*/
aside > * {margin:0 10px;}
footer {
clear:both;
width:100%;
text-align:center;
background:#000;
}
  • 用CSS3单元格实现

    CSS可以把一个HTML元素的display属性设定为table、table-row和table-cell。通过这种方法可以模拟相应HTML元素的行为。而通过CSS把布局中的栏设定为table-cell有三个好处。

  • 单元格(table-cell)不需要浮动就可以并排显示,而且直接为它们应用内边距也不会破坏布局。
  • 默认情况下,一行中的所有单元格高度相同,因而也不需要人造的等高栏效果了。
  • 任何没有明确设定宽度的栏都是流动的。
    1
    2
    3
    4
    5
    6
    nav {display:table-cell; width:150px; padding:10px;
    background:#dcd9c0;}
    article {display:table-cell; padding:10px 20px;
    background:#ffed53;}
    aside {display:table-cell; width:210px; padding:10px;
    background:#3f7ccf;}
多行多栏布局

类是用来标记具有相同特征的元素的。ID最好是用来标记每个主要区域的顶级元素,这样可以充当路标。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<div id="wrapper">
<header>
<h1>Full-width content</h1>
</header>
<nav>
<p>Navigation menus go here</p>
</nav>
<section id="branding">
<img src="images/grand_canyon.jpg" alt="Grand Canyon" />
</section><!-- branding 结束 -->
<section id="feature_area">
<article>
<div class="inner">
<p>Lorem Ipsum text</p>
</div>
</article>
<!-- 省略另外两个 article 元素 -->
</section><!-- feature_area 结束-->
<section id="promo_area">
<article>
<div class="inner">
<p>Lorem Ipsum text</p>
</div>
</article>
<!-- 省略另外三个 article 元素 -->
</section><!-- promo_area 结束-->
<footer>
<p>A CSS template from <a href="http://www.stylinwithcss.com"><em>Stylin’ with CSS, Third Edition</em></a> by Charles Wyke-Smith</p>
</footer>
</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/*每个article作为一个浮动栏*/
section#feature_area article {
float:left;
“width:320px;
/*对于作为栏的容器,只能添加垂直内边距*/
padding:10px 0;
background:#fff;
border-top:4px solid #f7be84;
}
/*为所有内容盒子添加公共样式*/
section#feature_area article .inner {
margin:10px 20px;
padding:5px;
background:#fff;
border:5px solid;
}
/*以下三条分别为三个内容盒子设定样式*/
section#feature_area article:nth-child(1) .inner {
border-color:#d7dd6f;
}
section#feature_area article:nth-child(2) .inner {
border-color:#f6dec5;
}
section#feature_area article:nth-child(3) .inner {
border-color:#d1d8e4;
}

界面组件

纵向导航菜单
1
2
3
4
5
6
7
8
<nav class="list1">
<ul>
<li><a href="#">Alternative</a></li>
<li><a href="#">Country</a></li>
<li><a href="#">Jazz</a></li>
<li><a href="#">Rock</a></li>
</ul>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/*去掉默认的内边距和外边距*/
* {margin:0; padding:0;}
/*设定本例中菜单的大小和位置*/
nav {margin:50px; width:150px;}
/*给菜单加上边框*/
.list1 ul {border:1px solid #f00; border-radius:3px;
padding:5px 10px 3px;}
/*去掉项目符号并为链接添加间距*/
.list1 li {list-style-type:none; padding:3px 10px;}
/*“非首位子元素”选择符*/
.list1 li + li {border-top:1px solid #f00;}
/*为链接添加样式*/
.list1 a {text-decoration:none; font:20px Exo, helvetica,
arial, sans-serif; font-weight:400; color:#000;
background:#ffed53;}
/*悬停高亮*/
.list1 a:hover {color:#069;}

使用“非首位子元素”选择符:li + li选择符的意思是“任何跟在li之后的li”。
也可以这样写:
/给所有li上方添加一条边框/
li {border-top:1px solid #f00;}
/去掉第一个li上方的边框/
li:first-child {border-top:none;}
改进版

1
2
3
4
5
6
7
8
9
10
* {margin:0; padding:0;}
nav {margin:50px; width:150px;}
.list1 ul {border:1px solid #f00; border-radius:3px;
padding:5px 10px 3px;}
.list1 li {list-style-type:none; padding:3px 10px;}
.list1 li + li a {border-top:1px solid #f00;}
.list1 a {display:block; padding:3px 10px; textdecoration:
none; font:20px Exo, helvetica, arial, sansserif;
font-weight:400; color:#000; background:#ffed53;}
.list1 a:hover {color:#069;}

横向菜单
1
2
3
4
5
6
7
8
9
<nav class="list1">
<ul>
<li><a href="#">Shirts</a></li>
<li><a href="#">Pants</a></li>
<li><a href="#">Dresses</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#">Accessories</a></li>
</ul>
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.list1 ul {
/*强制ul包围浮动的li元素*/
overflow:hidden;
}
.list1 li {
/*让li元素水平排列*/
float:left;
/*去掉项目符号*/
list-style-type:none;
}
.list1 a {
/*让链接填满li元素*/
display:block;
padding:0 16px;
/*去掉链接的下划线*/
text-decoration:none;
color:#999;
}
.list1 li + li a {border-left:1px solid #aaa;}
.list1 a:hover {color:#555;}

浮动让li元素从垂直变成水平,display:block让链接从收缩变成扩张,从而整个li元素都变成了可以点击的。另外,选择符li + li a为除第一个链接之外的每个链接左侧都加了一条竖线,作为视觉分隔线。好啦,可以讲更复杂的样式了。

下拉菜单


三级菜单的实现,是通过ul的三层嵌套来实现的

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<nav class="multi_drop_menu">
<!-- 一级开始 -->
<ul>
<li><a href="#">Power</a></li>
<li><a href="#">Money</a></li>
<li><a href="#">Love</a></li>
<li><a href="#">Fame</a>
<!-- 二级开始 -->
<ul>
<li><a href="#">Sports Star</a></li>
<li><a href="#">Movie Star</a></li>
<li><a href="#">Rock Star</a>
<!-- 三级开始 -->
<ul>
<li><a href="#">Bruce Springsteen</a></li>
<li><a href="#">Bono</a></li>
<li><a href="#">Mick Jagger</a></li>
<li><a href="#">Bob Dylan</a></li>
</ul>
<!-- 三级结束 -->
</li>
<li><a href="#">Web Designer</a></li>
</ul>
<!-- 二级结束 -->
</li>
</ul>
<!-- 一级结束 -->
</nav>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
/*顶级菜单样式*/
/*添加视觉样式*/
.multi_drop_menu {font:1em helvetica, arial, sans-serif;}
.multi_drop_menu a {
/*让链接充满列表项*/
display:block;
/*文本颜色*/
color:#555;
/*背景颜色*/
background-color:#eee;
/*链接的内边距*/
padding:.2em 1em;
/*分隔线宽度*/
border-width:3px;
/*可以有颜色,也可以透明*/
border-color:transparent;
}
.multi_drop_menu a:hover {
/*悬停时文本颜色*/
color:#fff;
/*悬停时背景色*/
background-color:#aaa;
}
.multi_drop_menu a:active {
/*点击时背景变色*/
background:#fff;
/*点击时文本变色*/
color:#ccc;
}
/*添加功能样式*/
.multi_drop_menu * {margin:0; padding:0;}
/*强制ul包围li*/
.multi_drop_menu ul {float:left;}
.multi_drop_menu li {
/*水平排列菜单项*/
float:left;
/*去掉默认的项目符号*/
list-style-type:none;
/*为子菜单提供定位上下文*/
position:relative;
}
.multi_drop_menu li a {
/*让链接填充列表项*/
display:block;
/*给每个链接添加一个右边框*/
border-right-style:solid;
/*背景只出现在内边距区域后面*/
background-clip:padding-box;
/*去掉链接的下划线*/
text-decoration:none;
}
.multi_drop_menu li:last-child a {border-right-style:none;}
/*临时隐藏低级菜单*/
.multi_drop_menu li ul {display:none;}

常用场景技能实现

  • 居中
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    p{
    margin:20px auto;
    }
    /*让文本和图片垂直居中*/
    div {
    height:150px;
    width:250px;
    border:2px solid #aaa;
    margin:20px auto;
    background-image:url(images/turq_spiral_150.png);
    background-repeat:no-repeat;
    background-position:50% 50%;//
    text-align: center;//
    line-height: 250px;//
    }
    li {
    /*去掉列表项目符号*/
    list-style-type:none;
    }