CSS 简介

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› CSS›CSS教程

原作者: [db:作者] 来自: [db:来源] 收藏邀请

CSS概述

1. Cascading Style Sheets 层叠样式表，它可以控制多重网页的样式和布局；

2. 需具备的基础知识：HTML、XHTML；

3. 主要实现：

样式

----- 定义如何显示 HTML 元素；

----- 存储在样式表中；

----- 添加到 HTML4.0 中，解决内容与表现分离；

----- 多个样式定义可以层叠为一。

CSS解决的问题--更好的利用HTML

1. 背景

HTML 标签原本被设计为用于定义文档内容。即通过使用 <h1>、<p>、<table> 这样的标签，来表达“这是标题”、“这是段落”、“这是表格”之类的信息。

同时文档的布局由浏览器来完成，而不使用任何的格式化标签。

由于两种主要的浏览器（Netscape和Internet Explorer）不断地将新的 HTML 标签和属性（比如字体标签和颜色属性）添加到 HTML 规范中，创建文档，内容清晰地独立于文档表现层的站点变得越来越困难。

2. 样式

为解决这个问题，样式（Style）肩负起了 HTML 标准化的使用，这样所有的主流浏览器均支持层叠样式表；
极大地提高了工作效率。样式表定义如何显示 HTML 元素，就像 HTML3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。
多重样式层叠为一个。样式表允许以多种方式规定样式信息。它可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。
甚至可以在同一个 HTML 文档内部引用多个外部样式表。

例子

CSS代表层叠样式表。它定义如何显示 HTML 元素。

以下 HTML 代码包含样式的 CSS。

<!DOCTYPE HTML> 
<html> 
    <head> 
        <style> 
        a {
            background-color:grey; 
            color:white 
        } 
        </style> 
    </head> 
    <body> 
        <a href = "https://www.ogeek.cn">Visit the website</a> 
    </body> 
</html>

上面的代码设置背景颜色和前景颜色。

样式通常保存在外部 .css 文件中。

浏览器样式

浏览器使用级联和继承来确定在显示元素时要用于属性的值。

每个元素都有一些 CSS 属性。

对于每个属性，浏览器需要遍历所有样式的源。

你已经看到了三种不同的方式来定义样式

内联
嵌入式
外部样式表

还有两个其他的样式来源，你需要知道。

如果没有指定其他样式，浏览器样式或用户代理样式是浏览器应用于元素的默认样式。

这些样式在浏览器之间略有不同。

以下代码显示了一个不包含样式的简单 HTML 文档。

<!DOCTYPE HTML>
<html>
<body>
    <a href="https://www.ogeek.cn">Visit the website</a>
    <p>I  like <span>apples</span> and oranges.</p>
    <a href="https://www.w3.org" rel="external nofollow" target="_blank" >Visit the W3C website</a>
</body>
</html>

链接的文本内容显示为蓝色，带下划线。

浏览器正在应用类似于以下代码中所示的样式。

a  {
    color: blue;
    text-decoration:  underline;
}

浏览器没有每个 HTML 元素的默认样式。

小结

以上是从CSS的基本作用谈起的，它内部的需要基础知识，在下文中会提到，如 CSS 基础语法、选择器、样式、框模型定位等内容。

鲜花

握手

雷人

路过

鸡蛋

该文章已有0人参与评论

请发表评论

全部评论

专题导读

More+

看这一篇就够了,css选择器知识汇总发布时间：2022-01-31

CSS 测验发布时间：2022-01-31

客服电话

电子邮件

CSS 简介

CSS概述

CSS解决的问题--更好的利用HTML

例子

浏览器样式

小结

请发表评论

全部评论

上一篇：

下一篇：

关于我们

产品与服务

解决方案

139-2527-9053