Css基础学习_css里面怎么设置为滚动字样-程序员宅基地

技术标签: stylesheet  border  HTML + CSS  css  浏览器  html  url  

 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样式来进行对颜色、背景和图像的控制。

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、利用链接来转换导航栏

    • ul a:link,ul a:visited,ul a:hover,ul a:active{
    • display:block;
    • padding:2px 10px;
    • text-decoration:none;
    • }
    • ul a:hover{
    • color:#F00;
    • background:#FFF;
    • }

这样的样式当鼠标留在链接上时,文本变成红色,而整个列表项的背景则变成白色。整个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. fontnormal 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. fontnormal 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;

  8. /* 文本有缩写 */
  9. /* Specify blanket rules for all elements */
  10. font12px/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;

  6. /* 背景有缩写 */
  7. 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);

  5. /* 列表有缩写 */
  6. 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;

  6. /* 外边距有缩写 */
  7. margin:50px auto 20px 10px;

3个不同值

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

  6. /* 外边距有缩写 */
  7. margin:50px 10px 3px;

两个不同值

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

  6. /* 外边距有缩写 */
  7. margin:50px 10px;

一个值

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

  6. /* 外边距有缩写 */
  7. margin:10px;

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

边框缩写

  1. /* 边框没有缩写 */
  2. border-width:1px;
  3. border-color:#CCC;
  4. border-style:dashed;

  5. /* 边框有缩写 */
  6. border:1px #CCC dashed;

  7. /* 边框没有缩写 */
  8. border-right-width:1px;
  9. border-right-color:#CCC;
  10. border-right-style:dashed;

  11. /* 边框有缩写 */
  12. border-right:1px #CCC dashed;

  13. /* 边框没有缩写 */
  14. border-style:dashed dotted solid ridge;
  15. border-top-width:thin;
  16. border-right-width:20px;
  17. border-bottom-width:medium;
  18. border-left-width:thick;
  19. border-color:#000 #999 #333 #ccc;

  20. /* 边框有缩写 */
  21. border-top:#000 thin dashed;
  22. border-right:#999 20px dotted;
  23. border-bottom:#333 medium solid;
  24. border-left:#ccc thick ridge;






版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/icecityman/article/details/2910939

智能推荐

Github连接不上问题_fastgithub 找不到任何可成功连接的ip-程序员宅基地

文章浏览阅读3.7k次,点赞3次,收藏4次。文章目录解决方法过程中问题解决方法在电脑的 C:\Windows\System32\drivers\etc 文件夹下修改或者添加140.82.114.3 github.com(ip地址需要查询)199.232.69.194 github.global.ssl.fastly.net(ip地址需要查询)查询github.com地址: https://www.ipaddress.com/ 过程中问题问题:host文件修改保存后只能另存为解决方法:修改并保存host文件..._fastgithub 找不到任何可成功连接的ip

mybatis注解方式和xml方式的使用-程序员宅基地

文章浏览阅读1.7k次。Mybatis的注解方式的使用: 1 package com.hikvision.building.cloud.neptune.device.biz.domain.mapper; 2 3 import java.util.Date; 4 import java.util.List; 5 6 import org.apache...._mybatis注解中使用xml@update xml

iphone开发之UIButton按钮的使用(二)拖线实现 多个按钮用同一个监听方法实现_uibutton长按松手监听-程序员宅基地

文章浏览阅读1.9k次。1、当为每个按钮都一一拖线实现每一个监听方法,会变得非常繁琐。未解决这个问题,就需要将多个按钮拖到同一个方法上。2、就是说此方法要处理多个按钮的监听事件,但是每个按钮的监听事件都不相同,要处理每个按钮的不同监听事件就要对各个按钮传来的参数进行区分。Type不要再选择id类型,要选择UIButton。Connection仍然选择Action表示监听方法,Event仍然选Touch Up Ins_uibutton长按松手监听

Linux 管理联网 nmcli常用命令_nmcli c-程序员宅基地

文章浏览阅读1.3k次。修改IP (modify) 停止连接 (down) 删除连接(delete) 连接生效(三种方式) 重新加载配置文件(load reload)_nmcli c

MPAndroidChart之LineChart使用_mpachart折线图设置虚线-程序员宅基地

