在网页中使用css的几种方式

作者&投稿:尧肢 (若有异议请与网页底部的电邮联系)
HTML中引入CSS样式有几种形式~

有四种形式:
1.链入外部样式表,就是把样式表保存为一个样式表文件,然后在页面中用链接这个样式表文件.
2.内部样式表,就是把样式表放到页面的区里.
3.导入外部样式表,用@import,在与
<!--
@import "*.css"
-->

4.内嵌样式,就是在标签内写入style="",比如:
设置表格左边框的颜色为灰色.

CSS样式表定义的基本语法:
Select { property1 : value, property2: value2 }

CSS样式表一共分3种,分别是:
1、内联样式表:
内联样式表是写在标记内的,只对所在标记有效。
2、内部及联样式表:
利用标记将样式表嵌在HTML文件的头部。
3、外部级联样式表:
使用标记可以将样式表链接到网页上。

CSS样式表的优先级:(由低到高)
浏览器默认(优先级最低)
外部级联样式表
内部及联样式表
内联样式表(优先级最高)

(1)使用Embed(嵌入样式单)排版样式:

即将CSS代码直接插入每个页面的HTML的<head>区,就象上一节看到的。使用<style>...</style>标签。例如:

<style type="text/css">
<!--
h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
-->
</style>

(2)使用“link(外部样式单)排版样式”:

即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件(一个扩展名是css的文本文件)将设定你所有网页的规则。如果你改变样式单文件中的某行,所有页面风格用这个css文件定义的页面都会随之改变。如果你的站点文件非常多,则这项功能就非常方便了。

在<HEAD>区内使用<LINK>标签(注意:不再是<style>标签了):

<HTML>
<HEAD>
<LINK REL=stylesheet HREF="http://yoursute.com/my.css"; TYPE="text/css">
</HEAD>
<body>
<h2>你好!朋友,欢迎光临Java2000的教学区。</h2>
<h1>Hello,everybody,welcome in java2000 !</h1>
</body>
</html>

★☆★说明:css文件的路径用绝对路径http://...)表示或者用相对路径(例如:../csscode/my.css)表示都可以。

然后再单独生成一个css文件,叫做my.css (随便起名)。文件内容如下:

h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}

只要将这个CSS文件上传到服务器指定的目录即可。

(3)使用"inline(行内样式单)排版样式":

inline样式单采用HTML标签的“style”属性,它的特点是“定义某一个标签的式样单风格”,只对所定义的标签起作用,并非对整个页面起作用。例如:

<p style="font-size: 14pt ; color: #99ff99 ; font-family: 宋体">层叠式样单</p>

看到的效果:

层叠式样单

使用行内样式单,你必须为每行指定样式规则,否则下一行时浏览器将使用页面的缺省设置。 但是:有时候这种方式却非常有效。

(4)使用“import(输入的外部式样单)”--适用于IE浏览器。

<html>
<head>
<style type="text/css">
<!--
@import url(my.css);
-->
</style>
</head>
<body>
<h3>输入的外部式样单</h3>
</body>
</html>

楼上说的对主要就这4种、
建议使用第2种~便于修改 调用 和优化,

(1)使用Embed(嵌入样式单)排版样式:

即将CSS代码直接插入每个页面的HTML的<head>区,就象上一节看到的。使用<style>...</style>标签。例如:

<style type="text/css">
<!--
h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}
-->
</style>

(2)使用“link(外部样式单)排版样式”:

即你可以将多个页面的排版风格都用一个样式单文件控制。这个外部的样式单文件(一个扩展名是css的文本文件)将设定你所有网页的规则。如果你改变样式单文件中的某行,所有页面风格用这个css文件定义的页面都会随之改变。如果你的站点文件非常多,则这项功能就非常方便了。

在<HEAD>区内使用<LINK>标签(注意:不再是<style>标签了):

<HTML>
<HEAD>
<LINK REL=stylesheet HREF="http://yoursute.com/my.css"; TYPE="text/css">
</HEAD>
<body>
<h2>你好!朋友,欢迎光临Java2000的教学区。</h2>
<h1>Hello,everybody,welcome in java2000 !</h1>
</body>
</html>

★☆★说明:css文件的路径用绝对路径http://...)表示或者用相对路径(例如:../csscode/my.css)表示都可以。

然后再单独生成一个css文件,叫做my.css (随便起名)。文件内容如下:

