CSS教程之CSS的应用

一、In-line 行内

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

<p style="color: red">text</p> 
　　设定段落文字红色。 
　　但要记住，最后的HTML应该是独立出来，使用表现文档，所以行内样式应该在任何地方避免。

二、Internal 内部

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

<!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文件，像下面一样：

p { 
    color: red; 
}

a { 
    color: blue; 
} 
　　如果上面保存为“web.css”，HTML里面的链接就像下面：

<!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目录。

<!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刷新后的结果。

赞 (0)

相关推荐

  • CSS教程之CSS的应用

    一.In-line 行内 行内样式是在html标签里直接使用style属性 <p style="color: red">text</p>  设定段落文字红色.  但要记住,最后的HTML应该是独立出来,使用表现文档,所以行内样式应该在任何地方避免. 二.Internal 内部 使用于整个页面的植入内部样式在head标签里面,style标签包围样式. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Stri

  • CSS教程之css选择器 、属性、值

    body {      font-size: 0.8em;      color: navy;  }  上面的意思是为body选择器设置font-size字体大小和color字体颜色. 所以基本的,当它作用与HTML页面时,在body标签(整个窗口中的内容)之间的文字颜色是navy字体大小是0.8ems. 长度和百分比 CSS里面有许多属性值要指定单位,但有些基本单位被使用在一些属性上,在这之前值得属性下它们.  em比如font-size:2em给于字体计算出的大小,所以2em就是实际字体大小

  • AngularJS入门教程之AngularJS模型

    相关阅读: AngularJS入门教程之AngularJS表达式 AngularJS入门教程之AngularJS指令 在前面表达式和指令的教程中了解到,AngularJS模型(ng-model)可以将HTML输入域中的值与AngularJS创建的变量绑定. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.

  • Bootstrap布局组件教程之Bootstrap下拉菜单

    Bootstrap布局组件教程之Bootstrap下拉菜单

    本章将重点介绍 Bootstrap 下拉菜单.下拉菜单是可切换的,是以列表格式显示链接的上下文菜单.这可以通过与 下拉菜单(Dropdown) JavaScript 插件 的互动来实现. 如需使用下列菜单,只需要在 class .dropdown 内加上下拉菜单即可.下面的实例演示了基本的下拉菜单: <!DOCTYPE html> <html> <head> <title>Bootstrap 实例 - 下拉菜单(Dropdowns)</title>

  • jQuery EasyUI基础教程之EasyUI常用组件(推荐)

    jQuery EasyUI基础教程之EasyUI常用组件(推荐)

    本文主要内容是介绍EasyUI的一些常用组件的使用,都是一些非常基础的知识,适合入门者学习,主要包括Base(基础).Layout(布局).菜单和按钮.表单.窗口.表格和树等的使用.要求完全掌握这些内容,学会查阅文档,了解开发基本思想.如果想进一步深入学习,可以直接去官网进行学习,查阅文档等http://www.jeasyui.com/. 一.简介 EasyUI是一种第三方组织开发的,开源的,功能强大的,基于jquery的插件库. 主要可以用于web的后台前端.jQuery EasyUI 提供易

  • Jquery基础教程之DOM操作

    Jquery基础教程之DOM操作

    对于dom的全称大家都知道吧,DOM是Document Object Model的缩写,其意思是文档对象模型.DOM是一种与浏览器.平台.语言无关的接口,使用dom接口很容易的访问页面中所有标准组件.dom操作一般可以分为三个方面即DOM Core(核心).HTM-Dom和CSS-DOM. 每一个网页都可以用DOM表示出来,每个DOM都可以看作是一棵DOM树.下面的html页面结构可以构建出一棵DOM树,代码: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DT

  • 微信小程序 教程之WXSS

    系列文章: 微信小程序 教程之WXSS 微信小程序 教程之引用 微信小程序 教程之事件 微信小程序 教程之模板 微信小程序 教程之列表渲染 微信小程序 教程之条件渲染 微信小程序 教程之数据绑定 微信小程序 教程之WXML WXSS WXSS(WeiXin Style Sheets)是MINA设计的一套样式语言,用于描述WXML的组件样式. WXSS用来决定WXML的组件应该怎么显示. 为了适应广大的前端开发者,我们的WXSS具有CSS大部分特性. 同时为了更适合开发微信小程序,我们对CSS进行

  • Zend Framework教程之Application和Bootstrap用法详解

    本文实例讲述了Zend Framework教程之Application和Bootstrap用法.分享给大家供大家参考,具体如下: 在一个MVC应用程序中,我们需要初始化建立数据库链接,配置视图和视图助手,配置布局,注册相关插件,注册action 助手等等,这些配置和准备工作我们都需要一一完成.有时候可能有一些初始化操作需要,但是在有些情况下这些初始化可能不需要.通过Zend_Application不仅仅可以完成这些操作,而且可以让这些配置和初始化工作更统一有序,重用性更高. Zend_Appli

  • Angular4学习教程之DOM属性绑定详解

    Angular4学习教程之DOM属性绑定详解

    前言 DOM 元素触发的一些事件通过 DOM 层级结构传播,事件首先由最内层的元素开始,然后传播到外部元素,直到它们到根元素,这种传播过程称为事件冒泡.本文主要介绍了关于Angular4 DOM属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介 使用插值表达式将一个表达式的值显示在模版上 <img src="{{imgUrl}}" alt=""> <h1>{{productTitle}}</h1&

  • Angular4学习教程之HTML属性绑定的方法

    Angular4学习教程之HTML属性绑定的方法

    前言 本文主要给大家介绍了关于Angular4 HTML属性绑定的相关内容,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 简介 基本HTML属性 <td [attr.colspan]="tableColspan"></td> Css 类绑定 <!-- 第一种情况 class 类全部替换 --> <div [class]="divClass">CSS 类绑定,[class] 全部替换的例子</d

随机推荐