1. Cascading Style Sheets 层叠样式表,它可以控制多重网页的样式和布局;
2. 需具备的基础知识:HTML、XHTML;
3. 主要实现:
样式
----- 定义如何显示 HTML 元素;
----- 存储在样式表中;
----- 添加到 HTML4.0 中,解决内容与表现分离;
----- 多个样式定义可以层叠为一。
1. 背景
HTML 标签原本被设计为用于定义文档内容。即通过使用 <h1>、<p>、<table> 这样的标签,来表达“这是标题”、“这是段落”、“这是表格”之类的信息。
同时文档的布局由浏览器来完成,而不使用任何的格式化标签。
由于两种主要的浏览器(Netscape和Internet Explorer)不断地将新的 HTML 标签和属性(比如字体标签和颜色属性)添加到 HTML 规范中,创建文档,内容清晰地独立于文档表现层的站点变得越来越困难。
2. 样式
CSS代表层叠样式表。它定义如何显示 HTML 元素。
以下 HTML 代码包含样式的 CSS。
<!DOCTYPE HTML>
<html>
<head>
<style>
a {
background-color:grey;
color:white
}
</style>
</head>
<body>
<a href = "https://www..cn">Visit the website</a>
</body>
</html>
上面的代码设置背景颜色和前景颜色。
样式通常保存在外部 .css 文件中。
每个元素都有一些 CSS 属性。
对于每个属性,浏览器需要遍历所有样式的源。
你已经看到了三种不同的方式来定义样式
如果没有指定其他样式,浏览器样式或用户代理样式是浏览器应用于元素的默认样式。
这些样式在浏览器之间略有不同。
以下代码显示了一个不包含样式的简单 HTML 文档。
<!DOCTYPE HTML>
<html>
<body>
<a href="https://www..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 基础语法、选择器、样式、框模型定位等内容。
响应式 Web 设计 - 网格视图什么是网格视图? 很多网页都是基于网格设计的,这说明网页是按列来布局的。使用网格视图有助于我们设...
我们都知道 HTML 和 CSS 是作用不相同的两种语言,但是它们对一个网页能够同时产生作用,网页(webPage)= 内容(html) + 表现...