CSS教程 1、CSS的应用
一、In-line 行内
行内样式是在html标签里直接使用style属性
Example Source Code [www.52css.com]
<p style="color: red">text</p>
设定段落文字红色。
但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。
二、Internal 内部
使用于整个页面的植入内部样式在head标签里面，style标签包围样式。
Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
...
所有段落文字红色，链接蓝色。
像行内样式一样，你应该保持HTML和CSS分离，所以我们只剩下救星。
三、外部
外部样式使用在整个多样页面网站。它是一个独立的CSS文件，像下面一样：
Example Source Code [www.52css.com]
p {
color: red;
}
a {
color: blue;
}
如果上面保存为“web.css”，HTML里面的链接就像下面：
Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...
后面教程里会讲到其他外联样式的方法，现在已经足够了。
从这篇指导里面，我们以后沿着上面的方法实验代码是个好主意，用文本编辑器新建文件，保存为"web.css"在html目录。
Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...
保存HTML文件，现在已经链接上CSS，不过现在CSS是空的，没有内容不会改变HTML。当你开始学习CSS，就可以添加代码到CSS文件里，看HTML刷新后的结果。
一、In-line 行内
行内样式是在html标签里直接使用style属性
Example Source Code [www.52css.com]
<p style="color: red">text</p>
设定段落文字红色。
但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。
二、Internal 内部
使用于整个页面的植入内部样式在head标签里面，style标签包围样式。
Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<style type="text/css">
p {
color: red;
}
a {
color: blue;
}
</style>
...
所有段落文字红色，链接蓝色。
像行内样式一样，你应该保持HTML和CSS分离，所以我们只剩下救星。
三、外部
外部样式使用在整个多样页面网站。它是一个独立的CSS文件，像下面一样：
Example Source Code [www.52css.com]
p {
color: red;
}
a {
color: blue;
}
如果上面保存为“web.css”，HTML里面的链接就像下面：
Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>CSS Example</title>
<link rel="stylesheet" type="text/css" href="web.css" />
...
后面教程里会讲到其他外联样式的方法，现在已经足够了。
从这篇指导里面，我们以后沿着上面的方法实验代码是个好主意，用文本编辑器新建文件，保存为"web.css"在html目录。
Example Source Code [www.52css.com]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>My first web page</title>
<link rel="stylesheet" type="text/css" href="web.css" />
</head>
...
保存HTML文件，现在已经链接上CSS，不过现在CSS是空的，没有内容不会改变HTML。当你开始学习CSS，就可以添加代码到CSS文件里，看HTML刷新后的结果。
分享到：
发表评论
-
CSS教程17 CSS的优先级特性Specificity
2010-07-22 12:00 744如果同个元素有两个或以上冲突的CSS规则，浏览器有一些基本的规 ... -
CSS教程16 CSS的伪元素Pseudo Elements
2010-07-22 11:59 685伪元素吸附在选择上和pseudo classes伪类很像，像这 ... -
CSS教程15 CSS的At-Rules@规则
2010-07-22 11:58 723At-rules分装不同的CSS规 ... -
CSS教程14 CSS网页布局Page Layout
2010-07-22 11:57 836使用CSS布局非常简单，如果你习惯使用tables布局，可能开 ... -
CSS教程13 CSS的display属性
2010-07-22 11:56 758操作HTML元素的诀窍在于明白它们工作的方法在于没有特定的形式 ... -
CSS教程12 CSS的Background Images 背景图片
2010-07-22 11:56 954背景图片Background Images有许多属性可以操作。 ... -
CSS教程11 CSS的属性缩写
2010-07-22 11:55 659一些CSS属性允许使用一串值代替许多属性，值使用空格分开。 ... -
CSS教程10 CSS的Pseudo Classes 伪类
2010-07-22 11:54 610请你注意一些CSS伪类属性不被所有浏览器支持，但有四个伪类可以 ... -
CSS教程9 CSS的Grouping and Nesting分组和嵌套
2010-07-22 11:53 466Grouping 分组 当许多选择器有同样属性时，可以使 ... -
CSS教程8 CSS的Class以及ID选择器
2010-07-22 11:52 670前面的学习我们仅仅使用HTML选择器（在HTML页面里为htm ... -
CSS教程7 CSS属性结合起来使用
2010-07-22 11:51 717如果你学完HTML初级教程即可学习CSS初级教程，使用CSS处 ... -
CSS教程6 CSS的Border边框
2010-07-22 11:48 626CSS Borders 边框 边框可以运用到body里的 ... -
CSS教程5 Margin和Padding
2010-07-22 11:45 619margin和padding用来隔开元素，margin是隔开元 ... -
CSS教程4 CSS的Text 文本
2010-07-22 11:44 711有一系列属性可以改变网页文字的大小和形状，概要如下： fon ... -
CSS教程3 CSS的color颜色
2010-07-22 11:43 1081css可以处理16,777,216颜色，可以使用名字、rgb ... -
CSS教程2 选择器 、属性、值
2010-07-22 11:41 727HTML有标签，CSS有选择器。选择器是给内部和外部样式里面的 ...
相关推荐
本超详细CSS教程旨在帮助新手和经验丰富的开发者深入理解这一强大的样式语言。 **一、CSS基础** 1. **选择器**：CSS选择器用于选取需要样式的HTML元素，如标签选择器（`p {color:red;}`）、类选择器（`.myClass {...
本篇将深入探讨CSS+Div布局的概念、CSS教程的重要性以及CSS API的相关知识。 首先，CSS+Div布局是利用CSS来控制HTML中的Div元素进行页面布局的技术。Div元素是一个通用的容器，可以容纳其他HTML元素，通过CSS我们...
**CSS教程概述** CSS，全称为“Cascading Style Sheets”，中文译为“层叠样式表”，是用于描述HTML或XML（包括各种XML方言，如SVG、XHTML等）文档样式的样式表语言。它允许将样式信息与文档内容分离，使得网页设计...
DIV+CSS的经典教程2 历史可大幅减少离开打飞机离开时间的法律思考角度飞
总之，这个经典的CSS教程通过实例教学，使读者能够快速上手，理解并应用CSS技术，从而构建出符合现代标准的网站。无论是初学者还是经验丰富的开发者，都能从中受益匪浅，进一步提升自己的CSS技能。
在本“CSS教程实例大全”中，我们将深入探讨CSS的核心概念、选择器、布局技术以及一些高级特性，旨在帮助初学者和进阶者全面掌握CSS。 ### 1. CSS基础 - **选择器**：CSS的选择器是用于选取HTML元素的规则，如类...
**CSS教程 CHM版** 本资源集合包含了四个关于CSS（Cascading Style Sheets）的CHM（Microsoft Compiled HTML Help）格式教程，它们分别是： 1. **CSS样式表.CHM** 2. **css样式表滤镜.chm** 3. **CSS_精通CSS滤镜....
### CSS基础教程知识点详解 #### 一、CSS简介 **CSS**，全称为 **Cascading Style Sheets**（级联样式表），是一种用于定义HTML文档布局的语言。它可以帮助开发者更好地控制网页的外观，如字体、颜色、间距、大小...
**CSS教程(PPT)** **一、CSS简介** CSS（Cascading Style Sheets）层叠样式表，是一种用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式表语言。CSS能够让你独立于内容来控制网页的布局，使网页...
### CSS经典教程知识点总结 #### 一、CSS简介与基础知识 - **CSS**：层叠样式表（Cascading Style Sheets）是一种用来表现HTML或XML等文件样式的计算机语言。 - **作用**：用于控制HTML元素的样式和布局，帮助实现...
"css教程.exe"则可能是CSS的学习软件，包含教程、示例和练习，帮助学习者掌握CSS的基本概念和语法。这可能包括选择器的用法、盒模型的理解、布局技术（如Flexbox和Grid）、动画和过渡效果的实现，以及如何创建响应式...
**CSS（层叠样式表）教程** CSS，全称Cascading Style Sheets，是一种用于描述网页及用户界面...通过系统学习CSS教程，无论是初学者还是经验丰富的开发者，都能不断提升自己的技能水平，创作出更具创新性的网络作品。
这个“CSS教程大全”包含了多个不同主题的教程，旨在帮助初学者和有经验的开发者深入理解和掌握CSS技术。 在CSS的世界里，**入门**是非常重要的第一步。这通常涉及到理解基本的选择器、属性和值，如何将CSS与HTML...
《层叠样式表》这本资料可能更侧重于CSS的理论和实践应用，探讨了CSS如何通过层叠机制来处理样式冲突，以及如何实现网页的响应式设计。 《精通CSS滤镜》则深入探讨了CSS滤镜技术，这是CSS中用于图像效果处理的部分...
【CSS教程】 CSS，全称Cascading Style Sheets，是一种用于定义网页中元素样式的技术。它让网页设计者能够精确地控制页面布局，包括字体样式、背景色、元素排列方式、尺寸、边框等。CSS的发展始于1997年，由W3C...
"极速中文CSS教程（基础部分预览）" 本教程旨在提供一个全面的 CSS 教程，从基础知识到高级知识，涵盖了 CSS 的所有方面。下面是对教程的详细解释。 01 简介 CSS 是一种描述 HTML 文档样式的语言，它描述了如何在...
这个"css教程"显然是为了帮助初学者或有经验的开发者更好地理解和掌握CSS。 在学习CSS时，你需要了解以下几个核心概念： 1. **选择器（Selectors）**：选择器是CSS中的关键，它们用来指定你想要应用样式的HTML元素...