一个标签多个css属性

最新推荐文章于 2024-04-03 22:32:50 发布

Janie.Wei

最新推荐文章于 2024-04-03 22:32:50 发布

阅读量3.3k

点赞数 1

分类专栏： html5/css 文章标签： css选择器权值相同css属性优先选择 html css 标签

本文链接：https://blog.csdn.net/weijie_home/article/details/49475117

版权

html5/css 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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;
        }