文档章节

如何创建CSS

effto
 effto
发布于 2016/05/04 19:18
字数 551
阅读 12
收藏 0

一 如何插入样式表

      当读到一个样式表时,浏览器会根据它来格式化html文档。插入样式表的方式通常有三种:

      1.1外部样式表

            当样式需要应用于很多页面时,外部样式表将会理想的选择。在使用外部样式表的情况下,你可以通过改变一个文件   来改变整个站点的外观。每个页面使用<link>标签链接到样式表。<link>标签在(文档的)头部:

用法:

<head>

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

</head>  

说明:浏览器会从文件stylesheet.css中读取到样式声明,并根据它来格式文档。

外部样式表可以在任何时文本编辑器中进行编辑。文件不能包含任何的html代码。样式表应该以.css扩展名进行保存。

一下来列举一个样式表的例子:

    hr{
     color:siemma;
    }
    p{
     margin-left:20px;
    }
    body{
      background-image:url("image/back40.gif");
    }

注意:不要在属性值与单位之间留有空格。

       1.2内部样式表

             当单个文档需要特殊的样式时,就应该使用内部样式。你可以使用<style>标签在文档头部定义内部样式表。就是这样:

              

<head><style type="text/css">
  hr {color: sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}</style></head>


       1.3内联样式表

  由于要将表现和内容混杂在一起,内联模式会损坏失掉样式表的优点。请慎重用这个。

二 多重样式

      如果某些属性在不同的样式中被同样的选择器定义,那么属性值将从更具体的样式表中被继承过来。

例如:外部样式表拥有针对h3选择器的三个属性:

    h3{
      color:red;
      text-align:left;
      font-size:8pt;
    }
    而内部样式表拥有针对h3选择器的两个属性:
    h3{
      text-align:right;
      font-size:20pt;
    }
    加入拥有内部样式的这个页面同时与外部样式表的链接,那么
    h3得到的样式是:
    h3{
      color:red;
      text-align:right;
      font-size:20pt;
    }
   即颜色属性将被继承于外部样式表,而排列和字体尺度会被内部样式表中的规则取代。

© 著作权归作者所有

effto
粉丝 3
博文 56
码字总数 28418
作品 0
长春
私信 提问
最新的 Javascript 和 CSS 应用技巧荟萃

随着前端技术的发展,javascript和css在 网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过 的特效和动画,在今天...

gbin1
2012/07/10
4.5K
12
党宛玉周结

`上一周主要对css进行了学习,学习了如何创建链接,并且知道了css定义了五种通用字体Serif 字体,Sans-serif 字体,Monospace 字体,Cursive 字体,Fantasy 字体,学习了如何对字体进行大小和...

水澹澹兮欲雨曦
2015/11/17
1
1
create-react-app如何使用less/sass和react-css-modules?

create-react-app如何使用less? create-react-app如何使用sass? create-react-app如何使用react-css-modules? Thanks @pengzeya 1.create-react-app如何使用less? 安装less-watch-compil......

趁你还年轻233
2018/05/17
0
0
CSS 布局:40个教程、技巧、例子和最佳实践

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www....

望志东
2012/05/03
0
0
CSS 布局:40个教程、技巧、例子和最佳实践

前言: 布局是WEB开发一个重要的课题,进入XHTML/CSS后,使用TABLE布局的方式逐渐淡出,CSS布局以众多优点成为主流,本文将介绍40个基于CSS的web布局的资源和教程。文章的出处在http://www....

aoniao
2012/03/19
12.6K
7

没有更多内容

加载失败,请刷新页面

加载更多

Qt编写自定义控件32-等待进度条控件

一、前言 在各种各样的执行任务界面,有时候需要比较多的时间,需要给出一个直观的等待进度条表示当前正在执行的进度,而不至于懵逼在那里,用户不会觉得程序死了还是干嘛了。 等待进度条有好...

飞扬青云
8分钟前
2
0
Packagist / Composer 中国全量镜像

还没安装 Composer 吗?请往下看如何安装 Composer 。 镜像用法 有两种方式启用本镜像服务: 系统全局配置: 即将配置信息添加到 Composer 的全局配置文件 config.json 中。见“方法一” 单个...

mdoo
9分钟前
1
0
mnist文件格式说明

根据官网 http://yann.lecun.com/exdb/mnist/ 的文件格式的定义 TRAINING SET LABEL FILE (train-labels-idx1-ubyte): [offset] [type] [value] [description] 0000 32 bit integer 0x00000......

冷基
27分钟前
2
0
DNS域名解析命令 —— host

命令host 用途: 使用域名服务器查询主机名字 语法: ]# host [选项] 主机名 [服务器] 常用选项: -t 指定查询的域名信息类型 A CERT DNAME IPSECKEY MX N...

迷失De挣扎
43分钟前
3
0
Ubuntu tty中文字符乱码

默认的tty只能显示一个字节,我们可以用setfont命令去改tty字体,但仅仅局限在一个字节内,不支持UTF-8多字节,所以我们就没办法使用汉字。但是我们可以使用FbTerm啊!FbTerm是支持中文显示的...

mbzhong
今天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部