最佳答案
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>
分享到:
相关推荐
<link href="css/style.css" rel="stylesheet" type="text/css" /> <script type="text/javascript" src="js/js/myfocus-2.0.1.min.js"></script> <script type="text/javascript"> myFocus.set({ id:'demo', ...
<style type="text/css"> <!-- .url { font-weight: bold; color: #666666; background-position: center; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-...
<style type="text/css"> .STYLE1 { font-size: 36px; font-weight: bold; } </style> </head> <body> <form name="form1" method="post" action="valid.jsp"> <table width="400" height="120" border="1" ...
link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" /> <link rel="stylesheet" type="text/css" href="css/demo.css?3.1.64"> <link rel="stylesheet" href="css/style.css?3.1...
<style type="text/css"> <!-- /* Pretty Stuff ================================== */ /* Zero down margin and paddin on all elements */ * { margin: 0; padding: 0; } body { font: 62.5%/1.6 "Lucida ...
<style type="text/css"> tr:nth-child(odd) { background-color: red; } tr:nth-child(even) { background-color: blue; } </style> <table> <tr><td>1</td><td>1</td></tr> <tr><td>2</td><td>2</td></tr...
<option>学生</option><option>一年</option><option>二年</option><option>三年</option><option>三年到五年</option><option>五年到十年</option><option>十年以上</option> </select> </div> ...
内嵌方式就是将CSS代码写在<head></head>之间,并且用<style></style>进行声明,例如: <!DOCTYPE ...
link rel="stylesheet" type="text/css" href="css/normalize.css?3.1.64" /> <link rel="stylesheet" type="text/css" href="css/zzsc.css?3.1.64"> <link rel="stylesheet" href="css/style.css?3.1...
link rel="stylesheet" type="text/css" href="css/style.css?3.1.64"> </head> <body>[removed][removed] <div class="htmleaf-container"> <div id="carousel"> <div id="container" tcc-...
<style type="text/css"> p{ border: 1px solid red; } #cursor2{ cursor:pointer;/*鼠标变小手*/ } </style> </head> <body> <p id="cursor1">测试文本!</p> <p id="cursor2">测试文本!</...
link rel="stylesheet" type="text/css" href="css/style.css?3.1.64"> </head> <body>[removed][removed] <div class="icon sun-shower"> <div class="cloud"></div> <div class="sun...
<STYLE type=text/css>.themes { BORDER-RIGHT: #000 1px solid; BORDER-TOP: #000 1px solid; BORDER-LEFT: #000 1px solid; BORDER-BOTTOM: #000 1px solid } </STYLE> <SCRIPT language=javascript type=text/...
<input type="text" id="username" name="username"> <label for="password">密码:</label> <input type="password" id="password" name="password"> <button type="submit">登录</button> </form> </div> ``...
<style type="text/css"> /* ... */ </style> <div class="RoundedCorner"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> <br>CSS 圆角边框,无...
<style type="text/css" media="all"> @import "Upimg/global.css"; @import "Upimg/thickbox.css"; </style> <link rel="alternate stylesheet" type="text/css" href="Upimg/1024.css" title="1024 x 768" /> ...
<style type="text/css"> /* 后代选择器 */ ul a { color: red; } </style> </head> <body> <ul> <li> 这是ul-li下面的内容,不会被样式化 <br> <span>这是ul-li-span里面的内容, 不会被样式化</span><br> <a ...
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" /> </head> <body> <div id="wrapper"> <a href="http://dev7studios.com" id="dev7link" title="Go to dev7studios">dev7...
<style type="text/css"> 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{ ...