`
huiqinbo
  • 浏览: 344506 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

<style type=text/css>中的type=text/css到底是什么意思

    博客分类:
  • css
 
阅读更多

最佳答案

type="text/css"是指定MIME类型,其中:   
  text是指对象为网页中的文本   
  css或是javascript是指当前指定的文本类型...
如果要在HTML文件中应用CSS样式,最常用的有三种方法:

1.内部引用

所谓内部引用就是运用style标签引用在同HTML页内<HEAD></HEAD>部分的css定义。如:

<html>

<head>
<style type="text/css">
.cssstyle { font:12px;

      color:#339966;

      border:1px #e1763d solid;

}
<style/>
</head>

<body>

<div class="cssstyle"> THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>

</body>

</html>

2.外部引用

外部引用就是用<link>标签引用外部CSS文件中的样式。如欲实现上述效果,可将CSS做成单独文件。

文件CSSSTYLE.CSS

 

.cssstyle { font:12px;

      color:#339966;

      border:1px #e1763d solid;

}

然后在HTML引用它:

<html>

<head>

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

</head>

<body>

<div class="cssstyle"> THIS IS A PARTS OF TEXT WHICH LINK CSS STYLE IN HEAD PART</div>

</body>

</html>

使用这种方法引用要确保CSS文件和HTML文件的相对路径完整无误,要不然HTML文档是不会找到CSS样式的。

3.内联引用

内联引用其实就是在应用CSS样式的HTML部分直接在所做用的标签上定义CSS样式,这种方法最直接,但是缺点也最明显,最大的问题就是代码繁冗,作用域也仅仅在定义的标签的作用范围。如:

<p style="color:#ccc">THIS TEXT IS GREY</p>

<p>I AM NOT GREY, WHAT COLOR AM I? :)</p> 
分享到:
评论

相关推荐

    学生网页制作

    &lt;link href="css/style.css" rel="stylesheet" type="text/css" /&gt; &lt;script type="text/javascript" src="js/js/myfocus-2.0.1.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript"&gt; myFocus.set({ id:'demo', ...

    jsp新闻发布系统

    &lt;style type="text/css"&gt; &lt;!-- .url { font-weight: bold; color: #666666; background-position: center; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-...

    图书管理系统代码

    &lt;style type="text/css"&gt; .STYLE1 { font-size: 36px; font-weight: bold; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;form name="form1" method="post" action="valid.jsp"&gt; &lt;table width="400" height="120" border="1" ...

    CSS3图片3D旋转轮播特效.zip

    link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" /&gt; &lt;link rel="stylesheet" type="text/css" href="css/demo.css?3.1.64"&gt; &lt;link rel="stylesheet" href="css/style.css?3.1...

    精通CSS mastery 源代码

    &lt;style type="text/css"&gt; &lt;!-- /* Pretty Stuff ================================== */ /* Zero down margin and paddin on all elements */ * { margin: 0; padding: 0; } body { font: 62.5%/1.6 "Lucida ...

    利用CSS控制表格table的交替颜色

    &lt;style type="text/css"&gt; tr:nth-child(odd) { background-color: red; } tr:nth-child(even) { background-color: blue; } &lt;/style&gt; &lt;table&gt; &lt;tr&gt;&lt;td&gt;1&lt;/td&gt;&lt;td&gt;1&lt;/td&gt;&lt;/tr&gt; &lt;tr&gt;&lt;td&gt;2&lt;/td&gt;&lt;td&gt;2&lt;/td&gt;&lt;/tr...

    一个简单的网页设计

    &lt;option&gt;学生&lt;/option&gt;&lt;option&gt;一年&lt;/option&gt;&lt;option&gt;二年&lt;/option&gt;&lt;option&gt;三年&lt;/option&gt;&lt;option&gt;三年到五年&lt;/option&gt;&lt;option&gt;五年到十年&lt;/option&gt;&lt;option&gt;十年以上&lt;/option&gt; &lt;/select&gt; &lt;/div&gt; ...

    2天掌握DIV+CSS网页制作技术

    内嵌方式就是将CSS代码写在&lt;head&gt;&lt;/head&gt;之间,并且用&lt;style&gt;&lt;/style&gt;进行声明,例如:  &lt;!DOCTYPE ...

    CSS3 html5鼠标悬停按钮动画特效.zip

    link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" /&gt; &lt;link rel="stylesheet" type="text/css" href="css/zzsc.css?3.1.64"&gt; &lt;link rel="stylesheet" href="css/style.css?3.1...

    jQuery CSS3带前后按钮控制旋转木马动画特效.zip

    link rel="stylesheet" type="text/css" href="css/style.css?3.1.64"&gt; &lt;/head&gt; &lt;body&gt;[removed][removed] &lt;div class="htmleaf-container"&gt; &lt;div id="carousel"&gt; &lt;div id="container" tcc-...

    css鼠标变成小手,有范例参照查看。

    &lt;style type="text/css"&gt; p{ border: 1px solid red; } #cursor2{ cursor:pointer;/*鼠标变小手*/ } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;p id="cursor1"&gt;测试文本!&lt;/p&gt; &lt;p id="cursor2"&gt;测试文本!&lt;/...

    H5 CSS3动画天气图标代码.zip

    link rel="stylesheet" type="text/css" href="css/style.css?3.1.64"&gt; &lt;/head&gt; &lt;body&gt;[removed][removed] &lt;div class="icon sun-shower"&gt;  &lt;div class="cloud"&gt;&lt;/div&gt;  &lt;div class="sun...

    网页换肤(DIV+CSS)

    &lt;STYLE type=text/css&gt;.themes { BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid } &lt;/STYLE&gt; &lt;SCRIPT language=javascript type=text/...

    DVI+CSS常用布局标签

    &lt;input type="text" id="username" name="username"&gt; &lt;label for="password"&gt;密码:&lt;/label&gt; &lt;input type="password" id="password" name="password"&gt; &lt;button type="submit"&gt;登录&lt;/button&gt; &lt;/form&gt; &lt;/div&gt; ``...

    CSS实现圆角边框代码 兼容IE、火狐.docx

    &lt;style type="text/css"&gt; /* ... */ &lt;/style&gt; &lt;div class="RoundedCorner"&gt; &lt;b class="rtop"&gt; &lt;b class="r1"&gt;&lt;/b&gt; &lt;b class="r2"&gt;&lt;/b&gt; &lt;b class="r3"&gt;&lt;/b&gt; &lt;b class="r4"&gt;&lt;/b&gt; &lt;/b&gt; &lt;br&gt;CSS 圆角边框,无...

    thickbox3.1

    &lt;style type="text/css" media="all"&gt; @import "Upimg/global.css"; @import "Upimg/thickbox.css"; &lt;/style&gt; &lt;link rel="alternate stylesheet" type="text/css" href="Upimg/1024.css" title="1024 x 768" /&gt; ...

    CSS基础知识-2.pdf

    &lt;style type="text/css"&gt; /* 后代选择器 */ ul a { color: red; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;ul&gt; &lt;li&gt; 这是ul-li下面的内容,不会被样式化 &lt;br&gt; &lt;span&gt;这是ul-li-span里面的内容, 不会被样式化&lt;/span&gt;&lt;br&gt; &lt;a ...

    一个渐变的banner图效果

    &lt;link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="wrapper"&gt; &lt;a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios"&gt;dev7...

    CSS下拉菜单导航多级下拉

    &lt;style type="text/css"&gt; body{ background-color:white; font-size:12px; font-family:Arial, Helvetica, sans-serif; margin:0px; padding:0px; color:white; } ul,li{ margin:0px; padding:0px; } li{ ...

Global site tag (gtag.js) - Google Analytics