文章浏览阅读5.5k次。1.写在前面我很纠结着标题该怎么取,因为对于这个图表框架我只使用了linechart,但是用的非常非常的多,公司很多地方都是折线图。因为项目有关折线图的功能基本都完了,所以抽出一部分东西出来记录下来。这里抽出的效果图如下: 领导具体的要求有这么几点: 1. 第一个折线图表示实时功率,后面的月 年 总体都是发电量,并且日实时功率要充满(就是fill),其他的不用; 2. 日实时功率图表_mpachart折线图设置虚线

深入理解SELinux SEAndroid(3最后部分)_restorecon lsetfileconon read-only file system-程序员宅基地

文章浏览阅读947次。深入理解SELinux SEAndroid(结局) 二 SEAndroid源码分析有了上文的SELinux的基础知识,本节再来看看Google是如何在Android平台定制SELinux的。如前文所示,Android平台中的SELinux叫SEAndroid。先来看SEAndroid安全策略文件的编译。 1. 编译sepolicy Android平台中:_restorecon lsetfileconon read-only file system

随便推点

惊人一谈:5G出现将让Wi-Fi产业消亡?-程序员宅基地

文章浏览阅读122次。前几日,网上流出两张微信截图,有行业人士说5G会让Wi-Fi死掉,消息一出,引起了行业内的热议。众所周知5G速度很快,但是怎么突然又牵扯出与Wi-Fi的恩怨呢?行业人士说5G出现,Wi-Fi必死。后续手机将不需要Wi-Fi芯片安装在上面。这些观点论据是否能站得住脚?包括乐鑫科技、全志科技、博通集成这一类有Wi-Fi芯片的公司未来会不会受到5G的冲击?据了解,该资深市场总监在电话里说,目前家庭的Wi..._5g wi-fi产业

什么是灰度发布?能给技术开发带来什么价值_灰度开发-程序员宅基地

文章浏览阅读2.1k次。什么是灰度发布呢?要想了解这个问题就要先明白什么是灰度。灰度从字面意思理解就是存在于黑与白之间的一个平滑过渡的区域,所以说对于互联网产品来说,上线和未上线就是黑与白之分,而实现未上线功能平稳过渡的一种方式就叫做灰度发布。在了解了什么是灰度发布的定义以后,就可以来了解一下灰度发布的具体操作方法了。_灰度开发

k8s资源指标API及metrics-server资源监控-程序员宅基地

文章浏览阅读896次。简述:在k8s早期版本中,对资源的监控使用的是heapster的资源监控工具。但是从 Kubernetes 1.8 开始,Kubernetes 通过 Metrics API 获取资源使用指标,例如容器 CPU 和内存使用情况。这些度量指标可以由用户直接访问,例如通过使用kubectl top 命令,或者使用集群中的控制器。 Metrics API: 通过 Metrics ...

ES Java API - 获取索引下数据量_java操作es查询索引中的doc数量-程序员宅基地

文章浏览阅读1.5w次。需求 获取ES某个索引下的数据总量代码示例引包import net.sf.json.JSONObject;import org.apache.commons.logging.Log;import org.apache.commons.logging.LogFactory;import org.elasticsearch.action.ActionFuture;import org.e_java操作es查询索引中的doc数量

OpenCV把视频拆分成图片(python)_cv2 视频拆分为图像-程序员宅基地

文章浏览阅读2.3k次,点赞6次,收藏16次。OpenCV把视频拆分成一帧一帧的图片并存放入指定的目录下,代码如下:import cv2import osdef apart(video_path, video_name, image_path): """ 功能:将视频拆分成图片 参数: video_path:要拆分的视频路径 video_name:要拆分的视频名字(不带后缀) image_path:拆分后图片的存放路径 """ # 在这里把后缀接上 _cv2 视频拆分为图像

MaxScript Normals Toolbag 法线工具包(由于是练手,功能是随写随想的)_maxset normals-程序员宅基地

文章浏览阅读2.5k次。视频演示 https://www.bilibili.com/video/av41035802/(由于是练手,功能是随写随想的,码特别乱,就不分享了,免得恼火)(顺便吐一下,max的脚本工具虽然有mxs dotnet python都可以写功能做UI,但是做一个人性化的UI会导致码特别冗长,py挺好,但是max支持的是py2.7,而且max2016和max2017还有功能变动。。最后索..._maxset normals

推荐文章

热门文章

相关标签