黑马程序员_Html中Css样式整理

------- Windows Phone 7手机开发、.Net培训、期待与您交流！ -------

CSS样式:

Css(层叠样式表)是用来美化页面用的，可以对页面元素进行更精细的设置。样式主要描述元素的字体颜色、背景颜色、边框等。CSS主要有元素内联、页面潜入和外部引用三种使用方式。CSS是描述元素的皮肤！

Css的三种主要使用方式：

元素内联：

         直接将样式写入元素的style属性中.<input type=”text” readonly=” readonly” style=”background-color:#FF00FF”/>,适用于样式没有可复用性的场合。

页面嵌入：在head中加入  

<style type=”text/css”>

                   input{border-color:Yellow;color:Red;}

         </style>

表示页面中所有input标签都将采用此种样式。适用于样式复用，减少页面体积

外部引用：将CSS样式内容写入一个css为后缀的css样式表中，然后在页面中引用。

                   在head中加入

                   <link type=”text/css” rel=”Stylesheet” href=”s1.css”/>

                   适合于多个页面共享css样式。

样式：

常见的样式：

Css计量单位：css中表示宽度、距离时的计量单位：px（像素）、30%(百分比)、em(相对单位)等。一般用px比较多。width:30px.

Background-color:Red;背景颜色   color:Red;  文本颜色

Border-style:solid;  边框样式，实线（默认没有边框），dotted(点)等值；border-color:Red;边框颜色；border-width:1px;边框宽度（默认为0）

Display:元素是否显示，可选值none(不显示)、block(显示为块级元素，此元素前后会带有换行符)等。

cursor:鼠标在元素上时的光标图标，可选值：cursor（默认光标）、pointer(超链接的小手)、wait（忙的沙漏）、help（帮助）等。cursor:help;

Li不显示内容前的圆点：LIST-STYLE-TYPE:none;一般设在li或者ul上。

   

样式选择器：

对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素。样式选择器一共有三种：标签选择器、class选择器和id选择器。

标签选择器：

 标签名{样式}，对于制定的标签采用统一的样式。

 Input{color:Red;}

Class选择器：定义一个命名的样式，然后在用到它的时候设定元素的class属性为样式的名称，可以同时设定多个class,名称之间加空格。

<div class="waring">你好</div>

<div class="highlight">我好</div>

<div class="highlight waring">我们都好</div>   可设定多个class

定义样式：样式名开头加“.“

.waring

        {

           background-color:Yellow;

           }

        .highlight

        {

           font-size:xx-large;cursor:help;

           }

Id选择器：

为指定id的元素设定样式,id选择器名称前加#.

<input id=”username”>你好</input>

# username

         {

         Font-size:xx-large;

}

Style、class可以同时组合使用

<input id=”username” class=”account” style=”font-size:xx-large” type=”text”>你好</input>

标签+class选择器：

        class选择器也可以针对不同的标签，实现同样的样式名对于不同的标签有不同的样式，只要在样式名前加标签名即可。

<inputclass="accountno"type="text" value="1111111111111"/>

<labelclass="accountno">222222222222222</label>   <br/>

input.accountno

        {

           text-align:right;color:Red;

           }

label.accountno

        {

           font-style:italic;

           }

关联选择器：

表示p标签内的strong标签内的内容使用的样式

P strong  

        {

           background-color:Yellow;

           }

<strong>huxheudieihdue</strong>

<p><strong>hduiehfui</strong></p>

组合选择器：同时为多个标签设定一个样式

H1,H2,input

        {

           background-color:Green;

           }

伪选择器：为标签的不同状态设定不同的样式。像超链接。

A:visited:超链接点击过的样式;A:active:选中超链接时的样式；A:link:超链接未被访问时的状态；A:hover:鼠标移动到超链接时的状态。

 

Css通过样式选择器和元素内联等对页面的样式进行设定，使页面效果更佳。