`
yacole
  • 浏览: 240994 次
  • 性别: Icon_minigender_1
  • 来自: 浙江科技学院
社区版块
存档分类
最新评论

CSS初级教程(一) - 应用CSS

阅读更多

有三种方法应用CSS

In-line 行内

行内样式是在html标签里直接使用style属性

html代码
  1. <p style="color: red">textp>  

设定段落文字红色。

但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免。

Internal 内部

使用于整个页面的植入内部样式在head标签里面,style标签包围样式。

xml 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html>  
  4. <head>  
  5. <title>CSS Example</title>  
  6. <style type="text/css">  
  7.  p {   
  8.   color: red;   
  9.  }   
  10.  a {   
  11.   color: blue;   
  12.  }   
  13. </style>  
  14. ...   

所有段落文字红色,链接蓝色。

像行内样式一样,你应该保持HTML和CSS分离,所以我们只剩下救星。

外部

外部样式使用在整个多样页面网站。它是一个独立的CSS文件,像下面一样:

css 代码
  1. p {   
  2.  colorred;   
  3. }   
  4. a {   
  5.  colorblue;   
  6. }   

如果上面保存为“web.css”,HTML里面的链接就像下面:

xml 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html>  
  4. <head>  
  5.  <title>CSS Example</title>  
  6.  <link rel="stylesheet" type="text/css" href="web.css" />  
  7. ...   

后面教程里会讲到其他外联样式的方法,现在已经足够了。

从这篇指导里面,我们以后沿着上面的方法实验代码是个好主意,用文本编辑器新建文件,保存为"web.css"在html目录。

xml 代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  3. <html>  
  4. <head>  
  5.  <title>My first web page</title>  
  6.  <link rel="stylesheet" type="text/css" href="web.css" />  
  7. </head>  
  8. ...   

保存HTML文件,现在已经链接上CSS,不过现在CSS是空的,没有内容不会改变HTML。当你开始学习CSS,就可以添加代码到CSS文件里,看HTML刷新后的结果。

分享到:
评论

相关推荐

    css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜 

    这个“CSS基础教程”涵盖了CSS的快速入门、编写方法、属性、定位以及滤镜等核心概念,旨在帮助初学者掌握网页设计的基本技能。 1. CSS快速入门: CSS的引入是为了分离内容(HTML)和表现(样式)。通过在HTML文档...

    CSS入门教程-自学必备

    这个压缩包文件“CSS入门教程-自学必备”显然是一份专为初学者设计的资源集合,帮助他们掌握CSS的基础知识。下面我们将深入探讨CSS的相关知识点。 首先,我们要理解CSS的核心概念。CSS允许我们将样式与结构分离,这...

    韩顺平html+css+javascript-----div+css笔记

    &lt;title&gt;DIV+CSS入门案例 &lt;link href="my.css" type="text/css" rel="stylesheet"/&gt; &lt;td&gt;1 &lt;td&gt;2 &lt;td&gt;3 &lt;td&gt;4 &lt;td&gt;5 &lt;td&gt;1 &lt;td&gt;2 &lt;td&gt;3 &lt;td&gt;4 &lt;td&gt;5 &lt;td&gt;1 &lt;td&gt;2 &lt;td&gt;3 &lt;td&gt;4 &lt;td&gt;5...

    div+css入门教程.rar

    《div+css入门教程》是一份专为初学者设计的学习资料,旨在帮助用户快速掌握网页布局与样式的最基本技能。这个教程可能包含了理论讲解、实例演示以及实践练习等多个部分,以确保学习者能够全面理解并熟练运用div和...

    免费的CSS初级教程下载

    ### 免费的CSS初级教程知识点总结 #### CSS简介与作用 - **分离内容与表现**:CSS(层叠样式表)的主要优势在于它能够将网页的内容与表现形式分离,这意味着开发者可以在不影响网页结构的情况下单独修改其外观。...

    CSS入门语法---出自站长网整理

    一个简单的CSS规则写作:`selector {property: value}`。如果一个样式需要包含多个属性,它们之间用分号分隔,如:`p {text-align:center; color:red}`。 在CSS中,可以使用组合(Grouping)来为多个选择器设置相同...

    CSS初级教程,ppt,....

    本教程主要针对CSS的初级学习者,通过一系列章节来逐步介绍这一强大的样式语言。 ### 第一章:CSS基本概念 #### 第一节:什么是CSS - **HTML标志与属性**:HTML标签用于结构化网页内容,例如`&lt;p&gt;`定义段落,`&lt;h1&gt;...

    CSS3+HTML5+从入门到精通-PDF中文教程

    《CSS3+HTML5+从入门到精通》是一本针对初学者和有一定基础的学习者编写的全面教程,旨在帮助读者掌握这两个现代Web开发的核心技术。HTML5和CSS3是构建现代网页和应用程序不可或缺的工具,它们带来了丰富的交互性和...

    CSS快速入门课件--附带详细实例

    【CSS快速入门课件——附带详细实例】 在学习网页设计的过程中,CSS(Cascading Style Sheets)扮演着至关重要的角色。它允许我们控制网页的布局、颜色、字体、间距等视觉元素,使得网页看起来更加美观和易于阅读。...

    css(层叠样式表)教程--4个chm

    **CSS(层叠样式表)教程** 在网页设计领域,CSS(Cascading Style Sheets)是一种用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档样式的语言。CSS使得网页的呈现与结构分离,让设计者可以更加灵活地控制...

    CSS入门教程.pdf

    在CSS入门阶段,了解以下几个关键概念至关重要: 1. **CSS基本语法**: - CSS选择器:选择器用于匹配HTML或XML文档中的元素,如`h1`、`p`等,或者根据类名、ID等属性进行选择。 - 属性:定义元素的样式属性,如`...

    css入门教程.pdf

    为HTML文档应用CSS有三种方式: 1. **行内样式表(style属性)**:将CSS直接写在HTML元素的`style`属性内,如`;"&gt;`,但这种方式不推荐,因为它将样式与内容混合在一起,不利于代码的组织和维护。 2. **内部样式表...

    CSS入门基础经典教程

    **CSS入门基础经典教程** **一、CSS简介** 在网页设计中,CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。CSS控制了网页元素的布局、颜色、...

    CSS教程宝典-内含大量实例源代码

    **CSS(层叠样式表)**是网页设计中不可或缺的一部分...总的来说,这个CSS教程宝典是初学者入门和进阶者提升技能的理想资源。通过学习和实践,你将能够创建美观、响应式的网页设计,并掌握CSS这一强大的网页样式语言。

    DIV+CSS网页布局初级入门系列教程-4.pdf

    在这个“DIV+CSS网页布局初级入门系列教程-4”中,我们主要关注的是如何创建横向导航菜单,这是一个网页设计中的常见元素,对于提升用户体验至关重要。 首先,我们要理解HTML列表`&lt;ul&gt;`和`&lt;li&gt;`的作用。`&lt;ul&gt;`是...

Global site tag (gtag.js) - Google Analytics