Heim > Web-Frontend > HTML-Tutorial > CSS+DIV第一天_html/css_WEB-ITnose

CSS+DIV第一天_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 12:33:34
Original
886 Leute haben es durchsucht

CSS基础

 引用方法:

   基本语句结构:选择符{属性1:属性值1;属性2:属性值2}


   选择符:可以是HTML中任何的标识符,比如TR、TD、P、DIV、IMG甚至BODY都可以作为选


         择符。 选择符中的内容将会以大括号内属性值定义的格式来显示。


  除了选择符外,css还提供了几种选择器来让html调用css:


   群选择器:当几个元素样式属性一样时,可以共同调用一个声明,元素之间用逗号分隔,:


          p, td, li { font-size : 12px ; }


   id选择器:用CSS布局主要用层"div"来实现,而div的样式通过"id选择器"来定义。


           例如我们首先定义一个层


          


           menubar就是我们要用到的样式,在样式表里是这样定义的。


           #menubar {MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666;}


           对,前面加个#即可!


   类别选择器:如果想用class=""来引用样式的话,那么就需要一个类别选择器,其做


             法是在定义在选择符前加一个“.”


             如:.14px {color : #f60 ;font-size:14px ;}


             此时就可以通过来调用了。


--------------------------------------------------------------------


基本的css调用已经复习完了。只要学会了编写css,配合上这些个调用方法,就可以玩转网页喽。
css的属性多的数不胜数,然而和任何一种语言一样,只要掌握了1/3的常用属性,就可以实现90%的功能,
所以我们先捡常用的来学。


css的常用属性:



字体属性:


这是最基本的属性,主要包括以下几个属性:




因为字体属性经常用到,驼驼比较熟悉,就暂且滑过。



颜色和背景属性




用法是这个样子的


属性:background 属性值:||||    
 ||||



此处也不多言,会了用法,用到的时候来抠就行了.



文本属性:



此处不同于上面的字体属性.它涉及到排版:行间距,字间距,文字装饰等等,我得承认,这很重要.




装饰超级链接:


这是比较常见css应用,是的,页面上永远都有那么多超级链接,超级链接的修饰永远都是很重要,
虽然我今天以前从来没仔细看过这一块,但它现在看起来也蛮简单.



CSS中用四个伪类来定义链接的样式,分别是:a:link、a:visited、a:hover和a : active,例如:


a:link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ;text-decoration : none ;color : #c30 ;}
a:hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold ;text-decoration : none ;color : #F90 ;}


以上语句分别定义了"链接、已访问过的链接、鼠标停在上方时、点下鼠标时"的样式。
注意,必须按以上顺序写,否则显示可能和你预想的不一样。记住它们的顺序是“LVHA”。


下面这段代码很有趣,可以点击这里看到它的效果


  
   

link css
   
   
  
  
  


   未访问的链接


   //*加链接,显示三种不同状态,并且定义了链接文本的字体和大小*//
  

访问过的链接


  

鼠标激活的链接


  
  



这个例子是从洪恩在线上copy过来的,驼驼以前做过这种咚咚,copy了一大段的js代码。
这算是种特效吧,而它的原理so easy  驼驼以前不是不会用link的css,只是没有想到。
所以很多时候创造力和想像力是很重要的。

容器属性:虾米是容器?驼驼到现在还没找到一个定律一样的解释。8过,凭经验,<body></body><div></div>、<tr></tr>......类似的标签都是容器。这些标签就像容器,
Nach dem Login kopieren
罐装了我们的网页内容。使他们能在正确的位置来体现。CSS的容器属性包括边距、填充距、边框和宽度、高度、浮动、清除等属性
Nach dem Login kopieren
 <pre class="sycode" name="code">边距属性
Nach dem Login kopieren
例:body{margin:1em 2em 3em 4em}  //*定义文本的上、右、下、左的边距分别为1、2、3、4em*// 
Nach dem Login kopieren
填充距属性
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
例:padding:1em 2em 3em 4em
Nach dem Login kopieren
边框属性
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
看上去很多,实际用起来很方便。
Nach dem Login kopieren
例:P{border:5px double purple}//*定义了四条边框为一样的值*//
Nach dem Login kopieren
图文混排
Nach dem Login kopieren
 
Nach dem Login kopieren
img{margin-right:2em;float:left}//*定义图片的右边距为2em,图片浮动在文字的左边*//
Nach dem Login kopieren
鼠标属性 
Nach dem Login kopieren
 在CSS当中,这种样式是通过“cursor”属性来实现的。Cursor属性有很多的属性值,
Nach dem Login kopieren
  我们来看一下它的详细列表
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
例子:<span style=“cursor:hand”>手的形状</span>
Nach dem Login kopieren
Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage