转自：http://www.cnblogs.com/xingxingchongchong/p/6501575.html

css样式表按其所在位置分三种：

1.内嵌样式表

2.内部样式表

3.外部样式表

下面详细解释一下：

1.内嵌样式表是写在使用它的标签(Tag)内的，例如要在<p>标签中使用，

其语法为：<p style font-size:20pt>这段文字使用了内嵌样式表，更改了字体大小为20</p>

2.内部样式表不同于内嵌样式表，其是写在html网页的<head></head>标签之间的，所以它对本网页全部有效。应注意的是，因为它不是写在某一个标签内的，所以在写的时候要注意，自己想在那个标签内使用这个样式表，再定义的时候也要写清楚，否则会造成整个页面的混乱。例如：

<html><head>

p.mylayout <style type="text/css">{font-size:22pt; color:blue; border-width:1px; border:double; text-align:center; }</style></head>

<body>

<!--这个样式表只用了一部分属性，定义是在<style>前面的p.mylayout，这里面的p意思是在<p>这个标签里才可以使用这个样式表，而mylayout是这个样式表的名字，也可以理解为这个样式表的变量名（把一个样式表当成一个变量），便于以后在<p>标签中调用。注意下面的调用。--->

<p class="mylayout">这段文字使用了样式表</p>

<p>这段文字没有使用样式表</p>

</body></html>

可以看到，在定义内部样式表的时候，<style>前面声明的时候应该首先声明在哪个标签里使用这个样式表，如果并不想在该网页所有的此标签中都使用这个样式表则在声明的标签后面加上自己定义的一个样式表名称，例如上面的p.mylayout，意为只能在该网页的<p>标签中使用此样式表，在要使用这个样式表的<p>标签中声明，声明方式为<标签 自定义样式表名称>

利用样式表选择，你可以用同样的HTML标签构成不同的样式。比如说，你希望段落<p>有两种样式，一种是居中对齐，一种是居右对齐。你就可以写如下样式：
p.right {text-align:right}

p.center {text-align:center}

其中right和center就是两个样式表。然后你就可以引用这两个样式表，示例代码如下：

<p class="center">这一段居中显示。</p>

<p class="right">这一段是居右显示。</p>
也可以不用HTML 标签，直接用“.”加上样式表名称。示例代码如下：

.center {text-align: center}

这种通用的样式表名称就没有标签的局限性，可以用于不同的标签。比如：

<h1 class = "center">这个标题居中显示。</h1>

<p class = "center">这个段落居中显示。</p>

3.外部样式表

外部样式表就是将样式表的内容单独写到一个notepad中，并保存为后缀为.css的文件，在你写的想要调用的网页中加上如下的代码（当然还是加到<head></head>之间）：

<link href="你css文件所在的文件夹" rel="stylesheet" type="text/css">

例如：

先写一段代码并存为p.css

p.mylayout {font-size:20pt; border-width:1px; color:blue; }

然后在你写的网页中调用这个样式表：

<HTML>

<HEAD>

<link href="p.css所在的相对路径" rel="stylesheet" type="text/css">

</HEAD >

<BODY>

<p class="mylayout"> 这个标题使用了Style 。</p>

欢迎光临学网,收藏本篇文章 [1] [2]

$False$

<p>这个标题没有使用Style。</p>

</BODY>

</HTML>

所以一个外部样式表可以被很多网页调用，这就是外部样式表的好处。

样式表也可以串联，即一个网页用多个css，其串联的顺序是：内嵌>内部>外部>浏览器自身的

也就是说当一个网页有内部css时，它在的调用外部css就被覆盖了（即外部css不起作用）

css样式表定义时的嵌套说明：

p b {color:blue;}

使用时：<p>这段文字在b标签中的为<b>蓝色</b></p>

cursor:hand 这个属性是将鼠标变成手的形状。

