编辑器
pycharm | sublime | Hbuild | webstrom | atom
前端:
广义:用户能看见并且交互的展示界面
狭义:运行在浏览器上的页面
语言: html5架构+css3布局+javascript逻辑
网页编写 | 移动端应用编写 |客户端编写
前后台分离 开发模式==>通过接口完成数据交互 =>后台
HTML:超文本标记语言
html:完成页面结构的搭建,属于标记语言:标记语言为非编程语言,不具备编程语言具备的程序逻辑
html三大组成:
标签:被尖括号包裹,由字母开头包含合法字符的,可以被浏览器解析的标记,分为系统标签,自定义标签
指令:被尖括号包裹,由!开头的标记,如<!doctype html> <!-- -->
转义字符:被&与;包裹的特殊字母组合或#开头的十进制数.
标签:
标签的概念:被<>包裹由字母开头,可以结合合法字符(-|数字),能被浏览器解析的特殊符号
标签具有特定的功能:换行|设置页面字符编码集|控制文本字体颜色与大小|加载图片与视频
标签都有头有尾,用/来标识标签的结束(用来标识结尾)
页面:
<!-- -->html注释:一个html页面有且只有一个页面模板
字符编码<meta charset='utf-8'>
常用标签:
div:"三无",无语义,无功能,无样式,完成页面架构的搭建
h1:页面总标题,代表页面'整体含义',出现一次即可
列表:ul>li*n
p:段落标签
img:图片标签,src(数据源),alt(资源加载失败的文本提示)
a:超文本标签,href(超链接地址),target(转跳方式_self|_blank),瞄点
常用的文本类标签:span | i | b
CSS:样式层级表(完成页面布局):
三大组成部分:
选择器:由标签,类,id单独或组合出现
作用域:一组大括号包含的区域
样式块:满足css连接语法的众多样式
选择器:
用来将css与html建立关联的桥梁,称之为css选择器
将原来出现在标签内部的样式分离开来,可以用一个个选择器加以管理,达到页面与样式的解耦合目的
本质:就是页面标签的某种名字
CSS三种引入方式:
行间式:
写在标签的style属性中
,属性与属性值 之间用:赋值
属性与属性之间用;隔开
内联式:
写在style标签中(style标签一般出现在head标签中)
用选择器与html建立连接
样式块书写在作用域内
外联式:
css样式完全与html文件脱离,形成单独的.css文件,样式书写在.css文件中
使用选择器与html建立连接
样式块书写在作用域内
要将.css文件与.html文件建立关联==><link rel="stylesheet" href="css文件的相对路径">
注:选择器的应用场景在内联式 和 外联式
开发:最常用的是外联式,内联与行间辅助样式布局
测试:内联式,可读性最强,且解耦有复用性
行间的应用场景:最简单粗暴,js操作的样式都是行间式
HTML标题是通过<h1>-<h6>标签来定义的
<a href="网址"></a>
<br>换行
<body>元素定义了html文档的主体
<html>元素定义了整个html文档
class为html元素定义一个或多个类名
id:定义元素的唯一id
style:规定元素的行内样式
title:描述了元素的额外信息
<hr>标签在HTML页面中创建水平线
hr元素用于分隔内容
<p>定义段落,浏览器会自动在段落的前后添加空行
html使用标签<b>与<i>对输出的文本进行格式,分别是粗体与斜体
通常标签<strong>替换加粗标签<b>来使用,<em>替换<i>标签使用
<strong>或者<em>意味着你要呈现的文本是重要的,所以要突出显示
<b>定义粗体文字<em>定义着重文字<i>定义斜体字<small>定义小号字<strong>定义加重语气<sub>定义下标字<sup>定义上标字<ins>定义插入字<del>定义删除字<code>定义计算机代码<kbd>定义键盘码<samp>定义计算机代码样本<var>定义变量<pre>定义预格式文本<abbr>定义缩写<address>定义地址<bdo>定义文字方向<blockquote>定义长的引用
默认情况下,链接出现在浏览器中.蓝色,访问过为紫色target属性定义被链接的文档在何处显示,参数有_blank,_parent,_self
在HTML文档中插入ID:
<a id="tips">有用的提示部分</a>
在HTML文档中创建一个链接到"有用的提示部分(id="tips"）"：
<a href="#tips">访问有用的提示部分</a>
或者，从另一个页面创建一个链接到"有用的提示部分(id="tips"）"：
<a href="http://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>
访问有用的提示部分</a>
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>.
1 <base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接: 2 3 <head> 4 <base href="http://www.runoob.com/images/" target="_blank"> 5 </head> 6 <link> 标签定义了文档与外部资源之间的关系。 7 8 <link> 标签通常用于链接到样式表: 9 10 <head> 11 <link rel="stylesheet" type="text/css" href="mystyle.css"> 12 </head> 13 <style> 标签定义了HTML文档的样式文件引用地址. 14 15 在<style> 元素中你也可以直接添加样式来渲染 HTML 文档: 16 17 <head> 18 <style type="text/css"> 19 body {background-color:yellow} 20 p {color:blue} 21 </style> 22 </head> 23 meta标签描述了一些基本的元数据。 24 25 <meta> 标签提供了元数据.元数据也不显示在页面上，但会被浏览器解析。 26 27 META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。 28 29 元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。 30 31 <meta> 一般放置于 <head> 区域 32 <script>标签用于加载脚本文件，如： JavaScript。 33 34 <script> 元素在以后的章节中会详细描述。 35 36 HTML head 元素 37 标签 描述 38 <head> 定义了文档的信息 39 <title> 定义了文档的标题 40 <base> 定义了页面链接标签的默认链接地址 41 <link> 定义了一个文档和外部资源之间的关系 42 <meta> 定义了HTML文档中的元数据 43 <script> 定义了客户端的脚本文件 44 <style> 定义了HTML文档的样式文件
1 CSS 是在 HTML 4 开始使用的,是为了更好的渲染HTML元素而引入的. 2 3 CSS 可以通过以下方式添加到HTML中: 4 5 内联样式- 在HTML元素中使用"style" 属性 6 内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS 7 外部引用 - 使用外部 CSS 文件 8 最好的方式是通过外部引用CSS文件. 9 内联样式 10 当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。 11 12 <p style="color:blue;margin-left:20px;">This is a paragraph.</p> 13 14 HTML样式实例 - 背景颜色 15 背景色属性（background-color）定义一个元素的背景颜色： 16 17 实例 18 <body style="background-color:yellow;"> 19 <h2 style="background-color:red;">这是一个标题</h2> 20 <p style="background-color:green;">这是一个段落。</p> 21 </body> 22 23 HTML 样式实例 - 字体, 字体颜色 ，字体大小 24 我们可以使用font-family（字体），color（颜色），和font-size（字体大小）属性来定义字体的样式: 25 26 实例 27 <h1 style="font-family:verdana;">一个标题</h1> 28 <p style="font-family:arial;color:red;font-size:20px;">一个段落。</p> 29 30 31 HTML 样式实例 - 文本对齐方式 32 使用 text-align（文字对齐）属性指定文本的水平与垂直对齐方式： 33 34 实例 35 <h1 style="text-align:center;">居中对齐的标题</h1> 36 <p>这是一个段落。</p> 37 38 内部样式表 39 当单个文件需要特别样式时，就可以使用内部样式表。你可以在<head> 部分通过 <style>标签定义内部样式表: 40 41 <head> 42 <style type="text/css"> 43 body {background-color:yellow;} 44 p {color:blue;} 45 </style> 46 </head> 47 48 外部样式表 49 当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。 50 51 <head> 52 <link rel="stylesheet" type="text/css" href="mystyle.css"> 53 </head> 54 55 HTML 样式标签 56 标签 描述 57 <style> 定义文本样式 58 <link> 定义资源引用地址
1 在 HTML 中，图像由<img> 标签定义。 2 3 <img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。 4 5 要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。 6 7 定义图像的语法是： 8 9 <img src="url" alt="some_text"> 10 URL 指存储图像的位置。如果名为 "pulpit.jpg" 的图像位于 www.runoob.com 的 images 目录中，那么其 URL 为 http://www.runoob.com/images/pulpit.jpg。 11 12 浏览器将图像显示在文档中图像标签出现的地方。如果你将图像标签置于两个段落之间，那么浏览器会首先显示第一个段落，然后显示图片，最后显示第二段。 13 14 HTML 图像- Alt属性 15 alt 属性用来为图像定义一串预备的可替换的文本。 16 17 替换文本属性的值是用户定义的。 18 19 <img src="boat.gif" alt="Big Boat"> 20 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。 21 22 HTML 图像- 设置图像的高度与宽度 23 height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。 24 25 属性值默认单位为像素: 26 27 <img src="pulpit.jpg" alt="Pulpit rock" width="304" height="228"> 28 指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。 29 30 注意: 假如某个 HTML 文件包含十个图像，那么为了正确显示这个页面，需要加载 11 个文件。加载图片是需要时间的，所以我们的建议是：慎用图片。 31 32 注意: 加载页面时，要注意插入页面图像的路径，如果不能正确设置图像的位置，浏览器无法加载图片，图像标签就会显示一个破碎的图片。 33 34 HTML 图像标签 35 标签 描述 36 <img> 定义图像 37 <map> 定义图像地图 38 <area> 定义图像地图中的可点击区域
1 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。 2 实例 3 <table border="1"> 4 <tr> 5 <td>row 1, cell 1</td> 6 <td>row 1, cell 2</td> 7 </tr> 8 <tr> 9 <td>row 2, cell 1</td> 10 <td>row 2, cell 2</td> 11 </tr> 12 </table> 13 HTML 表格和边框属性 14 如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。 15 16 使用边框属性来显示一个带有边框的表格： 17 18 实例 19 <table border="1"> 20 <tr> 21 <td>Row 1, cell 1</td> 22 <td>Row 1, cell 2</td> 23 </tr> 24 </table> 25 HTML 表格表头 26 表格的表头使用 <th> 标签进行定义。 27 28 大多数浏览器会把表头显示为粗体居中的文本： 29 30 实例 31 <table border="1"> 32 <tr> 33 <th>Header 1</th> 34 <th>Header 2</th> 35 </tr> 36 <tr> 37 <td>row 1, cell 1</td> 38 <td>row 1, cell 2</td> 39 </tr> 40 <tr> 41 <td>row 2, cell 1</td> 42 <td>row 2, cell 2</td> 43 </tr> 44 </table> 45 46 漂亮的表格 47 48 HTML 表格标签 49 标签 描述 50 <table> 定义表格 51 <th> 定义表格的表头 52 <tr> 定义表格的行 53 <td> 定义表格单元 54 <caption> 定义表格标题 55 <colgroup> 定义表格列的组 56 <col> 定义用于表格列的属性 57 <thead> 定义表格的页眉 58 <tbody> 定义表格的主体 59 <tfoot> 定义表格的页脚
1 HTML无序列表 2 无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。 3 无序列表使用 <ul> 标签 4 <ul> 5 <li>Coffee</li> 6 <li>Milk</li> 7 </ul> 8 HTML 有序列表 9 同样，有序列表也是一列项目，列表项目使用数字进行标记。 有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。 10 11 列表项使用数字来标记。 12 13 <ol> 14 <li>Coffee</li> 15 <li>Milk</li> 16 </ol> 17 18 HTML 自定义列表 19 自定义列表不仅仅是一列项目，而是项目及其注释的组合。 20 21 自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。 22 23 <dl> 24 <dt>Coffee</dt> 25 <dd>- black hot drink</dd> 26 <dt>Milk</dt> 27 <dd>- white cold drink</dd> 28 </dl> 29 提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。 30 31 32 33 HTML 列表标签 34 标签 描述 35 <ol> 定义有序列表 36 <ul> 定义无序列表 37 <li> 定义列表项 38 <dl> 定义列表 39 <dt> 自定义列表项目 40 <dd> 定义自定列表项的描述
1 HTML <div> 和<span> 2 HTML 可以通过 <div> 和 <span>将元素组合起来。 3 4 HTML 区块元素 5 大多数 HTML 元素被定义为块级元素或内联元素。 6 7 块级元素在浏览器显示时，通常会以新行来开始（和结束）。 8 9 实例: <h1>, <p>, <ul>, <table> 10 11 HTML 内联元素 12 内联元素在显示时通常不会以新行开始。 13 14 实例: <b>, <td>, <a>, <img> 15 16 HTML <div> 元素 17 HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。 18 19 <div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。 20 21 如果与 CSS 一同使用，<div> 元素可用于对大的内容块设置样式属性。 22 23 <div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 <table> 元素进行文档布局不是表格的正确用法。<table> 元素的作用是显示表格化的数据。 24 25 HTML <span> 元素 26 HTML <span> 元素是内联元素，可用作文本的容器 27 28 <span> 元素也没有特定的含义。 29 30 当与 CSS 一同使用时，<span> 元素可用于为部分文本设置样式属性。 31 32 HTML 分组标签 33 标签 描述 34 <div> 定义了文档的区域，块级 (block-level) 35 <span> 用来组合文档中的行内元素， 内联元素(inline)
1 网站布局 2 大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。 3 大多数网站可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 4 5 lamp 虽然我们可以使用HTML table标签来设计出漂亮的布局，但是table标签是不建议作为布局工具使用的 - 表格不是布局工具。 6 7 HTML 布局 - 使用<div> 元素 8 div 元素是用于分组 HTML 元素的块级元素。 9 10 下面的例子使用五个 div 元素来创建多列布局： 11 12 实例 13 <!DOCTYPE html> 14 <html> 15 <head> 16 <meta charset="utf-8"> 17 <title>菜鸟教程(runoob.com)</title> 18 </head> 19 <body> 20 21 <div id="container" style="500px"> 22 23 <div id="header" style="background-color:#FFA500;"> 24 <h1 style="margin-bottom:0;">主要的网页标题</h1></div> 25 26 <div id="menu" style="background-color:#FFD700;height:200px;100px;float:left;"> 27 <b>菜单</b><br> 28 HTML<br> 29 CSS<br> 30 JavaScript</div> 31 32 <div id="content" style="background-color:#EEEEEE;height:200px;400px;float:left;"> 33 内容在这里</div> 34 35 <div id="footer" style="background-color:#FFA500;clear:both;text-align:center;"> 36 版权 © runoob.com</div> 37 38 </div> 39 40 </body> 41 </html> 42 43 尝试一下 » 44 上面的 HTML 代码会产生如下结果： 45 46 47 48 HTML 布局 - 使用表格 49 使用 HTML <table> 标签是创建布局的一种简单的方式。 50 51 大多数站点可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。 52 53 lamp 即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！ 54 下面的例子使用三行两列的表格 - 第一和最后一行使用 colspan 属性来横跨两列： 55 56 实例 57 <!DOCTYPE html> 58 <html> 59 <head> 60 <meta charset="utf-8"> 61 <title>菜鸟教程(runoob.com)</title> 62 </head> 63 <body> 64 65 <table width="500" border="0"> 66 <tr> 67 <td colspan="2" style="background-color:#FFA500;"> 68 <h1>主要的网页标题</h1> 69 </td> 70 </tr> 71 72 <tr> 73 <td style="background-color:#FFD700;100px;"> 74 <b>菜单</b><br> 75 HTML<br> 76 CSS<br> 77 JavaScript 78 </td> 79 <td style="background-color:#eeeeee;height:200px;400px;"> 80 内容在这里</td> 81 </tr> 82 83 <tr> 84 <td colspan="2" style="background-color:#FFA500;text-align:center;"> 85 版权 © runoob.com</td> 86 </tr> 87 </table> 88 89 </body> 90 </html> 91 92 尝试一下 » 93 上面的 HTML 代码会产生以下结果： 94 95 96 97 98 HTML 布局 - 有用的提示 99 Tip: 使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的CSS 教程。 100 101 Tip: 由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。 102 103 HTML 布局标签 104 标签 描述 105 <div> 定义文档区块，块级(block-level) 106 <span> 定义 span，用来组合文档中的行内元素。
CSS指层叠样式表,样式定义如何显示HTML元素,样式通常存储在样式表中,将样式添加到HTML中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在CSS文件中,多个样式定义可叠唯一
1 CSS 实例 2 CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明: 3 选择器通常是您需要改变样式的 HTML 元素。 4 5 每条声明由一个属性和一个值组成。 6 属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开。 7 CSS 实例 8 CSS声明总是以分号(;)结束，声明组以大括号({})括起来: 9 10 p {color:red;text-align:center;} 11 为了让CSS可读性更强，你可以每行只描述一个属性: 12 13 实例 14 p 15 { 16 color:red; 17 text-align:center; 18 } 19 20 21 CSS 注释 22 注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。 23 24 CSS注释以 "/*" 开始, 以 "*/" 结束, 实例如下: 25 26 /*这是个注释*/ 27 p 28 { 29 text-align:center; 30 /*这是另一个注释*/ 31 color:black; 32 font-family:arial; 33 }
1 id 和 class 选择器 2 如果你要在HTML元素中设置CSS样式，你需要在元素中设置"id" 和 "class"选择器。 3 4 id 选择器 5 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 6 7 HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。 8 9 以下的样式规则应用于元素属性 id="para1": 10 11 实例 12 #para1 13 { 14 text-align:center; 15 color:red; 16 } 17 18 尝试一下 » 19 Remark ID属性不要以数字开头，数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。 20 21 class 选择器 22 class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 23 24 class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点"."号显示： 25 26 在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。 27 28 实例 29 .center {text-align:center;} 30 31 32 在以下实例中, 所有的 p 元素使用 class="center" 让该元素的文本居中: 33 34 实例 35 p.center {text-align:center;}
1 CSS 创建 2 当读到一个样式表时，浏览器会根据它来格式化 HTML 文档。 3 4 如何插入样式表 5 插入样式表的方法有三种: 6 7 外部样式表(External style sheet) 8 内部样式表(Internal style sheet) 9 内联样式(Inline style) 10 外部样式表 11 当样式需要应用于很多页面时，外部样式表将是理想的选择。在使用外部样式表的情况下，你可以通过改变一个文件来改变整个站点的外观。每个页面使用 <link> 标签链接到样式表。 <link> 标签在（文档的）头部： 12 13 <head> 14 <link rel="stylesheet" type="text/css" href="mystyle.css"> 15 </head> 16 浏览器会从文件 mystyle.css 中读到样式声明，并根据它来格式文档。 17 18 外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签。样式表应该以 .css 扩展名进行保存。下面是一个样式表文件的例子： 19 20 hr {color:sienna;} 21 p {margin-left:20px;} 22 body {background-image:url("/images/back40.gif");} 23 Remark 不要在属性值与单位之间留有空格（如："margin-left: 20 px" ），正确的写法是 "margin-left: 20px" 。 24 25 内部样式表 26 当单个文档需要特殊的样式时，就应该使用内部样式表。你可以使用 <style> 标签在文档头部定义内部样式表，就像这样: 27 28 <head> 29 <style> 30 hr {color:sienna;} 31 p {margin-left:20px;} 32 body {background-image:url("images/back40.gif");} 33 </style> 34 </head> 35 36 内联样式 37 由于要将表现和内容混杂在一起，内联样式会损失掉样式表的许多优势。请慎用这种方法，例如当样式仅需要在一个元素上应用一次时。 38 39 要使用内联样式，你需要在相关的标签内使用样式（style）属性。Style 属性可以包含任何 CSS 属性。本例展示如何改变段落的颜色和左外边距： 40 41 <p style="color:sienna;margin-left:20px">这是一个段落。</p> 42 43 多重样式 44 如果某些属性在不同的样式表中被同样的选择器定义，那么属性值将从更具体的样式表中被继承过来。 45 46 例如，外部样式表拥有针对 h3 选择器的三个属性： 47 48 h3 49 { 50 color:red; 51 text-align:left; 52 font-size:8pt; 53 } 54 而内部样式表拥有针对 h3 选择器的两个属性： 55 56 h3 57 { 58 text-align:right; 59 font-size:20pt; 60 } 61 假如拥有内部样式表的这个页面同时与外部样式表链接，那么 h3 得到的样式是： 62 63 color:red; 64 text-align:right; 65 font-size:20pt; 66 即颜色属性将被继承于外部样式表，而文字排列（text-alignment）和字体尺寸（font-size）会被内部样式表中的规则取代。 67 68 多重样式优先级 69 样式表允许以多种方式规定样式信息。样式可以规定在单个的 HTML 元素中，在 HTML 页的头元素中，或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表。 70 71 一般情况下，优先级如下： 72 73 内联样式）Inline style > （内部样式）Internal style sheet >（外部样式）External style sheet > 浏览器默认样式 74 75 <head> 76 <!-- 外部样式 style.css --> 77 <link rel="stylesheet" type="text/css" href="style.css"/> 78 <!-- 设置：h3{color:blue;} --> 79 <style type="text/css"> 80 /* 内部样式 */ 81 h3{color:green;} 82 </style> 83 </head> 84 <body> 85 <h3>测试！</h3> 86 </body> 87 注意：如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。
1 CSS 背景 2 3 CSS 背景属性用于定义HTML元素的背景。 4 5 CSS 属性定义背景效果: 6 7 background-color 8 background-image 9 background-repeat 10 background-attachment 11 background-position 12 背景颜色 13 background-color 属性定义了元素的背景颜色. 14 15 页面的背景颜色使用在body的选择器中: 16 17 实例 18 body {background-color:#b0c4de;} 19 20 尝试一下 » 21 CSS中，颜色值通常以以下方式定义: 22 23 十六进制 - 如："#ff0000" 24 RGB - 如："rgb(255,0,0)" 25 颜色名称 - 如："red" 26 以下实例中, h1, p, 和 div 元素拥有不同的背景颜色: 27 28 实例 29 h1 {background-color:#6495ed;} 30 p {background-color:#e0ffff;} 31 div {background-color:#b0c4de;} 32 33 尝试一下 » 34 35 背景图像 36 background-image 属性描述了元素的背景图像. 37 38 默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体. 39 40 页面背景图片设置实例: 41 42 实例 43 body {background-image:url('paper.gif');} 44 45 尝试一下 » 46 下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差: 47 48 实例 49 body {background-image:url('bgdesert.jpg');} 50 51 尝试一下 » 52 53 背景图像 - 水平或垂直平铺 54 默认情况下 background-image 属性会在页面的水平或者垂直方向平铺。 55 56 一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示: 57 58 实例 59 body 60 { 61 background-image:url('gradient2.png'); 62 } 63 64 尝试一下 » 65 如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些: 66 67 实例 68 body 69 { 70 background-image:url('gradient2.png'); 71 background-repeat:repeat-x; 72 } 73 74 尝试一下 » 75 76 背景图像- 设置定位与不平铺 77 Remark 让背景图像不影响文本的排版 78 79 如果你不想让图像平铺，你可以使用 background-repeat 属性: 80 81 实例 82 body 83 { 84 background-image:url('img_tree.png'); 85 background-repeat:no-repeat; 86 } 87 88 尝试一下 » 89 以上实例中，背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。 90 91 可以利用 background-position 属性改变图像在背景中的位置: 92 93 实例 94 body 95 { 96 background-image:url('img_tree.png'); 97 background-repeat:no-repeat; 98 background-position:right top; 99 } 100 101 尝试一下 » 102 103 背景- 简写属性 104 在以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。 105 106 为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中. 107 108 背景颜色的简写属性为 "background": 109 110 实例 111 body {background:#ffffff url('img_tree.png') no-repeat right top;} 112 113 尝试一下 » 114 当使用简写属性时，属性值的顺序为：: 115 116 background-color 117 background-image 118 background-repeat 119 background-attachment 120 background-position 121 以上属性无需全部使用，你可以按照页面的实际需要使用. 122 123 这个实例使用了先前介绍的CSS，你可以查看相应实例: CSS 实例 124 125 Examples 126 更多实例 127 如何设置固定的背景图像 128 本例演示如何设置固定的背景图像。图像不会随着页面的其他部分滚动。 129 130 CSS 背景属性 131 Property 描述 132 background 简写属性，作用是将背景属性设置在一个声明中。 133 background-attachment 背景图像是否固定或者随着页面的其余部分滚动。 134 background-color 设置元素的背景颜色。 135 background-image 把图像设置为背景。 136 background-position 设置背景图像的起始位置。 137 background-repeat 设置背景图像是否及如何重复。
1 文本颜色 2 颜色属性被用来设置文字的颜色。 3 4 颜色是通过CSS最经常的指定： 5 6 十六进制值 - 如: ＃FF0000 7 一个RGB值 - 如: RGB(255,0,0) 8 颜色的名称 - 如: red 9 参阅 CSS 颜色值 查看完整的颜色值。 10 11 一个网页的背景颜色是指在主体内的选择： 12 13 实例 14 body {color:red;} 15 h1 {color:#00ff00;} 16 h2 {color:rgb(255,0,0);} 17 18 尝试一下 » 19 Remark 对于W3C标准的CSS：如果你定义了颜色属性，你还必须定义背景色属性。 20 21 文本的对齐方式 22 文本排列属性是用来设置文本的水平对齐方式。 23 24 文本可居中或对齐到左或右,两端对齐. 25 26 当text-align设置为"justify"，每一行被展开为宽度相等，左，右外边距是对齐（如杂志和报纸）。 27 28 实例 29 h1 {text-align:center;} 30 p.date {text-align:right;} 31 p.main {text-align:justify;} 32 33 尝试一下 » 34 35 文本修饰 36 text-decoration 属性用来设置或删除文本的装饰。 37 38 从设计的角度看 text-decoration属性主要是用来删除链接的下划线： 39 40 实例 41 a {text-decoration:none;} 42 43 尝试一下 » 44 也可以这样装饰文字： 45 46 实例 47 h1 {text-decoration:overline;} 48 h2 {text-decoration:line-through;} 49 h3 {text-decoration:underline;} 50 51 尝试一下 » 52 Remark 我们不建议强调指出不是链接的文本，因为这常常混淆用户。 53 54 文本转换 55 文本转换属性是用来指定在一个文本中的大写和小写字母。 56 57 可用于所有字句变成大写或小写字母，或每个单词的首字母大写。 58 59 实例 60 p.uppercase {text-transform:uppercase;} 61 p.lowercase {text-transform:lowercase;} 62 p.capitalize {text-transform:capitalize;} 63 64 65 实例 66 p {text-indent:50px;} 67 68 69 所有CSS文本属性。 70 属性 描述 71 color 设置文本颜色 72 direction 设置文本方向。 73 letter-spacing 设置字符间距 74 line-height 设置行高 75 text-align 对齐元素中的文本 76 text-decoration 向文本添加修饰 77 text-indent 缩进元素中文本的首行 78 text-shadow 设置文本阴影 79 text-transform 控制元素中的字母 80 unicode-bidi 设置或返回文本是否被重写 81 vertical-align 设置元素的垂直对齐 82 white-space 设置元素中空白的处理方式 83 word-spacing 设置字间距
1 CSS 字体 2 CSS字体属性定义字体，加粗，大小，文字样式。 3 4 serif和sans-serif字体之间的区别 5 Serif vs. Sans-serif 6 Remark 在计算机屏幕上，sans-serif字体被认为是比serif字体容易阅读 7 8 CSS字型 9 在CSS中，有两种类型的字体系列名称： 10 11 通用字体系列 - 拥有相似外观的字体系统组合（如 "Serif" 或 "Monospace"） 12 特定字体系列 - 一个特定的字体系列（如 "Times" 或 "Courier"） 13 Generic family 字体系列 说明 14 Serif Times New Roman 15 Georgia Serif字体中字符在行的末端拥有额外的装饰 16 Sans-serif Arial 17 Verdana "Sans"是指无 - 这些字体在末端没有额外的装饰 18 Monospace Courier New 19 Lucida Console 所有的等宽字符具有相同的宽度 20 21 字体系列 22 font-family 属性设置文本的字体系列。 23 24 font-family 属性应该设置几个字体名称作为一种"后备"机制，如果浏览器不支持第一种字体，他将尝试下一种字体。 25 26 注意: 如果字体系列的名称超过一个字，它必须用引号，如Font Family："宋体"。 27 28 多个字体系列是用一个逗号分隔指明： 29 30 实例 31 p{font-family:"Times New Roman", Times, serif;} 32 33 字体样式 34 主要是用于指定斜体文字的字体样式属性。 35 36 这个属性有三个值： 37 38 正常 - 正常显示文本 39 斜体 - 以斜体字显示的文字 40 倾斜的文字 - 文字向一边倾斜（和斜体非常类似，但不太支持） 41 实例 42 p.normal {font-style:normal;} 43 p.italic {font-style:italic;} 44 p.oblique {font-style:oblique;} 45 46 字体大小 47 font-size 属性设置文本的大小。 48 49 能否管理文字的大小，在网页设计中是非常重要的。但是，你不能通过调整字体大小使段落看上去像标题，或者使标题看上去像段落。 50 51 请务必使用正确的HTML标签，就<h1> - <h6>表示标题和<p>表示段落： 52 53 字体大小的值可以是绝对或相对的大小。 54 55 绝对大小： 56 57 设置一个指定大小的文本 58 不允许用户在所有浏览器中改变文本大小 59 确定了输出的物理尺寸时绝对大小很有用 60 相对大小： 61 62 相对于周围的元素来设置大小 63 允许用户在浏览器中改变文字大小 64 Remark 如果你不指定一个字体的大小，默认大小和普通文本段落一样，是16像素（16px=1em）。 65 66 设置字体大小像素 67 设置文字的大小与像素，让您完全控制文字大小： 68 69 实例 70 h1 {font-size:40px;} 71 h2 {font-size:30px;} 72 p {font-size:14px;} 73 74 虽然可以通过浏览器的缩放工具调整文本大小，但是，这种调整是整个页面，而不仅仅是文本 75 76 用em来设置字体大小 77 为了避免Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替像素。 78 79 em的尺寸单位由W3C建议。 80 81 1em和当前字体大小相等。在浏览器中默认的文字大小是16px。 82 83 因此，1em的默认大小是16px。可以通过下面这个公式将像素转换为em：px/16=em 84 85 实例 86 h1 {font-size:2.5em;} /* 40px/16=2.5em */ 87 h2 {font-size:1.875em;} /* 30px/16=1.875em */ 88 p {font-size:0.875em;} /* 14px/16=0.875em */ 89 90 尝试一下 » 91 在上面的例子，em的文字大小是与前面的例子中像素一样。不过，如果使用 em 单位，则可以在所有浏览器中调整文本大小。 92 93 不幸的是，仍然是IE浏览器的问题。调整文本的大小时，会比正常的尺寸更大或更小。 94 95 使用百分比和EM组合 96 在所有浏览器的解决方案中，设置 <body>元素的默认字体大小的是百分比： 97 98 实例 99 body {font-size:100%;} 100 h1 {font-size:2.5em;} 101 h2 {font-size:1.875em;} 102 p {font-size:0.875em;} 103 104 所有CSS字体属性 105 Property 描述 106 font 在一个声明中设置所有的字体属性 107 font-family 指定文本的字体系列 108 font-size 指定文本的字体大小 109 font-style 指定文本的字体样式 110 font-variant 以小型大写字体或者正常字体显示文本。 111 font-weight 指定字体的粗细。
1 CSS 链接 2 不同的链接可以有不同的样式。 3 4 链接样式 5 链接的样式，可以用任何CSS属性（如颜色，字体，背景等）。 6 7 特别的链接，可以有不同的样式，这取决于他们是什么状态。 8 9 这四个链接状态是： 10 11 a:link - 正常，未访问过的链接 12 a:visited - 用户已访问过的链接 13 a:hover - 当用户鼠标放在链接上时 14 a:active - 链接被点击的那一刻 15 实例 16 a:link {color:#000000;} /* 未访问链接*/ 17 a:visited {color:#00FF00;} /* 已访问链接 */ 18 a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */ 19 a:active {color:#0000FF;} /* 鼠标点击时 */ 20 21 尝试一下 » 22 当设置为若干链路状态的样式，也有一些顺序规则： 23 24 a:hover 必须跟在 a:link 和 a:visited后面 25 a:active 必须跟在 a:hover后面 26 常见的链接样式 27 根据上述链接的颜色变化的例子，看它是在什么状态。 28 29 让我们通过一些其他常见的方式转到链接样式： 30 31 文本修饰 32 text-decoration 属性主要用于删除链接中的下划线： 33 34 实例 35 a:link {text-decoration:none;} 36 a:visited {text-decoration:none;} 37 a:hover {text-decoration:underline;} 38 a:active {text-decoration:underline;} 39 40 实例 41 a:link {background-color:#B2FF99;} 42 a:visited {background-color:#FFFF85;} 43 a:hover {background-color:#FF704D;} 44 a:active {background-color:#FF704D;}
1 CSS 列表 2 CSS列表属性作用如下： 3 4 设置不同的列表项标记为有序列表 5 设置不同的列表项标记为无序列表 6 设置列表项标记为图像 7 8 列表 9 在HTML中，有两种类型的列表： 10 11 无序列表 - 列表项标记用特殊图形（如小黑点、小方框等） 12 有序列表 - 列表项的标记有数字或字母 13 使用CSS，可以列出进一步的样式，并可用图像作列表项标记。 14 15 不同的列表项标记 16 list-style-type属性指定列表项标记的类型是： 17 18 实例 19 ul.a {list-style-type: circle;} 20 ul.b {list-style-type: square;} 21 22 ol.c {list-style-type: upper-roman;} 23 ol.d {list-style-type: lower-alpha;} 24 一些值是无序列表，以及有些是有序列表。 25 26 作为列表项标记的图像 27 要指定列表项标记的图像，使用列表样式图像属性： 28 29 实例 30 ul 31 { 32 list-style-image: url('sqpurple.gif'); 33 } 34 例子解释： 35 36 ul: 37 设置列表样式类型为没有删除列表项标记 38 设置填充和边距0px（浏览器兼容性） 39 ul中所有li: 40 设置图像的URL，并设置它只显示一次（无重复） 41 您需要的定位图像位置（左0px和上下5px） 42 用padding-left属性把文本置于列表中 43 列表 -简写属性 44 在单个属性中可以指定所有的列表属性。这就是所谓的简写属性。 45 46 为列表使用简写属性，列表样式属性设置如下： 47 48 实例 49 ul 50 { 51 list-style: square url("sqpurple.gif"); 52 } 53 54 尝试一下 » 55 可以按顺序设置如下属性： 56 57 list-style-type 58 list-style-position (有关说明，请参见下面的CSS属性表) 59 list-style-image 60 如果上述值丢失一个，其余仍在指定的顺序，就没关系。 61 所有的CSS列表属性 62 属性 描述 63 list-style 简写属性。用于把所有用于列表的属性设置于一个声明中 64 list-style-image 将图象设置为列表项标志。 65 list-style-position 设置列表中列表项标志的位置。 66 list-style-type 设置列表项标志的类型。
1 CSS 表格 2 使用 CSS 可以使 HTML 表格更美观。 3 4 Company Contact Country 5 Alfreds Futterkiste Maria Anders Germany 6 Berglunds snabbköp Christina Berglund Sweden 7 Centro comercial Moctezuma Francisco Chang Mexico 8 Ernst Handel Roland Mendel Austria 9 Island Trading Helen Bennett UK 10 Königlich Essen Philip Cramer Germany 11 Laughing Bacchus Winecellars Yoshi Tannamuri Canada 12 Magazzini Alimentari Riuniti Giovanni Rovelli Italy 13 North/South Simon Crowther UK 14 Paris spécialités Marie Bertrand France 15 The Big Cheese Liz Nixon USA 16 Vaffeljernet Palle Ibsen Denmark 17 表格边框 18 指定CSS表格边框，使用border属性。 19 20 下面的例子指定了一个表格的Th和TD元素的黑色边框： 21 22 实例 23 table, th, td 24 { 25 border: 1px solid black; 26 } 27 请注意，在上面的例子中的表格有双边框。这是因为表和th/ td元素有独立的边界。 28 29 为了显示一个表的单个边框，使用 border-collapse属性。 30 31 折叠边框 32 border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开： 33 34 实例 35 table 36 { 37 border-collapse:collapse; 38 } 39 table,th, td 40 { 41 border: 1px solid black; 42 } 43 表格宽度和高度 44 Width和height属性定义表格的宽度和高度。 45 46 下面的例子是设置100％的宽度，50像素的th元素的高度的表格： 47 表格文字对齐 48 表格中的文本对齐和垂直对齐属性。 49 50 text-align属性设置水平对齐方式，向左，右，或中心： 51 52 实例 53 td 54 { 55 text-align:right; 56 } 57 垂直对齐属性设置垂直对齐，比如顶部，底部或中间： 58 59 实例 60 td 61 { 62 height:50px; 63 vertical-align:bottom; 64 } 65 表格填充 66 如果在表的内容中控制空格之间的边框，应使用td和th元素的填充属性： 67 68 实例 69 td 70 { 71 padding:15px; 72 } 73 表格颜色 74 下面的例子指定边框的颜色，和th元素的文本和背景颜色： 75 76 实例 77 table, td, th 78 { 79 border:1px solid green; 80 } 81 th 82 { 83 background-color:green; 84 color:white; 85 }