css基础

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一
 

多重样式将层叠为一个

样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。

层叠次序

当同一个 HTML 元素被不止一个样式定义时，会使用哪个样式呢？

一般而言，所有的样式会根据下面的规则层叠于一个新的虚拟样式表中，其中数字 4 拥有最高的优先权。

  1. 浏览器缺省设置
  2. 外部样式表
  3. 内部样式表（位于 <head> 标签内部）
  4. 内联样式（在 HTML 元素内部）

因此，内联样式（在 HTML 元素内部）拥有最高的优先权，这意味着它将优先于以下的样式声明：<head> 标签中的样式声明，外部样式表中的样式声明，或者浏览器中的样式声明（缺省值）。

 

 

CSS 语法

CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。

selector {declaration1; declaration2; ... declarationN }

选择器通常是您需要改变样式的 HTML 元素。

每条声明由一个属性和一个值组成。

属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。

selector {property: value}

下面这行代码的作用是将 h1 元素内的文字颜色定义为红色，同时将字体大小设置为 14 像素。

在这个例子中，h1 是选择器，color 和 font-size 是属性，red 和 14px 是值。

h1 {color:red; font-size:14px;}

下面的示意图为您展示了上面这段代码的结构：

CSS 语法

提示：请使用花括号来包围声明。


 

 

选择器的分组

你可以对选择器进行分组，这样，被分组的选择器就可以分享相同的声明。用逗号将需要分组的选择器分开。在下面的例子中，我们对所有的标题元素进行了分组。所有的标题元素都是绿色的。

h1,h2,h3,h4,h5,h6 {
  color: green;
  }

 

存在方式有三种：元素内联、页面嵌入和外部引入，比较三种方式的优缺点。

语法：style = 'key1:value1;key2:value2;'

  • 在标签中使用 style='xx:xxx;'
  • 在页面中嵌入 < style type="text/css"> </style > 块
  • 引入外部css文件
 

标签选择器

div{ background-color:red; } 
<div > </div>

class选择器

.bd{ background-color:red; } 
<div class='bd'> </div>

id选择器

#idselect{ background-color:red; } 
<div id='idselect' > </div>

关联选择器

#idselect p{ background-color:red; } 
<div id='idselect' > <p> </p> </div>

组合选择器

input,div,p{ background-color:red; } 

属性选择器

input[type='text']{ width:100px; height:200px; } 

 

css常用属性
background背景属性
背景属性： (background)
色彩
图片background-image: url();
重复background-repeat: no-repeat;
滚动background-attachment: fixed;(固定) scroll;(滚动)
位置background-position: left(水平) top(垂直);
简写方法 background:#000 url(..) repeat fixed left top;

 

<div class='group'  id='t7'>

  <div id='t71'>

     <h2>background</h2>

    <ul>

      <li>background-color</li>

       <div style='background-color:red;'>&nbsp</div>

      <li>background-image</li>

       <div style="background-image:url('image/4.gif'); height: 80px;"></div>

      <li>background-repeat（no-repeat;repeat-x;repeat-y）</li>

       <div style="background-image:url('image/4.gif'); height: 80px;background-repeat:no-repeat"></div>

      <li>background-position</li>

       <div style="background-image:url('image/5.png'); height: 80px;background-repeat:no-repeat;background-position:-105px  -112px;"></div>

       <div style="background: #f8f8f8 url(image/5.png) -105px -212px no-repeat; height: 80px;"></div>

     </ul>

</div>

 

border属性

 

 

边框属性： (Border)
border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;
border-width:; 边框宽度
border-color:#;
简写方法border：width style color;

 

 

 <div id='t72'>

     <h2>border</h2>

     <div style='border:1px solid red; height: 10px;'></div>

     <br/>

     <div style='border:1px dotted red; height: 10px;'></div>

     <br/>

     <div style='border:1px dashed red; height: 10px;'></div>

 </div>

 

margin 属性
 

外边距属性：(margin)

<html>
<head>
<style type="text/css">
p.margin {margin: 2cm 4cm 3cm 4cm}
</style>
</head>
<body>
<p>这个段落没有指定外边距。</p>
<p class="margin">这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。这个段落带有指定的外边距。</p>
<p>这个段落没有指定外边距。</p>
</body>
</html>

 

 

 

 

