码迷,mamicode.com
首页 > Web开发 > 详细

CSS

时间:2015-06-02 15:32:56      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:使用   css   继承   层叠   

CSS对HTML文档外观的表现形式进行排版和格式化。

一、使用方式

1. 元素内嵌样式

<p style="color:red;font-size:50px">红色五十像素的文字</p>

2. 文档内嵌样式

<head>
    <style type="text/css">
    p {
        color:red;
        font-size:30px;
    }
    </style>
</head>
<body>
    <p>文字</p>
</body>

3. 外部引用样式

index.html

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

style.css

@charset "utf-8";

p {
    color:red;
    font-size:30px;
}

如有多个CSS文件,可在HTML文件中多次link(preferred),亦可在HTML link的CSS文件中使用import。

二、层叠和继承

1. 层叠:冲突覆盖+不冲突叠加,自带样式元素的样式可被强制覆盖,样式优先级从低到高

①浏览器样式(元素自带样式,例如<b>)

②外部引用样式(<link>元素)、文档内嵌样式(<style>元素),放在后面的优先级更高

③元素内嵌样式(style属性)

强制设为最高优先级,使用important,示例:

color:green !important;

2. 继承:子元素自动获得父元素的外观样式,布局样式(如border)不会被继承,但可使用inherit强制继承。示例:

<head>
    <style type="text/css">
    p {
        color:red;
        font-size:30px;
        border:1px solid blue;
    }
    b {
        border:inherit;
    }
    </style>
</head>
<body>
    <p>红色放大<b>加粗的文字</b></p>
</body>


本文出自 “Julia's Study Note” 博客,请务必保留此出处http://juliastudynote.blog.51cto.com/9954906/1657421

CSS

标签:使用   css   继承   层叠   

原文地址:http://juliastudynote.blog.51cto.com/9954906/1657421

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!