1.为什么需要CSS?
HTML 标签原本被设计为用于定义文档内容。通过使用 <h1>、<p>、<table> 这样的标签，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。同时文档布局(比如字体啥颜色，是否缩进等样式)由浏览器来完成，而不使用任何的格式化标签。由于两种主要的浏览器（Netscape 和 Internet Explorer）不断地将新的 HTML 标签和样式（如字体标签和颜色属性）添加到 HTML 规范中，创建文档内容清晰地独立于文档表现层的站点变得越来越困难。
为了解决这个问题，万维网联盟（W3C），这个非营利的标准化联盟，肩负起了 HTML 标准化的使命，并在 HTML 4.0 之外创造出样式（Style）。目前所有的主流浏览器均支持层叠样式表。为了让网页元素的样式更加丰富，也为了让网页的内容和样式能拆分开，CSS由此思想而诞生，CSS是 Cascading Style Sheets 的首字母缩写，意思是层叠样式表。有了CSS，html中大部分表现样式的标签就废弃不用了，html只负责文档的结构和内容，表现形式完全交给CSS，html文档变得更加简洁,也将文档的显示样式和结构内容实现了解耦，开发起来更加灵活。
样式表定义如何显示 HTML 元素，就像 HTML 3.2 的字体标签和颜色属性所起的作用那样。样式通常保存在外部的 .css 文件中。通过仅仅编辑一个简单的 CSS 文档，外部样式表使你有能力同时改变站点中所有页面的布局和外观。由于允许同时控制多重页面的样式和布局，CSS 可以称得上 WEB 设计领域的一个突破。作为网站开发者，你能够为每个 HTML 元素定义样式，并将之应用于你希望的任意多的页面中。如需进行全局的更新，只需简单地改变样式，然后网站中的所有元素均会自动地更新。
2.什么是CSS
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素，比如字体颜色，大小，是否加粗，缩进等样式。
样式通常存储在样式表中，这样文档的样式实现了与内容解耦开发。
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一混合使用，一个样式表也可以渲染多个文档内容模块
3.CSS的使用
3.1 css基本语法
选择器是将样式和页面元素关联起来的名称(如标签名），属性是希望设置的样式属性每个属性有一个或多个值
选择器 { 属性:值; 属性:值; 属性:值;}
3.2CSS页面引入的方法
1、外联式：通过link标签，链接到外部样式表到页面中
<link rel="stylesheet" type="text/css" href="css/main.css">
一般HTML文档内容和渲染其的样式表分开文件存储，如下，在当前文件夹CSS下，新建一个main.css文件，在里面写上对div模块文档样式的渲染语法如下:
div{
font-size:20px;
color:red;
}
2、嵌入式：通过style标签，在网页上创建嵌入的样式表
这种用法一般可以在网站的首页中使用，将样式表直接嵌入到HTML,有利于性能的优化，这样用户在访问网页首页的时候可以快速进行加载，比如淘宝网首页就是如此使用。
<style type="text/css">
div{ width:100px; height:100px; color:red }
......
</style>
3、内联式：通过标签的style属性，在标签上直接写样式
这种方式不需要选择器，直接通过属性的方式实现样式内嵌。
<div style="width:100px; height:100px; color:red ">......</div>
下面演示3种CSS页面引入方法的使用，这样CSS的使用，将文档的内容与样式解耦了，HTML只负责了文档的结构和内容，CSS负责文档内容的样式渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 第一种插入样式的方式 外链式 -->
<link rel="stylesheet" type="text/css" href="css/main.css">
<!-- 第二种插入样式的方式 内嵌式 -->
<style type="text/css">
h1{ <!--这里选择器h1表示对所有h1标签进行渲染。-->
font-size:20px;
color:gold;
}
</style></head>
<body>
<h1>页面标题</h1>
<div>这是一个div标签</div>
<!-- 第三种插入样式的方式 行内样式 -->
<a href="http://www.baidu.com" style="font-size:20px;color:pink">百度一下</a></body>
</html>www.121mu.com/lnzt149/
扫一扫
59
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
