CSS概述

最新推荐文章于 2024-03-25 20:16:44 发布

零zero度

最新推荐文章于 2024-03-25 20:16:44 发布

阅读量175

点赞数

分类专栏：基础 web

本文链接：https://blog.csdn.net/qq_38636998/article/details/83343089

版权

基础同时被 2 个专栏收录

54 篇文章 0 订阅

订阅专栏

web

34 篇文章 0 订阅

订阅专栏

CSS概述

一、什么是CSS?

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS 文件中
多个样式定义可层叠为一

二、为何使用CSS？

CSS帮助您将文档信息的内容和如何展现它的细节相分离,如何展现文档的细节即为样式(style)。您可以将样式从它的内容分离出来，能使我们在开发中：

避免重复
更容易维护

三、发展史

1996年12月，发布了CSS 1.0规范。
1998年 5月，发布了CSS 2.0规范。
2004年 6月，发布了CSS 2.1规范。
2011年 9月，发布了CSS 3.0规范。

四、如何使用CS

1、外部样式表(External style sheet)

说明

就是把css样式代码写在单独的一个文件中,文件以“.css”为扩展名，在 head 标签内使用 link 标签,将 css 样式文件链接到HTML文件内,当样式需要应用于很多页面时，一般我们都会使用外部样式表

示例代码

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

特点

1、外部式css样式，写在单独的一个文件中

注意事项

1、css样式文件名称以有意义的英文字母命名，如 main.css。

2、rel=“stylesheet” type=“text/css” 是固定写法不可修改。
3、link 标签位置一般写在 head 标签之内最上面。

2、内部样式表(Internal style sheet)

说明

 把样式代码写在 <style type="text/css"></style> 标签之间,
 当单个文档需要特殊的样式时，就应该使用内部样式表,我们可以使用 <style> 标签在文档头部定义内部样式表

示例代码

<head>
  <style type="text/css">
        div{
            width: 50px;
            height: 50px;
            background: red;
        }
    </style>
</head>

注意：

嵌入式css样式必须写在 <style></style> 之间，并且一般情况下内部样式写在 <head></head> 之间

3、内联样式(Inline style)

说明

内联式css样式，直接写在在HTML标签中，同时css样式代码写在 style="" 双引号中，如果有多条css样式代码设置可以写在一起，中间用分号 ; 隔开。当样式只在一个元素使用一次时,可以直接元素上使用sytle属性,由于内联样式跟内容混合在一起,一般在开发中尽量不使用

注意：这种写法不推荐使用，特别是对新手来说。这也完全违背了HTML内容和CSS样式显示分离的思想。

示例代码

<div style="width:50px;
            height:50px;
            background:red">
</div>

4、多重样式(样式继承)

说明

如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来

示例代码

 <head>
    <style type="text/css">
        p{
            color:red;
            text-align:center;
            font-size:16px;
        }
        p{
            font-size:20px;
        }
    </style>
</head>

那么最终我们设置的p标签的样式应该为

p{
 color:red;
 text-align:center;
 font-size:20px;
}

一般情况下的优先级

优先级：权值相同的条件下，遵循的是就近原则（离被设置元素越近优先级别越高）。

（内联样式）Inline style > （内部样式）Internal style sheet
 >（外部样式）External style sheet > 浏览器默认样式

5、权重计算

详细说明查看网站

http://www.nowamagic.net/librarys/veda/detail/1606
经验

1、要优化考虑使用样式规则的优先级来解决问题而不是 !important

2、永远不要在全站范围的 css 上使用!important

3、永远不要在你的插件中使用 !important

零zero度

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS概述

CSS概述一、什么是CSS?CSS 指层叠样式表 (Cascading Style Sheets)样式定义如何显示HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS 文件中多个样式定义可层叠为一二、为何使用CSS？CSS帮助您将文档信息的内容和如何展现它的细节相分离...
复制链接

扫一扫