padding 属性
内边距属性：(padding)

 

设置 p 元素的 4 个内边距：

p
  {
  padding:2cm 4cm 3cm 4cm;
  }

 

<html>

<head>

<style type="text/css">

td.test1 {padding: 1.5cm}

td.test2 {padding: 0.5cm 2.5cm}

</style>

</head>

<body>

<table border="1">

<tr>

<td class="test1">

这个表格单元的每个边拥有相等的内边距。

</td>

</tr>

</table>

<br />

<table border="1">

<tr>

<td class="test2">

这个表格单元的上和下内边距是 0.5cm，左和右内边距是 2.5cm。

</td>

</tr>

</table>

</body>

</html>

 

 

 

display属性

 

display 属性规定元素应该生成的框的类型。

  1. none ：此元素不被显示；
  2. block ：此元素按块级元素显示：前后带换行符，自己占一行。内联元素 → 块元素
  3. inline ：此元素按内联元素显示：1个挨着1个。块元素 → 内联元素

 

<html>

<head>

<style type="text/css">

p {display: inline}

div {display: none}

</style>

</head>

<body>

<p>本例中的样式表把段落元素设置为内联元素。</p>

<p>而 div 元素不会显示出来！</p>

<div>div 元素的内容不会显示出来！</div>

</body>

</html>

 

 

cursor属性
cursor 属性规定要显示的光标的类型（形状）

 

<div id='t76'>

<h2>cursor</h2>
<a href="http://www.autohome.com.cn">autohome</a>
<input type='text' />
<span>老衲</span>

<ul>
<li>css提供的cursor值</li>
<p>
<span style='cursor:pointer;'>pointer</span> ||
<span style='cursor:help;'>help</span> ||
<span style='cursor:wait;'>wait</span> ||
<span style='cursor:move;'>move</span> ||
<span style='cursor:crosshair;'>crosshair</span>
</p>
<li>伪造超链接</li>
<p><span style='cursor:pointer;color:blue;'>pointer</span></p>
<li>自定义(一般不用)</li>
<p>
<span style='cursor:url(image/favicon.ico),auto;'>mine</span>
</p>
</ul>
<br/>
</div>

 

 

 

 

 

float属性(浮动)

float 属性定义元素在哪个方向浮动。

 

 

<div id='t77'>
     <h2>浮动</h2>
     <div style='background-color: red;'>
      <div style='background-color: green;float: left'>left</div>
      <div style='background-color: blue;float:right'>right</div>
     </div>
     <br/>
     <br/><br/>
     <div style='background-color: red;'>
      <div style='background-color: green;float: left'>left</div>
      <div style='background-color: blue;float:right'>right</div>
      <div style='clear: both;'></div>
     </div>
</div>

 

 

 

position属性

 

 

定位 h2 元素：

h2
  {
  position:absolute;
  left:100px;
  top:150px;
  }

 

<html>

<head>

<style type="text/css">

h2.pos_abs

{

position:absolute;

left:100px;

top:150px

}

</style>

</head>

<body>

<h2 class="pos_abs">这是带有绝对定位的标题</h2>

<p>通过绝对定位，元素可以放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>

</body>

</html>

 

 

 

opacity 属性

透明度

 

img
{
opacity:0.4;
filter:alpha(opacity=40); /* 针对 IE8 以及更早的版本 */
}

 

基础一】CSS如何控制页面


本节主要讲解，两个内容：
第一：CSS如何控制页面样式，有几种样式；
第二：这些样式出现在同一个页面时的优先级。

        使用xHTML+CSS布局页面，其中有个很重要的特点就是结构与表现相分离，结构指xHTML页面代码，表现就是CSS代码了，如果把一个网页看成穿着衣服的人的话，人就是xHTML，是结构，而衣服呢就是CSS，是表现，现在出现的问题是，如何让CSS去控制页面？或者说，如何让衣服穿在人身上；不同的CSS就可以使页面出现不同的风格适用不同的网站，而不同的衣服，人穿上后就会体现出不同的职业。

第一：如何让CSS去控制HTML页面？
有4种样式(方式)，行内样式、内嵌样式、链接样式、导入样式

1）行内样式
      行内样式是4种样式中最直接最简单的一种，直接对HTML标签使用style=""，例如：

  1. <p style="color:#F00; background:#CCC; font-size:12px;"></p>

虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。

2）内嵌样式
      内嵌样式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，例如：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</title>
  6. <style type="text/css">
  7. body,div,a,img,p{margin:0; padding:0;}
  8. a{color:#FFF;}
  9. img{float:left;}
  10. #container{width:500px; height:350px; background:url(http://www.w3cfuns.com/static/image/cm/demo/2d121/w3cBg.jpg) no-repeat; position:relative; margin:0 auto;}
  11. #container p{width:380px; height:40px; position:absolute; left:60px; bottom:60px; color:#fff; font-size:12px; line-height:18px; text-align:center; font-family:"微软雅黑", Verdana, Geneva, sans-serif;}
  12. #reg{display:block; width:114px; height:27px; position:absolute; left:191px; bottom:28px;}
  13. </style>
  14. </head>
  15. <body>
  16. <div id="container">
  17. <p>全国的Web前端开发工程师欢聚于<a href="http://www.w3cfuns.com/" target="_blank">W3CFuns.com</a><br />我们的口号是“打造中国Web前端开发人员最专业的贴心社区！”</p>
  18. <a href="http://www.w3cfuns.com/member.php?mod=register" target="_blank" id="reg"></a>
  19. </div>
  20. </body>
  21. </html>

 

效果如下：


内嵌样式，大家也许已经意识到，即使有公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护难度也大，如果文件很少，CSS代码也不多，这种样式还是很不错的。

3）链接样式
      链接样式是使用频率最高，最实用的样式，只需要在<head></head>之间加上<link…/>就可以了，如下：

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

举个例子：

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5. <title>W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</title>
  6. <link rel="stylesheet" type="text/css" href="http://www.w3cfuns.com/static/image/cm/demo/2d121/style.css"/>
  7. </head>
  8. <body>
  9.     <div id="container">
  10.         <p>全国的Web前端开发工程师欢聚于<a href="http://www.w3cfuns.com/" target="_blank">W3CFuns.com</a><br />我们的口号是“打造中国Web前端开发人员最专业的贴心社区！”</p>
  11.         <a href="member.php?mod=register" target="_blank" id="reg"></a>
  12.     </div>
  13. </body>
  14. </html>



        这种样式将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTML代码与表现CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站风格，只需要修改公共CSS文件就OK了，相当的方便，这才是我们xHTML+CSS制作页面提倡的样式。

4)导入样式
导入样式和链接样式比较相似，采用import样式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌样式。  具体导入样式和链接样式有什么区别，可以参看这篇文章《CSS:@import与link的具体区别》，不过我还是建议大家用链接样式！

第二：四种样式的优先级
      如果这上面的四种样式中的两种用于同一个页面后，就会出现优先级的问题，这里我就不再举例子来说明了，大家在下面自己证明一下下面的结论:

四种样式的优先级按照“就近原则”：行内样式 > 内嵌样式 > 链接样式 > 导入样式。

 

【基础二】CSS选择器

        上节课我们讲了一下CSS通过什么方式去控制页面，如果不记得，我来帮大家回忆一下，总共有四种样式(方式)行内样式、内嵌样式、链接样式、导入样式，大家通过这四种样式(方式)就可以实现CSS对HTML页面样式的控制，如果要让这些样式对HTML页面中的元素实现一对一，一对多或者多对一的控制，这就需要用到CSS选择器，HTML页面中的元素就是通过CSS选择器进行控制的。

CSS选择器最基本的有四种：标签选择器、ID选择器、类选择器、通用选择器。

【标签选择器】
      一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式，比如，在style.css文件中对p标签样式的声明如下：

  1. p{
  2. font-size:12px;
  3. background:#900;
  4. color:090;
  5. }

 

        这么做，会使页面中所有p标签的背景都是#900(红色)，文字大小均是12px，颜色为#090(绿色)，这在后期维护中，如果想改变整个网站中p标签背景的颜色，只需要修改background属性就可以了，就这么容易!当然你也可以设置整个页面中所有的div的属性、a链接的属性、span的属性，这么做方便是方便，但是不够灵活，如果页面中除了某个p标签背景不是红色外，其他的都是红色，就不能用这种方法定义了。

