黑马程序员——09 Css，样式表

——样式表，css基本概念

（用于美化页面）

样式表：主要描述元素的字体颜色，背景颜色，边框等

Css（层叠式样式表）：

1.        元素内嵌：

直接将样式写入元素的style属性中,如：

<inputtype="text"value="任意初值"readonly="readonly"style="background-color:Red"/>

适用于样式没有可复用性的场合

2.        页面嵌入:

在head标签中加入:

<styletype="text/css">

        input {border-color:blue;color:red}

</style>

表示页面中所有input都是采用指定的样式，适用于样式复用，减小页面体积

3.        外部引用:

在head标签中引用写有css内容后缀为css的文件：

<linktype="text/css"rel="stylesheet"href="css1.css">

表示页面中都采用在css1中设置好的指定样式，适用于样式复用

 ——常见样式

1.        Css中的计量单位：

     Px：像素

     %：百分比

     em:相对单位

2.        background-color：背景颜色

3.        color：文本颜色

4.        border-style：边框风格（默认为none）

5.        border-color：边框颜色

6.        border-width：边框宽度（默认0）

border类整合实例：

<div><style=border-color="Red"border-width="1px"border-style="dotted">你好</div>

7.   Display：元素是否显示

可选值：

None：不显示

Block：显示为块级元素，此元素前后会带有换行符

Inline：显示为内联元素，元素前后没有换行符

8.        Cursor：鼠标在元素上时显示的光标图标

可选值：

<listyle="cursor:可选值">你好</li>

Cuisor：默认光标

Pointer：超链接上的手

Text：输入bean

Wait：忙沙漏

Help：帮忙

9.        LI：不显示圆点：list-style-type：none，一般设在li或ul上

——样式选择器

(在<styletype="text/css"></style>标签内)

（对于非元素内联的样式需要定义样式选择器，通俗的说就是这个样式适合于哪些元素）

1.        标签选择器：对于指定的标签采用统一的样式

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

规则：样式名称开头加”.“+自定义名+{自设置属性}

     例如：.highlight {font-size:xx-large;color:blue}

     引用：<liclass="highlight">你好</li>

3.        标签+class选择器：因为class选择器针对不同标签，所以同样的样式对于不同的标签有不同的样式，只要标签名后加样式名即可

规则：样式名称中有html中的标签名+”.”+{自设置属性}

     例如：input.highlight {font-size:xx-large;color:blue}

     引用：<inputclass="highlight"type="button"value="确定"></input>

4.        Id选择器：为指定的元素设定样式

规则：在id前必须加#

      例如：#username {font-size:xx-large;color:blue}

      引用：<input id="username"class="highlight"value="你好"></input>

5.        伪选择器：为标签的不同状态设定不同的样式

规则：

     A：visiter：超链接点击过的样式

      例如：A:visited {text-decoration:none}

     A：active：选中超链接时的样式

      例如：A:active {text-decoration:none}

     A：link：超链接未访问时的状态

      例如：A:link {text-decoration:none}

     A：hover：鼠标移到超链接的状态

      例如：A:hover {text-decoration:underline}

6.        *关联选择器：

规则: 标签名+空格+自定义名称+{自设置属性}

    例如：phighlight {background-color:yellow}

    引用：</p><highlight>你好</highlight></p>

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

  规则：标签名1+”,”+标签名2{自设定属性}

    例如：h1,h2,input {font-size:xx-large;color:blue}

   引用: <h1class="highlight">你好</h1>

               <h2class="highlight">你好</h2>

               <inputclass="highlight"value="你好"></input>

——样式优先级

最后设置的属性优先级最高

当style与class冲突时，style优先级最高