CSS 温故知新 00

最新推荐文章于 2025-09-08 21:21:23 发布

weixin_30764137

最新推荐文章于 2025-09-08 21:21:23 发布

阅读量91

点赞数

CC 4.0 BY-SA版权

文章标签：人工智能

原文链接：http://www.cnblogs.com/haixiaomei/p/css0.html

CSS：Cascading Style Sheet:层叠样式表单

——增强控制网页样式

——允许将样式信息&网页内容分离

——标记性语言

3 ways add CSS

——最接近目标的样式定义优先权越高

——高优先权样式继承低优先权样式的未重叠定义BUT覆盖重叠的定义

！important：提升样式规则应用优先权【IE 4+】

div {
        color:blue!important;
    }

way 1：外联样式表

Linking to a Style Sheet
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>add css</title>
    <link rel="stylesheet" type="text/css" href="00.css">
</head>
<body>
    
</body>
</html>

PS：当然还有 @import 的导入方式，也是外部导入样式表——不过不推荐

　　<link> 是 HTML 标签，

@import 是 CSS 应该写在 CSS 中【开头】

@是 CSS2.1 概念，有的版本低浏览器可能无法正确导入外部样式文件

当 HTML 文件被加载时， link 文件同时被加载

while @ 文件 wait 页面全部下载完毕 then 被加载

way 2：内嵌样式表

——HTML标签选择器

——ID选择器（use # 开头）

——class类选择器（use . 开头）

Embedding a Style Block
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>add css</title>
    <!-- <link rel="stylesheet" type="text/css" href="00.css"> -->
    <style type="text/css">/*text/css:allow browsers which do not support this kind of style ignore css*/
    body {
        background-color: lightblue;
    }
    p {
        color: red;
    }
    </style>
</head>
<body>
    <p>I am para</p>
</body>
</html>

way 3：内联（行内）样式

</head>
<body>
    <p style="color:red">I am para</p>
</body>
</html>

CSS Syntax 语法

Selector {
    property:value;
}
选择符 {
    属性：属性值；
}

Inherit Value：继承值

Each property has a pointed value： Inherit

which means——将父对象的值等同为计算机值得到

——this value 通常为备用

——显示声明it can 用来强调

________________________________________________________________________

当然除了以上3种方式

还要考虑复杂内联外联内部一起使用的场景，此时优先级就很重要了

多重样式优先级

内联样式 then 内部样式 then 外部样式 then 浏览器默认样式

Inline Style > Internal style > External style > browser

!!! If 外部样式放在内部样式后面， then 外部样式覆盖内部样式！！！

1. 通用选择器 *{}

2. 元素（类型）选择器 = 标签选择器 span{} =伪元素选择器 ::before{}

3. 类选择器 .class{}

4. 属性选择器 a[href="xxx.com"]{}

5. 伪类选择器 :hover

6. ID 选择器 #id{}

7. 内联样式

以上 7 种组合——

—— 后代选择器 .father .child{}

—— 子选择器 .father > .child{}

—— 相邻选择器 .bro1 + .bro2{}

！important 规则除外！！！

尽管！important 与优先级没有关系BUT

——！！！当！important 规则被用于一个样式声明中时，此样式声明就会覆盖 CSS

中其它任何声明！！！【no matter where 】

Cause ！important 改变了样式表本来的级联规则！！！不推荐使用呀~~~

这里！important 拥有最高优先权

—— when need 覆盖全站 or 外部 CSS 的特定页面时， use ！important

—— 全站范围、插件中 DO NOT USE !important！！！

转载于:https://www.cnblogs.com/haixiaomei/p/css0.html