h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; color: #FF0033; background-color: #FFCCCC}
h1 { font-family: "Arial"; font-size: 12pt; color: #66FF66}

只要将这个CSS文件上传到服务器指定的目录即可。

(3)使用"inline(行内样式单)排版样式":

inline样式单采用HTML标签的“style”属性,它的特点是“定义某一个标签的式样单风格”,只对所定义的标签起作用,并非对整个页面起作用。例如:

<p style="font-size: 14pt ; color: #99ff99 ; font-family: 宋体">层叠式样单</p>

看到的效果:

层叠式样单

使用行内样式单,你必须为每行指定样式规则,否则下一行时浏览器将使用页面的缺省设置。 但是:有时候这种方式却非常有效。

(4)使用“import(输入的外部式样单)”--适用于IE浏览器。

<html>
<head>
<style type="text/css">
<!--
@import url(my.css);
-->
</style>
</head>
<body>
<h3>输入的外部式样单</h3>
</body>
</html>

  css样式表嵌入网页常用的有以下三种方法:

  1,内联样式
  内联样式是直接在html标签上定义该标签的css样式,如:

  <div style="width:100px;height:100px;"></div>

  2,内部样式
  内部样式是写在html文件中,且包含在<style></style>代码块中,style写在head里面如:

  <style>
  div{width:100px;height:1000px;}
  </style>
  <div></div>

  3,外部样式
  外部样式是通过在html中引用外部css文件来控制样式,如:
  html文件中写入引用语句:

  <link href="css文件路径" rel="stylesheet" media="screen" />

三种方式
1.写在页头的<head></head>之间,放在<style>标签里面
2.写在标签里,比如<div style="display:none"></div>
3.写在外部css文件里,在页面用<link />标签引入,这个标签一般放在页头,例如
<link href="index.css" type="text/css" rel="stylesheet"/>
好了,分给我吧...


网页中CSS的概念和作用
它的作用可以达到:(1)在几乎所有的浏览器上都可以使用。(2)以前一些非得通过图片转换实现的功能,现在只要用CSS就可以轻松实现,从而更快地下载页面。(3)使页面的字体变得更漂亮,更容易编排,使页面真正赏心悦目。(4)你可以轻松地控制页面的布局 。(5)你可以将许多网页的风格格式同时更新,...

如何让文字在网页中居中对齐?
要让文字在HTML网页中居中,你可以使用CSS来设置文本的居中对齐方式。以下是几种常见的方法:文本水平居中:使用CSS的text-align属性来水平居中文本。将该属性应用于包含文本的HTML元素,如或。.center-text { text-align: center;}这是居中的文本。文本垂直居中:垂直居中文本通常需要更多的CSS样式。你...

在下列选项中,使用css代码实现给网页中所有标签添加背景颜色的是...
应用最为广泛的伪类是链接的4个状态:未链接状态(a:link);已访问链接状态(a:visited);鼠标指针悬停在链接上的状态(a:hover);被激活(在鼠标单击与释放之间发生的事件)的链接状态(a:active)。给网页中所有<h1>标签添加背景颜色的css代码为h1{background-color:#00f00;}。

在网页制作中CSS是什么意思?
(4)你可以轻松地控制页面的布局 。(5)你可以将许多网页的风格格式同时更新,不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制,只要修改这个CSS文件中相应的行,那么整个站点的所有页面都会随之发生变动。想一想,没有使用CSS前我们是如何控制字体的颜色和大小以及所...

如何使用css设置文字在网页中显示居中?
1、打开编辑器,新建test.html,用于学习今天的内容。2、接下来需要在head标签下方引入jquery.min.js插件,如下图所示。3、在页面的body标签里,新建一个div,名称为test。4、在body标签下方写上,用来存放js代码。通过class定位到div,通过css()方法让文字居中。5、在浏览器中打开test.html,可以在文字...

1.CSS指的是什么?在网页制作中为什么要使用CSS技术? 2.网页制作中有哪...
1.css是网页表现与内容分离的一种样式设计语言,就比如每个人都有一双眼睛、两只耳朵、两个鼻孔、一个嘴巴,而长的丑的人只是他的面部样式不符合大众的审美观。2.网站制作中之所以要使用css,是为了让页面布局样式等更加美观从而吸引更多阅读者。就好比一个五官精致的美女大家都爱看一样!3.①行内样式...

在网页中的CSS是什么东西
打个比方,整个web程序就像一个人,人有头、四肢等,这是人的基本构架,也是最基本的,没有这些,人就不能称之为人;同样web文档结构就是web程序中最基本的东东。那样式表就好像人的衣服,它是web文档的衣装,有了它,web网页才显现出千姿百态。有人要问了,那以前没有CSS说法时,web页面设计也是...

做网页中提到的CSS页面是什么意思?
内部样式表(Internal Sytle Sheet)要用到Style这个Tag,写法如下:<STYLE type="text\/css"> ...<\/STYLE> 外部样式表(External Style Sheet)如果很多网页需要用到同样的样式(Styles),用什么方法呢?将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用...

如何在html网页内引入css样式.?
1.调用外部CSS文件: 2.内部样式:例子: body {width:100px;} 3局部样式:例子:

html中使用css定义样式的元素、ID和类分别是什么意思?
input{样式}二、ID:如果想在网页中某个特定地方使用css,这时候就可以给那个元素一个ID,在样式的时候,ID前面要加“#”,比如:想对ID为test的表格应用一个css样式,可以写作 #test三、类就是大多数情况下都可以调用的,在前面要加个“.”,然后在使用的时候用 “class=类名”

白下区19713766780: 在网页中使用css的几种方式 -
尔韩清眩: (1)使用Embed(嵌入样式单)排版样式: 即将CSS代码直接插入每个页面的HTML的<head>区,就象上一节看到的.使用<style>...</style>标签.例如:<style type="text/css"> <!-- h2 { font-family: "宋体"; font-size: 12pt; font-style: italic; ...

白下区19713766780: 在网页中应用css样式表的方法有哪些 -
尔韩清眩: 1、直接在html标签元素内嵌入css样式,如<div style="font-size:14px; color:#FF0000;">我是div css测试内容-www.divcss5.com支持</div> 2、在html头部head部分内style声明插入代码如下: <style type="text/css"> .ceshi {font-size:14px; ...

白下区19713766780: CSS的引入方式有什么?
尔韩清眩: css主要有三种引用方法: 1,内部引用,在html文档中在<style>标签里面写的css样式 <style> bdoy{font-size:14px;} </style> 2,外部引用,用<link>标签引用外部的css文件,将样式引用到html文档来. <link rel="stylesheet" type="text/css" href="style.css"> 3,在标签中使用,使用style属性将当前的标签样式改变. <div style="color:red"></div>

白下区19713766780: HTML里使用CSS 的几种方式 -
尔韩清眩: 有三种: 第一:网页调用外部css(在外部写好一个css文件,然后链接形式调用进来) 第二种:网页内部css(一般都是放在head部分,用<style></style>标签套起来,下图方框内就是css) 第三种:内嵌css(就是直接写在html代码标签内部) 以上三种形式,优先级最大的是第三种,其次是第二种,最后是第一种!

白下区19713766780: css写好了,怎么搞到网页里 -
尔韩清眩: 在网页中使用CSS有三种方法:1、用链接方式调用CSS文件,如:2、在网页中直接写入,如: 你要的样式3、在网页元素中写入CSS样式,如:

白下区19713766780: 举例说明css加入网页的3种方式
尔韩清眩: 第一种:外部调用 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <link rel="stylesheet" type="text/css" href="index.css" media="screen" /> </head> <body> </body> </html> 第二种:(不会怎...

白下区19713766780: html中使用css定义样式的方式有哪些?哪种方式优先级最高? -
尔韩清眩: 在HTML中常用以下3种方式定义CSS:Embedding(嵌入式)、Linking(引用式)、Inline(内联式) 一、嵌入式:使用HTML的style元素,在文档中定义CSS样式 <head> <style type="text/css"> h1{color:red} p{color:blue} </style> <head> 二、...

白下区19713766780: CSS样式表在网页上有哪几种存在方式? -
尔韩清眩: 3种 嵌入(写在外部css文件中) 内联(写在网页里的之间) 行内(直接写在元素上,如)

白下区19713766780: 在html中怎样使用css样式 -
尔韩清眩: 在html网页中引入引入css主要有以下四种方式:(1)行内式<p style=”color:red”>网页中css的导入方式</p> (2)嵌入式<style type=”text/css”> P{ color:red }</style> 嵌入式一般写在head中,对于单个页面来说,这种方式很方便.(3)导入式<!...

白下区19713766780: 在页面中引用CSS有几种方式?PHP中的哦 -
尔韩清眩: 在页面中使用CSS有3中方式:1. 引用外部CSS文件2. 内部定义Style样式3. 内联样式

本站内容来自于网友发表,不代表本站立场,仅表示其个人看法,不对其真实性、正确性、有效性作任何的担保
相关事宜请发邮件给我们
© 星空见康网