解析CSS放入网页的几种方式

开发 前端
本文向大家介绍一下CSS放入网页的几种方式,主要包括行内套用和汇入套用等两大部分内容,以及DIV+CSS中其它最常用的布局标签的用法。

你对把CSS放入网页的方法是否了解,这里和大家分享一下CSS放入网页的几种方式,相信本文介绍一定会让你有所收获。

CSS放入网页的几种方式
  
行内套用

  ◆我们可以在HTML文件内直接宣告样式。

       举例来说,Thisisfontsize16.
  以上的HTML文件在浏览器上会显现为:Thisisfontsize16.

  ◆嵌入套用样式可以嵌入于HTML文件中(通常是在<head>内)。

       举例来说

  1. <head><styletypestyletype="text/css"> 
  2. div{div{background-color:#FF0000;}</style></head><body>背景颜色是红色</body> 

  以上的HTML会显现出:背景颜色是红色
  外部连接套用在这种方式下,所有的CSS样式宣告都是存在另外一个档案中。该档案通常名称为.css。

  在HTML文件的<header>..</header>之中,我们将用以下的程式码将这个.css档案连接进入:  

  1. <linkrellinkrel=stylesheettype="text/css"href="external-stylesheet.css"> 

  以上这一行会将在external-stylesheet.css这个档案内所宣告的样式加入HTML文件内。
  
汇入套用

       汇入套用外部的CSS样式也可以被汇入进HTML文件。
  汇入的做法为利用@import这个指令。

  @import的语法为

  1. <STYLETYPESTYLETYPE="text/css"><STYLETYPESTYLETYPE="text/css"><</STYLE> 
  2. @import">!--@importurl(http://www.divhome.com/#.mysite.com/style.css);  
  3. @importurl(</STYLE> 

  @import指令最初的用意,是为了能够针对不同的浏览器而运用不同的样式。不过,现在已经没有这个必要。现在用@import的目的,最常是要加入多个CSS样式。当多个CSS样式被   @import的方式加入,而不同CSS样式互相有冲突时,後被加入的CSS样式有优先的顺位(详情请见CSS串接)。
  
DIV+CSS中其它最常用的布局标签

  h1

     这个标签或许真正会去用的人很少,因为它显示的字体真的是太"大"了,但我们是CSSer,有什么标签样式不能改呢?而且它所能表达的意思就如同它原先的作用一样明显(大标题)我想你已经知道怎么去用它了^_^. 

      ul

    这个标签很多情况是用来定义导航部分的,当然也可以用ol来代替,但导航连接没有什么顺序之分吧,所以还是用ul来的比较确切(去掉CSS后效果更明显). 

  b

    这个已经不再推荐使用的标签,在布局上却能带来不少的方便(因为短),虽然我不是太赞成使用这个标签,但有些时候(比如细小地方的布局定义)还是不错的选择

  h2
   
    h2使用最多的地方应该不是布局上,而是副标题,但有些地方需要定义栏目样式的话,用这个标签比较合适,栏目内容就使用p。

【编辑推荐】

  1. DIV+CSS中常见十大错误总结
  2. 使用DIV+CSS布局网站的六大优点
  3. 深入学习DIV+CSS之绝对定位和相对定位用法
  4. 深入剖析使用DIV+CSS布局网站的优点和缺陷
  5. DIV+CSS开发过程中影响SEO的制作细节
责任编辑:佚名 来源: hi.baidu.com
相关推荐

2010-09-01 11:29:04

CSS

2010-07-30 09:16:24

Flex数据绑定

2010-09-07 13:10:48

CSS样式表CSS

2016-02-16 10:26:58

PythonXML方式

2010-09-09 23:14:45

2013-03-27 11:33:32

iOS开发iOSjson解析方式

2010-09-10 10:36:30

DIV CSS

2011-06-16 17:05:54

CSS

2010-09-02 10:35:51

DIV+CSS

2019-11-18 16:20:48

RedisRDB数据库

2010-09-06 13:36:45

CSS样式表CSS

2019-12-27 18:07:53

Python网络爬虫HTML

2010-09-01 10:42:11

DIV+CSS

2010-09-06 16:09:58

CSS样式CSS

2010-08-17 11:12:18

DIV CSS

2021-05-07 16:19:36

异步编程Java线程

2010-09-25 14:48:55

SQL连接

2021-01-19 11:56:19

Python开发语言

2010-08-06 15:35:06

Flex服务器

2010-08-16 12:54:53

DIVCSS
点赞
收藏

51CTO技术栈公众号