一个标签多个css属性

来源：互联网发布：学做淘宝到哪里去学编辑：程序博客网时间：2024/06/08 12:13

css样式有三种类型：

1、内联式-----将css代码直接写在html中.

用 <style> 标记将样式定义为内部块对象.

示例代码如下：

 <style type="text/css">        p{            color: #ff22dd;            font-size: 14px;        }</style>

内联 CSS 可以有效减少 HTTP 请求，提升页面性能，缓解服务器压力。由于浏览器加载完 CSS 才能渲染页面，因此能防止 CSS 文件无法读取而造成页面裸奔的现象。

2、外联式-----将CSS代码作为文件单独存放，如以aaa.css文件包含所有样式。

在HTML 中的外部级联采用 <link> 标记语句来引入。

示例代码如下：

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

3、嵌入式-----将CSS代码直接添加于所修饰的标记元素。

示例代码如下：

<pre name="code" class="html"><div style="float:right;margin-right:20px;padding:4px;">Test</div>

对于一个标签的同一个属性，若具有多个css样式，则要进行选择，即有优先级。

1. 嵌入式 >> 内联式>> 外联式

2. 如果css样式都是内联式，且同一标签同一属性有多个css，需要考虑权值，权值越高，优先选择

普通标签 : 权值为1

类选择符：权值为10

ID选择符：权值为100

e.g:显示红色

        /*权值100*/        #e{            color: red;        }        /*权值2*/        div p{            color: black;        }        /*权值1*/        div,p{            color: orange;        }        /*权值1*/        p{            color: green;        }        /*权值11*/        .em p{            color: blue;        }<pre name="code" class="html"><body><p>first</p><div class="em">    <p  style="text-align: left" id="e">测试</p></div></body>

如果权值相同，则选择距离标签最近的css样式

3.最高权值

关键字！important 可以指明当前属性值最高权值，优先使用

甚至优先选在嵌入式之前

e.g:显示粉色

        /*权值100*/        #e{            color: red ;        }        p{            color: pink !important;        }    </style></head><body><div class="em">    <p  style="text-align: left ;color: black" id="e">测试</p></div>

对于同一标签的不同属性，则可以进行叠加显示

e.g:显示黑色字，并且有边框，字体为Arial

        /*权值2*/        div p{            color: black;        }        /*权值1*/        div,p{            color: orange;            border: 1px solid seashell;        }        /*权值1*/        p{            color: green;            font-family: Arial;        }

0 0