CSS 简明教程 - 简介 - 简单教程，简单编程

在深入研究 CSS 之前，我们需要了解 CSS 和其它相关 Web 技术的背景

CSS 是什么

CSS 的全名是 Cascading Style Sheets，中文全名层叠样式表，用于指定如何显示 HTML 元素

HTML 的 CSS 样式通常存储在样式表中

HTML 中的 CSS 样式有三种存放位置：

使用 <link> 标签链接到外部样式表 .css 文件

这种外部样式表可以被多个页面引用，因此可以显著提高加载和修改效率

例如，本站源码中的
```
<link rel="stylesheet" type="text/css" media="screen"  href="/css/forum.css?v=2.5.0-dev-7" />
```
放在 <style> 标签内部的 CSS 样式

这种样式写法会影响当前页面的所有元素

例如
```
p {color:red}
```
放在标签元素 style 属性内的内联样式

这种样式写法只会影响当前标签，例如
```
<p style="color:red"></p>
```

需要注意的是它们的优先级，除了内联样式一定会覆盖第一第二种写法外，第一第二种写法的优先级取决于它们的位置

CSS 解决了什么问题？

HTML 标签最初的设计是用于定义文档内容

通过使用 <h1>、<p> 和 <table> 等标签，我们可以表达相应的信息，例如「这是一个标题」、「这是一个段落」、「这是一个表哥」

例如

<h1>这是一个标题</h1>

<p>这是一个段落</p>

我们可以使用浏览器来处理文档的布局

在 CSS 创建之前的日子里，仅仅依赖 HTML 文档来渲染网页变得越来越困难，因为几个主要的浏览器 Chrome 、Internet Explorer 和 Firefox 正在继续向 HTML 添加新的 HTML 标签和属性 ( 例如 font 字体标记和 color 颜色属性 ) 规范

为了解决这个问题，为了解决这个问题，万维网联盟 ( World Wide Web Consortium，简称 W3C ) 在 HTML 4.0 之后创建了 CSS（层叠样式表 )

从那时开始，我们就不再需要也不建议在 HTML 文档中定义复杂样式，因为所有主流浏览器都支持 CSS

HTML, CSS, 和 JavaScript 之间的关系

HTML，CSS 和JavaScript 是网站开发领域最基本的三项技术

HTML 用于定义 HTML 文档并描绘在页面上要包含的元素，简单来说，就是定义文档的骨架
CSS 用于定义样式并指定元素在页面上如何显示，简单来说就是定义文档的肌肉和皮肤，人要漂亮，肌肉和皮肤都重要
JavaScript 用于定义操作，例如，你可能希望在单击按钮后触发一系列事件，简单来说就是定义文档的行为举止

下面的代码是一个简单的例子，也许你可以自己尝试更好地理解

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML,CSS,JavaScript Demo</title>
<style>
.default_head{
    color:black;
    font-size:20px
}

.new_head{
    color:red;
    font-size:30px;
}

.button_style{
    padding:5px;
}

</style>
</head>
<body>

<h1 class="default_head" id="heading">Hello,My First Heading.</h1>

<input type="button" value="Click to change heading style" onclick="changeStyle()" />

<script>
function changeStyle(){
var h1 = document.getElementById('heading');
if(h1.className=='default_head'){
    h1.className = 'new_head';
}
else{
    h1.className = 'default_head';
}
}

</script>
</body>
</html>