• Css基础学习

    Css基础学习—索引

    现在好像比较流行给一系列的文章建立一个索引，既然这样我也就俗气一下。不过好处还是有的，方便大家的学习和查看。

    下面就是最近对Css学习的系列文章：

    Css基础学习（一）—如何使用CSS？

    现在web开发人员如果不知道CSS那就太落伍了，不过知道不等于会使用，更不等于精通。而我刚好属于那个知道CSS是干什么的，仅此而已的一员。

    CSS：Cascading Style Sheet，层叠样式表，可以将网页的大部分甚至全部的表示信息从HTML文件中移出，达到表现信息和核心内容相分离，达到易于维护以及美工和程序员分工更加明确的好处。

    Css基础学习（二）—CSS基础性概念

    我们首先简单的说明一下什么是ID和类。ID是一个标识码，因此在一个HTML页面中，ID只能出现一次；而类相当于一种类别，属于一种类的可以是一个也可以是多个，因此类可以在页面中无限次地使用。

    Css基础学习（三）—构造块

    div，看见这个一定很兴奋吧。最流行的网站布局就是靠它加上css来实现的，讲css没有它怎么行呢。不过今天我们暂时不谈论布局，就对块的常用属性做一个较为详细的介绍，为后面的布局打下坚实的基础，那我们就开始把。

    Css基础学习（四）—文本

    文本是网页内容的核心，文字的美观、可视性、表现性会加强网页内容的可读性。相对于精美的图片和样式，枯燥的文字就没有得到相应的重视程度。人们浏览网页并不是漫无目的的欣赏图片，而是获取信息。我们下面就来说说文字的一些基本样式。

    Css基础学习（五）—颜色、背景与图像

    使用css来控制网页的颜色、背景和图像也算是将网页的内容与表现分开的一种方式，不过图像并不全是，需要根据图像的性质来决定。那我们就来看看怎么样使用css样式来进行对颜色、背景和图像的控制。

    Css基础学习（六）—列表

    浏览任何基于Web标准建立的网站资源，几乎都可以看到一个导航列表、一个外部链接列表、有的还有按钮列表和数组列表。网站设计开始阶段就采用简单的列表可保证设计的灵活性和各种功能，并且可以在某些浏览场景下简化设计。

    Css基础学习（七）—链接

    网页的发展就是从链接开始的，没有链接的网页只是孤立的，基本称不上是网页。通过css，链接可以变成一个非常美观且功能强大的对象。当然话说回来，虽然我们可以对链接进行很多控制，但是不能够为了追求美观和新奇而影响链接的基本功能。废话就不多说了，就开始链接对象css的学习吧。

    Css基础学习（八）—表格

    终于轮到我们的表格出场了，虽然表格在以前过度的使用在了网页的布局当中，但是其价值还是存在的。很显然把表格贬得一文不名是不公平的！表格在表示列表数据方面有着其突出的作用，我们就学习一下使用css怎么使表格发挥它应有的威力。

    Css基础学习（九）—缩写

    css的样式缩写简洁，而且减少了页面传输的流量，应该是每一个页面设计师追求的目标。我们就来看看我们前面讲解的内容中的一些缩写。

    Css基础学习（十）—思考

    说说已经学会的知识如何更好的应用，我们学习了基础、语法，可是还没有在实际的开发中间应用呢。

    ********************************************

    Css基础学习（一）—如何使用CSS？

    现在web开发人员如果不知道CSS那就太落伍了，不过知道不等于会使用，更不等于精通。而我刚好属于那个知道CSS是干什么的，仅此而已的一员。
    CSS：Cascading Style Sheet，层叠样式表，可以将网页的大部分甚至全部的表示信息从HTML文件中移出，达到表现信息和核心内容相分离，达到易于维护以及美工和程序员分工更加明确的好处。
    这么好的东西是怎么应用到网页上面的呢？我们先来看看在网页上应用CSS的几种方式：

    1、内联样式（inline style）：
    通过Style属性应用于文档中的特定标记。内联样式的缺点很大，它将样式散步在了页面的各个角落，我们想像一下：我有一个包含100个HTML页面的网站，需要修改的时候，我将对100个页面分别进行修改，很显然这不是一个好的办法。反而对于初学者，这是使用最多的！

    1. <p style="color:#F00">红色文字</p>

    2、内嵌样式（embedded style）
    内嵌样式将所有的样式定义放在一起，作为元素的一部分，位于文档的头部。这样的方式比上面先进了一步，不过对于上面的问题仍然束手无策。

    1. <style type="text/css">p{color:#F00}</style>

    3、外部样式（external style）
    外部样式仅仅包含一个规则，然后可以影响整个网站的所有网页，这好像正是我们所期待的，看看它是怎么样使用的。按照下面的引用css文件就可以达到上面方式的效果，href指向你需要的css文件的路径。

    1. <!--external.css文件-->
    2. p{color:#F00}
    1. <!--external.html文件-->
    2. <head><title>external文件</title>
    3. <link rel="stylesheet" type="text/css" href="external.css"/></head>

    另外，使用倒入样式也能实现上面的功能，不过这种方式使用不多

    1. <!--external.html文件-->
    2. <head><title>external文件</title>
    3. <style type="text/css">@import url(external.css);</style></head>

    4、打印样式

    1. <link rel="stylesheet" type="text/css" media="screen" href="screen.css"/>
    2. <link rel="stylesheet" type="text/css" media="print" href="print.css"/>

    我们看看上面两个外部样式的区别，就在于media这个属性的值不同，那他们的区别在哪里呢？页面表现时将使用screen.css的样式，而在打印这个页面时将使用print.css这个样式，这样便能够很灵活的设置打印样式而不会影响表现的效果。

    既然了解了怎么应用css到网页上，我们就来看看css最基本的语法把。

    定义样式：所有的css规则都遵循简单的语法规则，由一个选择器（selector）以及一个或多个属性/值（property/value）对组成。例如：

    1. /* =body Default styling for body*/
    2. body{margin:10px；}

    body就是一个选择器，margin就是一个属性，10px是这个属性的值，属性和值之间使用：分隔，最后分号完成一个属性/值的对。所有的属性/值对都使用大括号包含起来。
    /*Default styling for body*/是注释，说明这个样式的作用等信息，/*中间就是注释，允许多行*/；

    建议：为规则加上标志。看上面的注释，我们添加了=body字样，通过=加上选择器作为一个标志，可以很方便的在一长篇css文档里面找到我要找的选择器。很多人会说，我使用body也可以找到啊，确实如此，可是p、a这样的选择器你就很难找了吧，而这个建议将会使你很方便的找到你所要的选择器。当然前提是你要有使用注释的习惯。

    建议：使用缩进可以有效地增加可读性；虽然缩进会增加css文件的大小，不过这点增量对加载速度几乎没有影响。缺少缩进的css文档对人的影响将是巨大的。

    *****************************************************

    Css基础学习（二）—CSS基础性概念

    1、ID和类

    我们首先简单的说明一下什么是ID和类。ID是一个标识码，因此在一个HTML页面中，ID只能出现一次；而类相当于一种类别，属于一种类的可以是一个也可以是多个，因此类可以在页面中无限次地使用。知道了两者的区别，我们就使用事例来说明把。

    1. <!--应用ID-->
    2. <!--HTML页面-->
    3. <p id="highlight">This paragraph has red text.</p>
    4. <p id="default">This paragraph has dark gray text.</p>
    1. /*css页面*/
    2. /*Define highlighted text*/
    3. #highlight{color:#F00;}
    4. /*Define default text*/
    5. #default{color:#333;}
    6. /*Adjust the color of p when used as a title*/
    7. p#title{color:#F00;}

    上面的事例第一段文字是红色的，第二段将是灰色的，就因为他们的id不同，因此引用了不同选择器。而最后的p#title{color:#F00;}只有在p这个选择器下拥有title这个id的文字将是红色的，其他的选择器将不会使用这个样式。
    使用ID的场合：ID应该为每个页面唯一存在并仅使用一次的元素保留，如页眉、边栏、主导航栏或者页脚等。

    1. <!--应用类-->
    2. <!--HTML页面-->
    3. <p class="highlight">This paragraph has red text.</p>
    4. <p class="default">This paragraph has dark gray text.</p>
    5. <p class="default">This paragraph also has dark gray text.</p>
    1. /*css页面*/
    2. /*Define highlighted text*/
    3. .highlight{color:#F00;}
    4. /*Define default text*/
    5. .default{color:#333;}

    这次的显示和前面是一样的，ID通过'#'来定义，而类通过'.'来定义；很简单吧，当你可以熟练的使用上面这些内容就可以基本的完成html上一半的任务了，当然需要灵活应用拉。
    使用类的场合：类很灵活的使用在各个场所，在页面中只会出现一次的如页眉、边栏、主导航栏或者页脚最好不要使用类；另外千万注意：类主要用来定义正常样式的例外情况，而不是用来定义标准样式的。

    2、使用层叠

    css（层叠样式表），里面的层叠是什么意思呢？命名上存在的东西应该很重要把，我想使用通俗的方式来解释可能更加容易理解。层叠就是当我对同一个选择器多次定义了它的样式，应该以怎么样的规则来确定最后选择器的样式。

    比如我在外部样式内定义了p的文本都是红色的，我又在其中一个页面的头部定义p是黑色的，这个页面里面两个p，一个加上了灰色，一个我们没有进行定义。那我们选择哪个颜色应用在两个p上面呢？加上灰色的p应该是灰色没有问题。另外一个没有定义样式的是红色还是黑色？这个就是层叠的原则，你学会了层叠的原则就会知道没有定义样式的p是黑色的。那下面我们就来学习层叠的一些原则把。

    利用不同的应用方法实现层叠：

    浏览器首先执行内联规则，然后执行所有在<head>中的其他内嵌规则，最后再查找外部文件来完全理解你所创建的css。

    通过多个外部样式表层叠：

    当一个页面中引用了多个外部样式表，则浏览器认为最后一个样式表最重要。也就是说如果几个外部样式同时定义了同一选择器的不同属性，则以最后面那个样式表为准。

    通过导入样式表实施层叠：

    导入样式表的层次性也和外部样式相同，最后导入的最重要。

    总结上面几点：我们只需要牢记，越晚给定的规则越重要这条原则基本就够用了。

    层次的最底层：

    处于层叠层次最底层的样式是浏览器自己的默认样式表。如果你没有定义的样式最终就会以默认的样式来表现，如果你定义了样式，那就会覆盖掉（层叠）默认样式。


    建议：你需要时刻小心使用层叠。跨多个样式表跟踪层叠通常是一件非常困难的事情，你增加的样式，往往会在你不知情的情况下把别的页面的正确样式覆盖掉导致错误，而且无法测试，只能通过眼睛看才知道。（希望那位高人可以做一些软件提供提示功能就好了，懒人妄想中）

     

    3、分组

    1. /*Heading styles */
    2. h1,h2,h3{
    3. font-family:Helvetica,Arial,sans-serif;
    4. line-height:140%;
    5. color:#333;
    6. }
    7. /*Additionally,render all h1 headings in italics */
    8. h1{font-style:italic;}

    上面这段样式通过h1,h2,h3对这三个选择器进行了分组，使他们一样的样式集合在了一起，而需要额外增加h1的样式在后面加上就可以了。这样做的好处就是缩小了定义样式文件的容量。

    4、继承

    这里的继承不同于面向对象的继承原理。还是距离说明把：

    1. <p style="color:#F00">This <span>paragraph</span> has red text.</p>

    如果样式中没有对span进行定义的话，整句话还是显示红色！这就是继承，span继承了p的样式。

    建议：从body继承。在一个结构良好的HTML文件中，body是所有可视结点的父元素，因此每个元素都可以从它继承相关信息。继承的强大也需要时刻的小心，你必须清楚地知道哪些地方需要使用继承，哪些地方不需要，不要被继承搞得糊里糊涂。

    ********************************************

    Css基础学习（三）—构造块

     div，看见这个一定很兴奋吧。最流行的网站布局就是靠它加上css来实现的，讲css没有它怎么行呢。不过今天我们暂时不谈论布局，就对块的常用属性做一个较为详细的介绍，为后面的布局打下坚实的基础，那我们就开始把。

    1、外边距——margin

    外边距属性，用户设定HTML元素和在它外部的元素之间的间距，可以对元素的上下左右分别设置不同的外边距。注意外边距值不从父元素中继承。

    设定外边距属性值有三种方法：长度、比例值或者auto。

    1. /* css页面 */
    2. /*Basic container */
    3. #container
    4. {
    5.   margin-top:50px;
    6.   margin-left:auto;
    7.   margin-right:auto;
    8.   margin-bottom:50px;
    9.   border:1px solid #000;
    10.   background:#ccc;
    11.   width:300px;
    12. }
    1. <!--HTML页面-->
    2. <div id="container">
    3. Content<br/><p>I'm also in a box!</p>
    4. </div>

    上面的样式使div的上边距50px，使用margin:auto将元素居中；是否一定会和浏览器上方距离50px还不一定，这还要看body的样式的上内距的值来决定。经过我在ie中的测试，这两个值会取较大的一个值作为两者之间的间距。
    注意：margin:auto此属性对IE6居然无效！！！所以居中需要使用其它属性，比如align="center"。

    2、内边距——padding

    内边距是HTML元素的边框和元素内容之间的距离。内边距的设定值可以选择长度和百分比，没有auto值。

    1. #container
    2. {
    3.   padding-top:30px;
    4.   padding-left:50%;
    5.   padding-right:30px;
    6.   padding-bottom:0px;
    7. }

    建议：由于各浏览器之间默认的margin和padding的值都不一样，因此建议在body选择器中设定margin和padding的值。

    3、边框——border

    任何元素在周边都可以有边框，可以设置四边都有边框，也可以只设置一部分。边框的属性比较灵活，你可以设置宽度、颜色和样式等。

    border-style属性

    此属性用来设定元素边框样式。边框样式有：none(无边框)、dotted(点线)、dashed(虚线)、solid(实线)、double(双线)、groove(凹槽)、ridge(凸槽)、inset(凹边)、outset(凸边)。

    border-width属性

    设定边框宽度，可以逐个或一次性定义宽度；在定义border-width属性值之前，需要先声明border-style属性。本属性还存在三个设定值：thin、medium和thick。不设定此属性值，默认为medium。

    border-color属性

    颜色属性只有一个，所以如果定义多种颜色，必须使用缩写方式。注意一点：如果不声明边框的颜色，边框将继承元素或父元素中的对应值。

    border属性

    如果边框四边的设定值都一样，则可以使用border属性进行缩写。

    1. /* css页面 */
    2. /*Basic container */
    3. #container
    4. {
    5.   border-style:dashed dotted solid ridge;
    6.   border-top-width:thin;
    7.   border-right-width:20px;
    8.   border-bottom-width:medium;
    9.   border-left-width:thick;
    10.   border-color:#000 #999 #333 #ccc;
    11. }
    12. /* 另几种缩写形式 */
    13. #container
    14. {
    15.   border-top:#000 thin dashed;
    16.   border-right:#999 20px dotted;
    17.   border-bottom:#333 medium solid;
    18.   border-left:#ccc thick ridge;
    19. }
    20. #container
    21. {
    22.   border:#000 thin dashed;
    23. }

    ****************************************

    Css基础学习（四）—文本

    文本是网页内容的核心，文字的美观、可视性、表现性会加强网页内容的可读性。相对于精美的图片和样式，枯燥的文字就没有得到相应的重视程度。人们浏览网页并不是漫无目的的欣赏图片，而是获取信息。我们下面就来说说文字的一些基本样式。

    1、font-family属性

    font-family属性是针对某个元素的字体名称和（或）字体系列名称的一个列表。

    font-family有两种值：字体名称（family name）和字体系列名称（Generic family）。每个值之间用逗号隔开，一般情况下，建议把字体系列作为列表中最后一项。如果字体名称中有空格，则要将其置于引号中（在HTML中则使用单引号）。

    2、font-size属性

    这个属性对字体的大小进行设置，可以使用像素、em和百分数。

    1. /* Specify blanket rules for all elements */
    2. body{
    3. font-family: "Lucida Grande",Arial,Sans-serif;
    4. font-size:12px;
    5. }

    上面的样式首先给定Lucida Grande字体，因为中间存在空格，所以放在引号中。如果机器中有Lucida Grande字体，文本将以这种字体显示；没有这种字体的话，则默认显示为Arial字体，如果这两种字体都不存在，浏览器会选择Sans-serif这种系列中的一种合适字体来显示。上例中的font-size:12px;保证所有的元素都以12px来显示。不过这样的设置会有例外，标题<h1>,<h2>,<h3>并不会受到这个样式的影响。

    3、line-height属性

    line-height属性调整文本行与行之间的间距。此属性可以使用百分比设置，如：line-height:150%，则间距为字号的一半。在实际的使用中，150%或者160%可能更合适。

    line-height:normal;这个设置值与不指定line-height值时可得到相同的效果，所以只有希望改变某个特殊元素的继承值时才用这个值。

    line-height:2;用数字设定间距时，行距将等于数字乘以当前的font-size值。

    line-height:8px;将行距设定为固定的值，这种方法精度很高。但是这种情况，如果重新设置文本的大小，行距不会改变。

    4、letter-spacing属性

    这个属性可以控制文本之间的距离。注意：这个值可以为负数。

    5、font-weight属性

    font-weight属性设置文本中字符显示的粗细程度。其值100（最轻）、200、400（与normal相等）、700（等于粗体）和900（更粗）。

    6、font-style属性

    font-style:italic;设置文本斜体。

    7、font-variant属性

    font-variant用于将文本显示为小型大写字母字体，也就是所有的小写字母都将转换为大写字母，不过所有的字符都会小一些。
    该属性只有normal和small-caps。

    8、text-transform属性

    这个属性和font-variant相对应，它可以将所有的字符显示为大写字母但是不缩小字号。text-transform属性的值：uppercase（全部大写）、lowercase（全部小写）、capitalize（全部首字符大写）、none。

    9、text-indent属性

    text-indent属性设置段落的缩进。如：

    1. text-indent:15px;

    10、首字下沉

    1. p.dropcap:first-letter{
    2. float:left;
    3. width:40px;
    4. font:60px "Lucida Grande",Arial,sans-serif;
    5. line-height:50px;
    6. }

    这个css的设置就可以达到首字下沉的效果，是不是很酷阿？

    *******************************************

    Css基础学习（五）—颜色、背景与图像

    使用css来控制网页的颜色、背景和图像也算是将网页的内容与表现分开的一种方式，不过图像并不全是，需要根据图像的性质来决定。那我们就来看看怎么样使用css样式来进行对颜色、背景和图像的控制。

    1、文本颜色

    前面其实已经使用过文本的颜色，这里就简单的回顾。如：

    1. p{color:#f00;}

    注意：颜色是一个可以继承的值。如果指定包含元素的div为蓝色，那么所有在被包含的文本（没有指定文本颜色的情况下）都将是蓝色的。

    2、背景色

    看看事例就可以说明问题了，下面的代码实现了荧光笔的效果。如：

    1. p{background-color:#F00;}

    3、背景图像

    背景图像的控制将是本讲的重点内容了。对背景图像的精确控制可以实现很多的显示，下面就仔细的来说一下。

    1. body{background-image:url(tile.gif);}

    这个属性就实现背景图的设置了，如果大家添加的图片不是很大的情况下，就可以看见像桌面图片平铺的效果，背景图像不止显示一次。那如果我不希望这样的控制要怎么来设置这个背景呢？下面一个一个的来说明。
    (1)关闭平铺

    通过设置background-repeat属性来关闭平铺，如下设置：

    1. body{
    2. background-image:url(tile.gif);
    3. background-repeat:no-repeat;
    4. }

    这样背景图片将只显示一次，并且显示在容器的左上角。

    background-repeat属性包括4个可能值：repeat、repeat-x、repeat-y、no-repeat。

    repeat就是默认值就不多说了，no-repeat在上面已经使用了；repeat-x和repeat-y这两个值分别用来设置在行或者列方向上平铺图像。

    (2)背景图像的定位

    如果关闭了平铺，我希望把图像放在指定的位置上，应该怎么样来设置呢？很幸运，css提供了background-position属性，那就来看看这个属性是怎么运作的。

    如果你打算在容器的正中间显示背景图像，下面的代码就可以实现：

    1. background-position:center center;

    background-position包括的值：top left;top center;top right;center left;center center;center right;bottom left;bottom center;bottom right;x-pos y-pos;x-% y-%;

    其他的值就不多说了，看看最后两个值是怎么使用的。

    1. background-position:50px left;
    2. background-position:10% 50%;

    (3)背景图像不滚动

    有一些情况下，我们希望前面的内容滚动的情况下，背景图像不滚动。而background-attachment就能实现这样的功能。

    background-attachment属性可以使用两个值：scroll（默认）和fixed。

    (4)背景图像css设置缩写

    1. background:#F00 url(tile.gif) right top no-repeat;

    缩写需要记住各属性的次序，只要顺序一样，前面的值不设置可以移去。在编写正式的css文件时，尽量使用缩写原则，
    不仅可以减少样式表文件的大小，同时还保证了样式表的简洁和可管理性。

    ***********************************************

    Css基础学习（六）—列表

    浏览任何基于Web标准建立的网站资源，几乎都可以看到一个导航列表、一个外部链接列表、有的还有按钮列表和数组列表。网站设计开始阶段就采用简单的列表可保证设计的灵活性和各种功能，并且可以在某些浏览场景下简化设计。

    1、list-style-type属性

    list-style-type属性可以从多个可能的列表项目符中为列表设定一个特定列表项目符，使列表不采用默认的disc。常用的值有：none、disc、circle、square、latin；这些值看英文就知道会显示什么了。

    另外常用的upper-alpha:A、B、C、D、E等；lower-alpha:a、b、c、d、e等；upper-roman:I、II、III、IV、V等；

    我们看看使用的css语句：

    1. /* Style for all default lists */
    2. ul{
    3. list-style-type:square;
    4. }

    显示的效果(编辑状态下是好的，发布就变成圆点了。。。读者就自己体会一下吧)：

    • Drinks Menu
    • Beer
    • Spirits
    • Cola
    • Lemonade
    • Tea
    • Coffee

    2、外边距与内边距

    如果我们使用list-style-type:none;的样式，实际的列表项并不会因为去掉了列表项目符就紧靠左边框。

    大部分的浏览器将列表项置于距离无序列表左边框30像素处（默认padding）。无序列表本身距离容器的上边框约10像素（默认margin）。

    3、list-style-position属性

    list-style-position属性的默认值为outside，还可以设置inside值，inside使列表项目符内联在文本中。

    list-style-position:inside;长文本在列表项目符下另起一行，好像列表项目符是个普通字符一样。此属性作用不大，就在此提一下。

    4、list-style-image属性

    这个属性可以用自定义的图片来替代那些平淡无奇的列表项目符。下面的css正表现了这个样式：

    1. ul{
    2. margin:0;
    3. padding:0 0 0 25px;
    4. width:200px;
    5. list-style-image:url(images/list.gif);
    6. line-height:150%;
    7. }

    我们还可以选择另外一种方式来实现列表项目符使用图片来替代，而且功能更加的强大，可以每个列表使用不同的图案。

    1. ul{
    2. list-style:none;
    3. }
    4. li{
    5. background:transparent url(images/list.gif) no-repeat left center;
    6. padding:0 0 0 25px;
    7. }

    5、list-style缩写

    list-style-type、list-style-position和list-style-image可以按任意次序排列。

    1. list-style:none inside url(images/list.gif);

    不过如果有了list-style-image设置，就不需要设置list-style-type，因此这个缩写意义不大。

    6、内联列表

    无序列表默认垂直显示的，因为li元素是块级元素，那水平显示就是将块级元素转变为内联的元素。下面就是css的实现方式，简单的很。

    1. ul{
    2. list-style-type:disc;
    3. }
    4. li{
    5. display:inline;
    6. background:transparent url(images/list.gif) no-repeat left center;
    7. margin:0 0 0 10px;
    8. padding:0 0 0 15px;
    9. }

    设置成水平列表以后，列表项目符就不再显示了，如果我们还需要列表项目符，就要使用前面讲到的设定背景图像了。

    上面css效果如下：

    • Drinks Menu
    • Beer
    • Spirits
    • Cola
    • Lemonade
    • Tea
    • Coffee

    7、用于导航的列表

    还是前面使用的列表，修改一下css来改变列表成为导航列表的样子；

    1. ul{
    2. list-style-type:none;
    3. margin:5px;
    4. padding:2px;
    5. border:1px solid #333;
    6. width:160px;
    7. font:bold 12px 'Lucida Grande',Verdana,sans-serif;
    8. }
    9. li{
    10. background:#DDD;
    11. margin:0;
    12. padding:2px 10px;
    13. border-left:1px solid #fff;
    14. border-top:1px solid #fff;
    15. border-righr:1px solid #666;
    16. border-bottom:1px solid #aaa;
    17. }

    上面的显示效果如下：

    • Drinks Menu
    • Beer
    • Spirits
    • Cola
    • Lemonade
    • Tea
    • Coffee

    *****************************************

    Css基础学习（七）—链接

    网页的发展就是从链接开始的，没有链接的网页只是孤立的，基本称不上是网页。通过css，链接可以变成一个非常美观且功能强大的对象。当然话说回来，虽然我们可以对链接进行很多控制，但是不能够为了追求美观和新奇而影响链接的基本功能。废话就不多说了，就开始链接对象css的学习吧。
    先创建一个链接：
    <a href="http://www.google.com" title="Visit the best search engine in the world">Google</a>
    1、修改链接的颜色

    1. a:link{color:#F00;}
    2. a:visited{color:#999;}
    3. a:hover{color:#333;}
    4. a:active{color:#000;}

    上面的这段css改变了链接各个状态的文本颜色，link这个伪类将控制所有未访问的链接状态；visited这个伪类则控制已经被访问过的链接状态；hover伪类则控制鼠标悬停在此链接上时的状态；最后就是active伪类了，这是在点击这个链接瞬间的链接状态；

    注意：上面的css好像可以正常的工作了，不过这个css的四个伪类顺序不能改变哦，如果改变的话有一些链接的状态就不会正常的工作了。究其原因是继承在作怪，不过我们记住这个顺序就好了。

    2、文本修饰

    不管是什么状态，所有链接都具有和链接文本一样颜色的下划线。css可以通过样式将下划线容易去除，那我们就来看看吧。

    1. a.link{
    2. color:#f00;
    3. text-decoration:none;
    4. border-bottom:1px dashed #333;
    5. line-height:150%
    6. }

    这个css做了什么呢？首先border-bottom:1px dashed #333;这个给链接加了一个边框；我们不认识的样式是text-decoration:none;
    这个样式就应该是把下划线给变没了吧，bingo！答对了。

    详细解释一下这个属性把，text-decoration有5个值，none、underline（默认值）、overline、line-through和blink。这些值大家可以自己去试一下，不过个人建议，考虑到链接的可用性和直观性，还是在这方面作很谨慎的修改。

    3、用背景图像添加记号

    1. a.link{
    2. color:#F00;
    3. padding:0 15px 0 0;
    4. background:url(images/arrow.gif) no-repeat right center;
    5. }
    6. a.visited{
    7. color:#999;
    8. padding:0 15px 0 0;
    9. background:url(images/checkmark.gif) no-repeat right center;
    10. }

    大家发挥想象，这是一个怎么样子的呢？我因为不知道怎么样才能在网页上表现出这个样式，所以大家在自己的机器上联系看看吧。

    4、利用链接来转换导航栏

    1. ul a:link,ul a:visited,ul a:hover,ul a:active{
    2. display:block;
    3. padding:2px 10px;
    4. text-decoration:none;
    5. }
    6. ul a:hover{
    7. color:#F00;
    8. background:#FFF;
    9. }

    这样的样式当鼠标留在链接上时，文本变成红色，而整个列表项的背景则变成白色。整个css结合第六篇的css。因为不知道伪类怎么样加到style中去，就看不到效果了。

    **************************************

    Css基础学习（八）—表格

    终于轮到我们的表格出场了，虽然表格在以前过度的使用在了网页的布局当中，但是其价值还是存在的。很显然把表格贬得一文不名是不公平的！表格在表示列表数据方面有着其突出的作用，我们就学习一下使用css怎么使表格发挥它应有的威力。

    在说明css对表格的作用之前，我们需要做出一些说明。表格Table拥有着自己的样式元素：cellpadding cellspacing border等，这些元素将会对css样式的作用起到不少的影响，因此我们建议在表格内不使用样式属性，完全使用css来控制，这是一个很好的原则。

    我们先来建立一个表格的html，记住：表格元素内不包含上面所说的任何表现信息。

    1. <table>
    2. <tr>
    3. <th>Team</th>
    4. <th>1998</th>
    5. <th>2002</th>
    6. </tr>
    7. <tr>
    8. <th>England</th>
    9. <td>Second Round</td>
    10. <td>Quarter Finals</td>
    11. </tr>
    12. <tr>
    13. <th>France</th>
    14. <td>Winners</td>
    15. <td>Group stages</td>
    16. </tr>
    17. </table>

    准备活动好了，开始我们的css之旅吧。

    1. table{
    2. border:1px solid #333;
    3. font: normal 12px 'Lucida Grande',Verdana,sans-serif;
    4. }
    5. td,th{
    6. padding:3px;
    7. }
    8. th{
    9. text-align:left;
    10. color:#FFF;
    11. background-color:#333;
    12. border-style:solid;
    13. border-width:1px;
    14. border-color:#CCC #666 #000 #CCC;
    15. }
    16. td{
    17. background-color:#DDDDDD;
    18. border-style:solid;
    19. border-width:1px;
    20. border-color:#FFF #AAA #666 #FFF;
    21. }

    我们先定义好表格的样式，里面没有什么我们不熟悉的样式，那就先看看产生的效果是怎么样的。

    没有添加样式的纯html表格：

    Team 1998 2002
    England Second Round Quarter Finals
    France Winners Group stages

    添加样式以后的表格表现：

    Team 1998 2002
    England Second Round Quarter Finals
    France Winners Group stages


    border-collapse属性可以替代Table里面的cellspacing属性，用于减少或删除单元格之间的默认间隔。

    1. table{
    2. border:0;
    3. border-collapse:collapse;
    4. font: normal 12px 'Lucida Grande',Verdana,sans-serif;
    5. }
    6. td,th{
    7. padding:3px;
    8. }
    9. th{
    10. text-align:left;
    11. border-bottom:1px solid #000;
    12. }
    13. td{
    14. border-bottom:1px solid #000;
    15. }

    我们可以看看border-collapse:collapse;这个属性有和没有的区别在哪里。

    没有添加border-collapse:collapse;属性的样式：

    Team 1998 2002
    England Second Round Quarter Finals
    France Winners Group stages

    添加border-collapse:collapse;属性的样式：

    Team 1998 2002
    England Second Round Quarter Finals
    France Winners Group stages

     

    给表格添加背景图像

    1. th{
    2. text-align:left;
    3. background:#FFF url(images/tablefade.gif) repeat-x;
    4. border-bottom:1px solid #000;
    5. }

    显示效果大家就自己去试试看吧。

    表格还有很多的技巧，我就不一一介绍了，多多使用会发现更多的技巧的。

    **********************************

    Css基础学习（九）—缩写

    css的样式缩写简洁，而且减少了页面传输的流量，应该是每一个页面设计师追求的目标。我们就来看看我们前面讲解的内容中的一些缩写。

    文本缩写

    1. /* 文本没有缩写 */
    2. /* Specify blanket rules for all elements */
    3. font-size:12px;
    4. line-height:160%;
    5. font-weight:bold;
    6. font-style:italic;
    7. font-family: "Lucida Grande",Arial,Sans-serif;
    9. /* 文本有缩写 */
    10. /* Specify blanket rules for all elements */
    11. font: 12px/160% bold italic "Lucida Grande",Arial,Sans-serif;

    注意：这个规则只有在你同时设定了font-size和font-family的情况下才起作用，这两个属性中任何一个没有定义，该规则都将被忽略。同时，如果你没有设定font-weight、font-style或font-variant，它们将默认设置为normal。

    背景缩写

    1. /* 背景没有缩写 */
    2. background-color:#CCC;
    3. background-image:url(image.gif);
    4. background-repeat:no-repeat;
    5. background-position:top left;
    7. /* 背景有缩写 */
    8. background:#CCC url(image.gif) no-repeat top left;

    注意：在background中省略任何值，浏览器将使用默认值。如果没有设定background-repeat值，背景图像将默认为在水平和垂直两个方向上重复。

    列表缩写

    1. /* 列表没有缩写 */
    2. list-style-type:disc;
    3. list-style-position:inside;
    4. list-style-image:url(image.gif);
    6. /* 列表有缩写 */
    7. list-style:disc inside url(image.gif);

    注意：在此css规则中省略任何值，浏览器将使用默认值，即分别为disc、outside和none。

    外边距和内边距缩写

    根据外边距或内边距值有多少不同，针对外边距和内边距有4种不同的css缩写命令

    4个不同值

    1. /* 外边距没有缩写 */
    2. margin-top:50px;
    3. margin-right:auto;
    4. margin-bottom:20px;
    5. margin-left:10px;
    7. /* 外边距有缩写 */
    8. margin:50px auto 20px 10px;

    3个不同值

    1. /* 外边距没有缩写 */
    2. margin-top:50px;
    3. margin-right:10px;
    4. margin-bottom:3px;
    5. margin-left:10px;
    7. /* 外边距有缩写 */
    8. margin:50px 10px 3px;

    两个不同值

    1. /* 外边距没有缩写 */
    2. margin-top:50px;
    3. margin-right:10px;
    4. margin-bottom:50px;
    5. margin-left:10px;
    7. /* 外边距有缩写 */
    8. margin:50px 10px;

    一个值

    1. /* 外边距没有缩写 */
    2. margin-top:10px;
    3. margin-right:10px;
    4. margin-bottom:10px;
    5. margin-left:10px;
    7. /* 外边距有缩写 */
    8. margin:10px;

    注意：这4种缩写方法同样适用于内边距和边框。这里的属性值排列顺序很重要，顺序为上、右、下、左。简单记忆为时间的半天时针的走动。

    边框缩写

    1. /* 边框没有缩写 */
    2. border-width:1px;
    3. border-color:#CCC;
    4. border-style:dashed;
    6. /* 边框有缩写 */
    7. border:1px #CCC dashed;
    9. /* 边框没有缩写 */
    10. border-right-width:1px;
    11. border-right-color:#CCC;
    12. border-right-style:dashed;
    14. /* 边框有缩写 */
    15. border-right:1px #CCC dashed;
    17. /* 边框没有缩写 */
    18. border-style:dashed dotted solid ridge;
    19. border-top-width:thin;
    20. border-right-width:20px;
    21. border-bottom-width:medium;
    22. border-left-width:thick;
    23. border-color:#000 #999 #333 #ccc;
    25. /* 边框有缩写 */
    26. border-top:#000 thin dashed;
    27. border-right:#999 20px dotted;
    28. border-bottom:#333 medium solid;
    29. border-left:#ccc thick ridge;

    ******************************************

    Css基础学习（十）—思考

    第十讲了，应该说Css的基础学习就告一段落了。我们还需要学习的东西很多，我们还没有学习Css+Div的布局呢。不要急，后面一定会学习这项先进技术的，不过不在这个系列里面。

    先来说说已经学会的知识如何更好的应用，我们学习了基础、语法，可是还没有在实际的开发中间应用呢。

    1、继承

    继承是个好东西，但是并不是所有的属性都会继承的，那我们就要问了，那些属性是会继承的，那些属性是不会继承的呢？如果要说清楚这个问题，估计可以写一本参考手册了。我就简单说一下规则，如果你不算太笨的话，应该会举一反三的。大体上，影响你文本外观的样式，如字体颜色（颜色属性）、字体，还有其他和字体有关的属性，如字体大小、字体宽度和字体样式都可以被继承。其他的属性（比如边框）不能被继承，很容易理解吧。

    在实际应用中继承有什么样的指导作用呢？举例说明，我们应该把文本的属性设置放在尽量接近树结点的根上，比如整个网站的文本默认设置，放在body结点上，那所有接点的文字都可以得到继承。拥有了继承，又有那些是不应该设置文本属性的呢？比如P、A这样的选择符还要设置文本的属性吗？（并不绝对，以下只是我的思考结果，仅供参考！）我认为就不需要设置文本的属性了。比如选择符A，我们想做的就是转变默认的蓝色和下划线，如果再设置文本的大小和字体，就会覆盖掉上下文中的继承作用。大家肯定不想在标题上显示链接，结果文本和正文的字体、大小一样吧！

    从上面的事例是不是应该给我们更多的思考呢？如何充分利用继承来减少对Css的设置将是一个很大的课题。

    2、宏观的考虑

    Css的设计有很大的门道，个人感觉不亚于程序和数据库的设计，那就说说我对整体Css设计的一些想法。

    整体思路：大处着眼，小处着手。首先需要有一个宏观的概念，考虑好通用的样式。整站的文本、默认的标题大小、布局Div的方式等等，你对整个系统有了宏观的了解，才知道那些是应该默认的，那些才要特殊的样式覆盖。比如标题，先要考虑好使用那几号标题，再定义好<h1><h2>这些的默认样式，在那个模块里面如果要换一个样式，就对这个标题使用类来限定。这样的好处，即使其他设计人员在制作页面的时候不清楚，也照样做出正确的页面来。程序的效率来自于团队需要整体思考的东西越少，你作为管理者越成功（当然成功是要靠实力的）。

    3、命名

    只要是写程序相关的问题，总会涉及到变量的命名，Css也不例外。有一些通用的命名规则还是可以借鉴的，比如不要使用无意义的命名：Object，谁都不能联想到在那里会使用到它！因此有意义的命名是提高程序可读性一大法宝，什么？你想使用更好的一些命名到你的网站上，哈哈，那你就多加练习，不断改进你的网站吧（这些改进可能并不能给客户带来变化，但是你的水平肯定还是会有所变化的！这点相信我没错的）。

    有些命名会按照类型来，比如在asp.net开发中的Label控件，喜欢使用lbl作为前缀，个人认为在Css的命名使用这个方式并不好。有一些样式的定义我们不能确定使用在什么选择符上，开始使用在P选择符上，过了一段时间，又要使用在span上，为了规范命名，就需要修改命名，可是你需要冒着修改全站样式的风险来追求命名的规范，大多数人会放弃命名规范。结果后续做开发的人迷糊了，不知道代码错误了还是代码扩展演变的，程序中的遗憾就是这样产生的。说了这么多总结成一句，不要使用类型来命名！应该确定意义来命名，比如给网站的头部命名为MasterHead就不错。

    4、适用范围

    这一点上有一点像程序中的全局变量，或者是面向对象中继承后的Override。现在程序编译太先进了，编译器会告诉我们写的函数在基类里面是否存在，是否确定要覆盖，Css有这样的功能多好啊（一个邪恶的声音在那里偷笑，你应该可喜没有这样的功能，不然就淹没在Css的继承关系里吧）。因此我们在编写Css样式的时候要清楚地意识到这个样式的使用范围，然后给他个比较合适的使用范围。既要能够应用到这个样式，又尽量使不使用的地方不会误用到。

    还是举例说明，在网站的布局中会把页面划分成几个部分，对每个部分的样式进行定义。在网页头部（MasterHead）的列表导航和在左边栏（Sidebar）的列表导航的样式是不一样的，我们应该怎么样来定义限制使用范围呢？#MasterHead ul和#Sidebar ul这样的设置是不是会比导航使用不同的类好一些呢？当然#MasterHead ul.ClassName这样的定义也不错，如果在MasterHead中不止一个列表时这是更好的选择。这样修改程序时，你需要得到的信息量是最少的，自然修改起来也会方便一些，特别是在网站的后期或者维护阶段，你很难保证你的样式修改添加是否会对已经存在的网站造成不必要的影响，一个优秀的Css设计师将会尽量避免这样的事件发生。

    该讲的都讲了，希望大家看了以后也能留下自己的宝贵经验。学习需要的就是分享！

     
  • 相关阅读:
    POJ1700 Crossing River
    Glad to see you! CodeForces
    Summer sell-off CodeForces
    atcoderI
    Selling Souvenirs CodeForces
    Array Division CodeForces
    Tea Party CodeForces
    Atcoder F
    Atcoder E
    Average Sleep Time CodeForces
  • 原文地址：https://www.cnblogs.com/yefengmeander/p/2887916.html
Copyright © 2020-2023  润新知