【ID选择器】
     ID选择器在某一个HTML页面中只能使用一次，就像只有一个身份证 (ID)一样，不重复！在页面中使用ID选择器更具有针对性，如：

      先给某个HTML页面中的某个p标签起个ID，代码如下：

<p id="one">W3CFuns.com:打造中国Web前端开发人员最专业的贴心社区！</p>
在CSS中定义ID为one的p标签的属性，就需要用到“#”，代码如下：

  1. #one{
  2. font-size:12px;
  3. background:#900;
  4. color:090;
  5. }


        这样页面中的某个p就会是CSS中定义的样式。针对“页面中除了某个p标签背景不是红色外，其他的都是红色的”情况，我们就可以用ID选择器单独定义那个背景不为红色的p标签，这样问题就解决了。

【类选择器】
这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式，就像国庆某个方阵中，肯定都是不同的人，却均穿红色衣服，手中高举花环，样式都是一样的，如果想让这一类人都有共同的样式，该怎么做呢~呵呵，和ID选择器的用法类似，只不过把id换做class，如下：

  1. <p class="one">此处为p标签内的文字</p>


如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下：

  1. <div class="one">此处为DIV标签内的文字</div>


这样页面中凡是加上class="one"的标签，样式都是一样的了~
CSS定义的时候和ID选择器差不多，只不过把#换成.，如下：

  1. .one{
  2. font-size:12px;
  3. background:#900;
  4. color:090;
  5. }


补充：一个标签可以有多个类选择器的值，不同的值用空格分开，如：

  1. <div class="one yellow left">一个标签可以有多个类选择器的值</div>

这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用

  1. <div id="my" class="one yellow left">ID和class可同时应用到同一个标签</div>


【通用选择器】
到这里，前三种基本的选择器说完了，但是还需要给大家介绍一个CSS选择器中功能最强大但是用的最少的一种选择器“通用选择器”，就是“*”星号。

  1. *{此处为CSS代码}

       强大之处是因为他对整个网页中所有HTML标签进行样式定义，这种功能类似“标签选择器”，覆盖的对象更加广泛，是整个HTML的所有标签，功能是强大，但是这样反而限制了它的灵活性。

        对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端：

  1. *{margin:0; padding:0;}

 

        为什么要这么用呢，因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS 文件，但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对HTML标签重置，就是上面的代码了，但是这样也有不好的地方，因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，用到哪些标签就定义哪些标签，如下:

  1. body,div,p,a,ul,li{margin:0; padding:0;}


如果还需要dl、dt、dd标签重置，那就在上面加上就可以了，如下:

  1. body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

用到哪些就写哪些，这点也可以看做衡量页面重构师制作页面水平的高低，以及是否专业的一个方面。

下面就继续讲解一下“选择器的集体声明”和“选择器的嵌套”

【选择器的集体声明】
        在我们使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如：

  1. h1,h2,h3,h4,h5,h6{color:#900;}


还有像上面刚刚讲的标签重置，就是利用的选择器的集体声明：

  1. body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}

 

再举个例子，无论什么样的选择器，“标签选择器”，“ID选择器”，“类选择器”，只要是选择器，只要有公共的CSS代码，就可以用“选择器的集体声明”，起到精简代码的作用，有一段代码如下： 

  1. #header{font-size:14px; background:#ccc;}
  2. div{font-size:14px; width:960px;}
  3. .blue{font-size:14px; color:#009;}
  4. .h1{font-size:14px; font-weight:normal;}

我们就可以将上面的代码进行精简，把公共的CSS代码用选择器的集体声明提取出来，有点类似小学的“提取公因式”似的，如下：

  1. #header,div,.blue,h1{font-size:14px;}
  2. #header{background:#ccc;}
  3. div{width:960px;}
  4. .blue{color:#009;}
  5. .h1{font-weight:normal;}

       这是选择器的集体声明的经典应用，把共同的部分提取出来，这么做的好处，相同的部分共同定义，不同的部分单独定义，保证风格统一，样式修改灵活，这也是优化CSS代码的一块，要记住！

【选择器的嵌套】
选择器也是可以嵌套的，如：

  1. #div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/

       这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器，CSS代码不就少了嘛~同样也是CSS代码优化的一块。

 

posted @ 2015-12-03 11:26  muzinan110  阅读(167)  评论(0)  编辑  收藏  举报