阅读(1816) (0)

CSS 简介

2017-01-05 17:05:32 更新

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.zijiebao.com">Visit the website</a> 
    </body> 
</html>

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

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

浏览器样式

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

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

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

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

  • 内联
  • 嵌入式
  • 外部样式表
还有两个其他的样式来源,你需要知道。

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

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

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

<!DOCTYPE HTML>
<html>
<body>
    <a href="https://www.zijiebao.com">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 基础语法、选择器、样式、框模型定位等内容。