CSS中style用法详解的更多相关文章

  1. css中border-radius用法详解

    border-radius:由浮点数字和单位标识符组成的长度值.border-top-left-radius --- 左上border-top-right-radius --- 右上border-bo ...

  2. AngularJS select中ngOptions用法详解

    AngularJS select中ngOptions用法详解   一.用法 ngOption针对不同类型的数据源有不同的用法,主要体现在数组和对象上. 数组: label for value in a ...

  3. css 之position用法详解

    css  之position用法详解: http://www.jb51.net/web/77495.html

  4. C++中的STL中map用法详解(转)

    原文地址: https://www.cnblogs.com/fnlingnzb-learner/p/5833051.html C++中的STL中map用法详解   Map是STL的一个关联容器,它提供 ...

  5. DIV css中cursor属性详解-鼠标移到图片变换鼠标形状 (转)

    css中cursor属性详解-鼠标移到图片变换鼠标形状   语法: cursor : auto | all-scroll | col-resize| crosshair | default | han ...

  6. C++中const用法详解

    本文主要内容来自CSDN论坛: http://bbs.csdn.net/topics/310007610 我做了下面几点补充. 补充: 1. 用const声明全局变量时, 该变量仅在本文件内可见, 类 ...

  7. CSS中background属性详解

    CSS背景属性 background css 说明 background-image:url(图片的网址); 背景图 background: url( 图片的网址 ); 背景 background-c ...

  8. css中em单位详解，说明

    em详解      em可以理解成“倍”. em会以父级元素中所设置的字体像素值为基准值进行成倍放大: 字体大小=(父级元素中的字体像素 * em的值) 例: 网页部分代码如下: 1.我现在没有在父级 ...

  9. AngularJS中transclude用法详解

    这篇文章主要介绍了AngularJS中transclude用法,详细分析了transclude的具体功能.使用技巧与相关注意事项,需要的朋友可以参考下 本文实例讲述了AngularJS中transcl ...

随机推荐

  1. crontab 实际的应用

    每二天执行一次: 0 0 */2 * * command #注意分,时不能为星*,否则每分钟执行 每天零晨01,03执行: 0 01,03 * * * command 每2小时执行一次 0 */2 * ...

  2. 使用RTL-SDR，从打开一个车门到批量打开车门

    在最近几年,入侵汽车在当代社会的黑客圈中成为热点,很多文章表明汽车产业还有很多东西等待完善,在本篇文章中,我会让你熟悉我一直研究的一些概念,以及如何在网状网络中使用一些便宜的部件渗透远程开门系统. 软 ...

  3. C++常用字符串分割方法

    一.用strtok函数进行字符串分割 原型: char *strtok(char *str, const char *delim); 功能:分解字符串为一组字符串. 参数说明:str为要分解的字符串, ...

  4. 最近遇到的C++数字和字符串的转换问题

    1. 用itoa 和atoi  在头文件#include<cstidlib> itoa用法: char * itoa ( int value, char * str, int base ) ...

  5. [BLE]CC2640之ADC功能实现和供电电压的採集

    一.开篇 Write programs that do one thing and do it well ~~~~~ 发现非常多人关于使用CC2640/CC2650的过程中比較难以应对的问题就是实现A ...

  6. 我的c++server记录----非堵塞下的socket读取操作

    server端的主要的一个操作就是从socket的fd上进行数据读取.也就是我们经经常使用到的read函数. 欢迎关注我的server代码:http://code.taobao.org/p/fastS ...

  7. php中的register_shutdown_function和fastcgi_finish_request

    在php中又两个方法都是在请求快结束的时候执行.方法名分别是 register_shutdown_function和fastcgi_finish_request.虽然执行的时机差不多,但是功能和应用场 ...

  8. 代码调试过程中easy遇到的问题

    前两天身体有些不舒服,也没写啥新文章,昨天下了一天的雨.今天阳光明媚,空气也非常新奇.心情大好. 继翻译为什么输出是String而不是Object,今天先写一下调试方面的东西.java中自带的函数调试 ...

  9. Quick-Cocos2d3.2RC1在Code IDE中实现代码提示

    之前写Lua最痛苦的就是代码提示问题,如今官方给了IDE很好用.以下说Quick使用IDE加入代码提示问题. 第一步:制作api提示压缩包. 须要使用控制台实现方法例如以下: 1.找到framewor ...

  10. eclipse配置android

    先在eclipse中安装ADT插件,install内点击add,name:ADT, URL:http://dl-ssl.google.com/android/eclipse/ 之后直接finish就好 ...