日期:2014-05-17  浏览次数:20603 次

HTML-->CSS

HTML-->CSS

《CSS学习网站》:http://www.w3school.com.cn/css/index.asp

  • Cascading style Sheets 级联样式表
  • CSS控制页面的样式,如字体,大小等,JS则负责动作。
  • <style type="text/css">
        .mycss {
                 color:#ff0000;
         }
    
    </style>
    
    <body>
            <p class="mycss">这个段落运用了mycss样式</p>
            <p style="color:red">这个是行内样式</p>
    </body>
    ?-行内样式:<p style="color:red" font-size:"36px">行内样式</p>,直接使用style属性的样式。缺点:内容与显示耦合,而且不利于复用。不推荐使用行内样式。

? ? ? ? ? ?-内部样式:在html页面中包含的样式,可以简单实现复用。

? ?

? ? ? ? ? -外部样式:

<link href="mycss.css" rel="stylesheet" type="text/css"/>
  • ?命名规范划分

----类选择器:名字前面点号,使用控件的class属性调用;

例如:要把表格中的字体改成25px,则可以定义一个css样式如下,

?

.tablecss{
      font-size="25px";
}
<table class="tablecss">
</>

?但是如果有多个表格,则每个table都要加入class属性,过于繁琐,则使用上下文样式。

?

----上下文样式(覆盖样式),名称,有限,与html标签名称相同,不用使用class关键字,默认家在样式。

?

body{
     background-color:#FF0000;
}

? -----链接样式:有4中链接样式。

? —>没有访问过的:

?

a:link{
     color:#0000FF;
}

?

? —>访问过的:

?

a:visited{
       color:#FF0000;
}

?

? —>鼠标放上去:

?

a:hover{
        color:#66FF00;
}

?

? —>鼠标按下去:

?

a:active{
        color:#000000;
}
  • ?id选择器:基本上与类选择器一样,通过#,id属性主要是为了后期客户端编程服务,一般只有层使用id选择器。

?

?

? ? ? ??

?