网络运营之剑—html连接css
来源：互联网 发布：如何评价诗词 知乎 编辑：程序博客网 时间：2024/05/22 13:32
html连接CSS
它能让我们更精确的控制网页版面的文字、背景、字型等...
它能让我们只修正一个CSS文件，便可同时更新众多的网页版面外观及格式。
它可以使html的文件内码更精简，缩小档案下载的速度。
适用於各种作业平台。
CSS的标准语法
先来认识CSS的标准语法，例如：
H3,H5{color : #999999 ; font-family : 宋体}
「H3与H5」我们称之为"选择器"，意思是说透过这个样式，给「H3与H5」
标签定义color : #999999(文字灰色)。font-family : 宋体(字型为宋体)
也就是说网页里所有定义为「H3与H5」标签的文字，都会变成灰色、宋体。
定义多个标签相同属性「H3,H5」就是以「,」号分开
定义标签多个属性「color:#999999; font-family:宋体」就是以「;」号分开
2. HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈.
也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord\记事本\写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。
HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂.
HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragragh），但它们的与一般文本有区别，因为它们放在单书名号里。故Paragragh标签是<p>,块引用标签是<blockquote>。有些标签说明页面如何被格式化（例如，<p>开始一个新段落），其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。
关于标签，需要记住的是，它们是成双出现的。每当使用一个标签－－如<blockquote>,则必须以另一个标签</blockquote>将它关闭。注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。
基本HTML页面以<html>标签开始，以</html>结束。在它们之间，整个页面有两部分－－标题和正文。
标题词－－夹在<head>和</head>标签之间－－这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在<body>和</body>之间－－即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。
那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文)
然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。
CSS是样式，而html是超文本协议
3. type="text/css"是指定MIME类型，其中：
text是指对象为网页中的文本
css或是javascript是指当前指定的文本类型...
如果要在HTML文件中应用CSS样式，最常用的有三种方法：
<html>
<head>
<style type="text/css">
.cssstyle { font:12px;
color:#339966;
border:1px #e1763d solid;
}
<style/>
</head>
<body>
<div class="cssstyle"> THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>
</body>
</html>
(2).外部引用
外部引用就是用<link>标签引用外部CSS文件中的样式。如欲实现上述效果，可将CSS做成单独文件。
文件CSSSTYLE.CSS
.cssstyle { font:12px;
color:#339966;
border:1px #e1763d solid;
}
然后在HTML引用它：
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssstyle.css">
</head>
<body>
<div class="cssstyle"> THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>
</body>
</html>
使用这种方法引用要确保CSS文件和HTML文件的相对路径完整无误，要不然HTML文档是不会找到CSS样式的。
(3).内联引用
内联引用其实就是在应用CSS样式的HTML部分直接在所做用的标签上定义CSS样式，这种方法最直接，但是缺点也最明显，最大的问题就是代码繁冗，作用域也仅仅在定义的标签的作用范围。如：
<p style="color:#ccc">THIS TEXT IS GREY</p>
<p>I AM NOT GREY, WHAT COLOR AM I? :)</p>
4. CSS中的光标类型
语法：
cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url)
取值：
auto : 默认值。浏览器根据当前情况自动确定鼠标光标类型。
all-scroll : IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize : IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair : 简单的十字线光标。
default : 客户端平台的默认光标。通常是一个箭头。
hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
move : 十字箭头光标。用于标示对象可被移动。
help : 带有问号标记的箭头。用于标示有帮助信息存在。
no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
pointer : IE6.0 和hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize : IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text : 用于标示可编辑的水平文本的光标。通常是大写字母I 的形状。
vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母I 旋转90度的形状。
wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize : 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url) : IE6.0 用户自定义光标。使用绝对或相对url 地址指定光标文件(后缀为.cur 或者.ani )。
示例：
p { cursor: text; }
a { cursor: pointer; }
body { cursor: url("mycursor.cur"), url("images/cursors/footcursor.cur"), default; }
5. rel 属性规定当前文档与被链接文档之间的关系。
如链接一个css文档：
<link rel="stylesheet" type="text/css" href="default.css" />
rel取值：stylesheet
rel不仅用于链接css，它还可以链接其他外部资源关系：
alternate 文档的替代版本（比如打印页、翻译或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表（解释）。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
shortcut icon 小图标
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。
6. XML 命名空间属性被放置于元素的开始标签之中，并使用以下的语法：
xmlns:namespace-prefix="namespaceURI"。
当命名空间被定义在元素的开始标签中时，所有带有相同前缀的子元素都会与同一个命名空间相关联。
注释：用于标示命名空间的地址不会被解析器用于查找信息。其惟一的作用是赋予命名空间一个惟一的名称。不过，很多公司常常会作为指针来使用命名空间指向实际存在的网页，这个网页包含关于命名空间的信息[1]。
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开
1. CSS是Cascading Style Sheets的缩写，我们中文称为「串联样式表」
CSS有甚麼好处？为甚麼要学呢？以下说明几点你就会发现使用CSS的好处：它能让我们更精确的控制网页版面的文字、背景、字型等...
它能让我们只修正一个CSS文件，便可同时更新众多的网页版面外观及格式。
它可以使html的文件内码更精简，缩小档案下载的速度。
适用於各种作业平台。
CSS的标准语法
先来认识CSS的标准语法，例如：
H3,H5{color : #999999 ; font-family : 宋体}
「H3与H5」我们称之为"选择器"，意思是说透过这个样式，给「H3与H5」
标签定义color : #999999(文字灰色)。font-family : 宋体(字型为宋体)
也就是说网页里所有定义为「H3与H5」标签的文字，都会变成灰色、宋体。
定义多个标签相同属性「H3,H5」就是以「,」号分开
定义标签多个属性「color:#999999; font-family:宋体」就是以「;」号分开
2. HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。神奇吗?一点都不神奇,因为现在你看到的就是这种语言写的页面.哈哈.
也许你听说过许多可以编辑网页的软件,事实上,你不需要用任何专门的软件来建立HTML页面；你所需要的只是一个文字处理器（如McrosoftWord\记事本\写字板等等）以及HTML的工作常识。其实你很快就会发现,基础的HTML语言简直容易死了。
HTML只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂.
HTML标签通常是英文词汇的全称（如块引用:blockquote）或缩略语（如“p”代表Paragragh），但它们的与一般文本有区别，因为它们放在单书名号里。故Paragragh标签是<p>,块引用标签是<blockquote>。有些标签说明页面如何被格式化（例如，<p>开始一个新段落），其他则说明这些词如何显示(<b>使文字变粗)还有一些其他标签提供在页面上不显示的信息－－例如标题。
关于标签，需要记住的是，它们是成双出现的。每当使用一个标签－－如<blockquote>,则必须以另一个标签</blockquote>将它关闭。注意“blockquote”前的斜杠，那就是关闭标签与打开标签的区别。
基本HTML页面以<html>标签开始，以</html>结束。在它们之间，整个页面有两部分－－标题和正文。
标题词－－夹在<head>和</head>标签之间－－这个词语在打开页面时出现在屏幕底部最小化的窗口。正文则夹在<body>和</body>之间－－即所有页面的内容所在。页面上显示的任何东西都包含在这两个标签之中。
那么让我们建立一个简单的范例吧，非常容易的。第一步，当然是要建立一个新的文本文件（记住，如果你在使用比较复杂的文字处理器，就应该用“纯文本”或“普通文本”来保存），将它命名为“xxxx.html”。(随便你起一个什么名字,但记住,要用英文)
然后你可以用浏览器将它打开，你会看见最简单的自己做的页面。
CSS是样式，而html是超文本协议
3. type="text/css"是指定MIME类型，其中：
text是指对象为网页中的文本
css或是javascript是指当前指定的文本类型...
如果要在HTML文件中应用CSS样式，最常用的有三种方法：
(1).内部引用
所谓内部引用就是运用style标签引用在同HTML页内<HEAD></HEAD>部分的css定义。如：<html>
<head>
<style type="text/css">
.cssstyle { font:12px;
color:#339966;
border:1px #e1763d solid;
}
<style/>
</head>
<body>
<div class="cssstyle"> THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>
</body>
</html>
(2).外部引用
外部引用就是用<link>标签引用外部CSS文件中的样式。如欲实现上述效果，可将CSS做成单独文件。
文件CSSSTYLE.CSS
.cssstyle { font:12px;
color:#339966;
border:1px #e1763d solid;
}
然后在HTML引用它：
<html>
<head>
<link rel="stylesheet" type="text/css" href="cssstyle.css">
</head>
<body>
<div class="cssstyle"> THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>
</body>
</html>
使用这种方法引用要确保CSS文件和HTML文件的相对路径完整无误，要不然HTML文档是不会找到CSS样式的。
(3).内联引用
内联引用其实就是在应用CSS样式的HTML部分直接在所做用的标签上定义CSS样式，这种方法最直接，但是缺点也最明显，最大的问题就是代码繁冗，作用域也仅仅在定义的标签的作用范围。如：
<p style="color:#ccc">THIS TEXT IS GREY</p>
<p>I AM NOT GREY, WHAT COLOR AM I? :)</p>
4. CSS中的光标类型
语法：
cursor : auto | all-scroll | col-resize| crosshair | default | hand | move | help | no-drop | not-allowed | pointer | progress | row-resize | text | vertical-text | wait | *-resize | url ( url)
取值：
auto : 默认值。浏览器根据当前情况自动确定鼠标光标类型。
all-scroll : IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
col-resize : IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
crosshair : 简单的十字线光标。
default : 客户端平台的默认光标。通常是一个箭头。
hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
move : 十字箭头光标。用于标示对象可被移动。
help : 带有问号标记的箭头。用于标示有帮助信息存在。
no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
pointer : IE6.0 和hand 一样。竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
row-resize : IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
text : 用于标示可编辑的水平文本的光标。通常是大写字母I 的形状。
vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母I 旋转90度的形状。
wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
*-resize : 用于标示对象可被改变尺寸方向的箭头光标。w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
url ( url) : IE6.0 用户自定义光标。使用绝对或相对url 地址指定光标文件(后缀为.cur 或者.ani )。
示例：
p { cursor: text; }
a { cursor: pointer; }
body { cursor: url("mycursor.cur"), url("images/cursors/footcursor.cur"), default; }
5. rel 属性规定当前文档与被链接文档之间的关系。
如链接一个css文档：
<link rel="stylesheet" type="text/css" href="default.css" />
rel取值：stylesheet
rel不仅用于链接css，它还可以链接其他外部资源关系：
alternate 文档的替代版本（比如打印页、翻译或镜像）。
stylesheet 文档的外部样式表。
start 集合中的第一个文档。
next 集合中的下一个文档。
prev 集合中的上一个文档。
contents 文档的目录。
index 文档的索引。
glossary 在文档中使用的词汇的术语表（解释）。
copyright 包含版权信息的文档。
chapter 文档的章。
section 文档的节。
shortcut icon 小图标
subsection 文档的小节。
appendix 文档的附录。
help 帮助文档。
bookmark 相关文档。
6. XML 命名空间属性被放置于元素的开始标签之中，并使用以下的语法：
xmlns:namespace-prefix="namespaceURI"。
当命名空间被定义在元素的开始标签中时，所有带有相同前缀的子元素都会与同一个命名空间相关联。
注释：用于标示命名空间的地址不会被解析器用于查找信息。其惟一的作用是赋予命名空间一个惟一的名称。不过，很多公司常常会作为指针来使用命名空间指向实际存在的网页，这个网页包含关于命名空间的信息[1]。
_blank -- 在新窗口中打开链接
_parent -- 在父窗体中打开链接
_self -- 在当前窗体打开链接,此为默认值
_top -- 在当前窗体打开链接，并替换当前的整个窗体(框架页)
一个对应的框架页的名称 -- 在对应框架页中打开
- 网络运营之剑—html连接css
- 网络运营之剑—html语言
- 网络运营之剑—html框架
- 网络运营之剑—html语言(基本标签)
- 网络运营之剑—html语言(表格设置)
- 网络运营之剑-html总结
- iOS开发之网络篇——HTML+CSS+JS
- iOS开发之网络篇——HTML+CSS+JS
- 网络运营之对比原理
- HTML导入CSS和连接CSS
- day02—html之CSS基础
- HTML布局之CSS
- Html之css篇
- Linux 之 网络连接
- CSS、HTML与XMLl的连接
- HTML+CSS之CSS格式化排版 (7)
- HTML+CSS之CSS盒模型 (8)
- HTML+CSS之CSS盒模型
- Linux安装svn
- JDBC高级实例模板
- UITabBarController 继承和使用InterfaceBuilder
- typeid的作用
- JAVA中使用Socket实现自定义协议、无服务器即时通讯（类似飞秋）
- 网络运营之剑—html连接css
- zoj 1711 Sum It Up //深搜
- 公告：本博客继续使用！
- 把文件流中的图片按指定的大小保存到指定的文件中
- 用Visual C#调用Windows API函数
- excel表格操作
- Java各种数据类型详细介绍及其区别
- winpcap 安装
- Moziila文件结构概览
