创建CSS有三种方式: 外部样式表, 内部样式表和内联样式。

  • 外部样式表

先建立外部样式表文件(.css)，然后在网页文件的<head>内使用<link>链接。这种方式将样式文件彻底与html文档分离，一批样式可以控制多份文档。

以下是一份简单的css文件和一个html：

h1 {font-size: 15px; font-weight: bold; color: red;}
<head>

     <title>title of article</title>

     <!--  这里的link元素可以使用绝对路径，也可以使用相对路径-->

     <link rel="stylesheet" href="css/main.css" type="text/css">

</head>

<body>

</body>
  • 内部样式表

直接在<head>标签内插入<style>...</style>块，注意是写在html的head里面，这种方式每批样式只能控制一份文档。

<html>

<head>

<style type="text/css">

   h2 {font-size: 15px; font-weight: bold; color: blue}

</style>

</head>

<body>

</body>
  • 内联样式

在标签的style属性中定义样式。这种方式将样式内联定义到具体的html元素，这种方式通常用于精确控制一个html元素的表现。在这种方式下，没份CSS样式只控制单个的html元素。注意：不推荐使用该方式！将结构与表现混杂在一起，丧失样式表原有的优势！

<h3 style="font-size:14px;color:green;">

	h3标签内的内容!

</h3>
  • 各种样式设置方式的优先级，按从高到低的顺序依次为：

内联样式-->内部样式表-->外部样式表-->浏览器缺省样式。

如果不同样式的作用范围出现重叠，则高优先级样式将覆盖低优先级的设置。

其实关于CSS，我们需要牢记的是：在定义一个css样式的时候，我们需要指定2个部分，一个是选择器（selector），一个是属性（property：value）。选择器决定我们写的css对于那些html元素起作用，属性决定这些css对这些html起什么样子的作用。如果要使用内联样式，将属性直接定义在html元素的style属性里面了，所以不用指定选择器了。

CSS样式主要由三部分组成：选择器(Selector)，属性名(Property)，属性值(Value)。例如：
p {color:#aa66cc}

h2 {text-align:center; color:red}

p.mystyle1 {font-size:20px; color:blue}

p.mystyle2 {font-sytle:italic; font-size:40px; color:#00ffff; text-align:center}

h1,h3,h4,h5,h6,p.mystyle3 {text-align:center; color:green}

.mystyle {text-align:right; color:ff00ff}
  • 注意事项

1、多个属性值用分号隔开,最后一个可加也可不加;

2、如下写法可读性更好些；

p {

     text-align:center;

     color:black;

     font-size:20px;

}

3、CSS对大小写不敏感，但在选择器中对class和id名称也不敏感；

4、注释符号 /*  注释内容 */

  • CSS注释
/*设置段落显示样式*/

p {text-align:center;   /*文本居中*/

color:red	/*字体为红色*/

}

CSS--使用方式的更多相关文章

  1. css引入方式

    1.<style>          body{}    </style> 2.写在一个单独的文件里面保存即新建一个文件:xx.css; 注明该文件的位置<link re ...

  2. CSS hack方式一览【转】

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  3. 史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  4. [转]史上最全的CSS hack方式一览

    做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现.我个人是不太推荐使用hack的,要知道 ...

  5. 细谈CSS布局方式

    一.CSS布局方式分类 [1].默认文档流方式:以默认的html元素的结构顺序显示 [2].浮动布局方式:通过设置html的float属性显示,值:none不浮动.left对象向左浮动,而后面的内容流 ...

  6. CSS引入方式的区别详解

    在web前端开发中,CSS是一种用来表现HTML或XML等文件样式的语言.很多处于web前端初学阶段的朋友,很多人都不知道CSS引入方式存在三种方法,css引入方式分别为标签内联书写.页面头部书写.外 ...

  7. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

  8. CSS hack方式

    史上最全的CSS hack方式一览   做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我们会极不情愿的使用这个不太友好的方式来达到大家要求的页面表现 ...

  9. 更便捷的css处理方式-postcss

    更便捷的css处理方式-PostCSS 一般来说介绍一个东西都是要从是什么,怎么用的顺序来讲.我感觉这样很容易让大家失去兴趣,先看一下postcss能做点什么,有兴趣的话再往下看,否则可能没有耐心看下 ...

  10. CSS引用方式及样式层叠机制

    CSS引用方式有3种,三种分别为:外部引入.内部引入.行内样式,下面一 一进行介绍. 1.外部引入:CSS代码在一个独立的文件中,HTML通过Link标签引入到页面. 代码格式:<link re ...

随机推荐

  1. Java学习笔记13（面向对象六：super）

    在创建子类对象时,父类的构造方法会先执行,因为子类中所有构造方法的第一行有默认的隐式super();语句 注意:父类构造方法第一行也有隐式的super(); 所有类都有一个"祖宗类" ...

  2. Qt 之 qwt 和 qwtpolar

    1  Qwt Qwt 全称为 Qt Widgets for Technical Applications,用于专业技术领域的可视化显示,如下所示: 左图为自动控制领域,二阶系统的频率响应:中图为德国小 ...

  3. MQTT Server搭建（apache-apollo）和MQtt Client搭建

    目标 本文就MQTT server和client搭建做以下总结,方便测试及开发使用,能基于MQTT软件发送和接收消息. 介绍 MQTT是基于tcp的消息发送,目前JAVA方面有两种实现,分别是mqtt ...

  4. CTF---编程入门第一题 循环

    循环分值:10 来源: 北邮天枢战队 难度:易 参与人数:1478人 Get Flag:467人 答题人数:523人 解题通过率:89% 给出一个循环公式,对于一个整数n,当n为奇数时,n=3n+1, ...

  5. Vijos P1448 校门外的树【多解，线段树，树状数组，括号序列法+暴力优化】

    校门外的树 描述 校门外有很多树,有苹果树,香蕉树,有会扔石头的,有可以吃掉补充体力的…… 如今学校决定在某个时刻在某一段种上一种树,保证任一时刻不会出现两段相同种类的树,现有两个操作: K=1,K= ...

  6. [bzoj1223] [HNOI2002]Kathy函数

    首先由题解可得TAT,f(i)=i当且仅当i在二进制下为回文串. 那么问题就变成了1~n中有多少个二进制下的回文串. 把m转成2进制后就是正常的统计了= =. f[i]表示二进制下,有多少个i位的回文 ...

  7. poj_3281Dining（网络流+拆点）

    poj_3281Dining(网络流+拆点) 标签: 网络流 题目链接 题意: 一头牛只吃特定的几种食物和特定的几种饮料,John手里每种食物和饮料都只有一个,问最多能够满足几头牛的需求(水和食物都必 ...

  8. c++(hash表)

    hash表,有时候也被称为散列表.个人认为,hash表是介于链表和二叉树之间的一种中间结构.链表使用十分方便,但是数据查找十分麻烦:二叉树中的数据严格有序,但是这是以多一个指针作为代价的结果.hash ...

  9. jquery 和 mui 上拉加载

    jquery: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <m ...

  10. git学习四：eclipse使用git提交项目

    支持原创:http://blog.csdn.net/u014079773/article/details/51595127 准备工作: 目的:eclipse使用git提交本地项目,提交至远程githu ...