Heim > Web-Frontend > HTML-Tutorial > 网页中应用CSS样式的几种方式_html/css_WEB-ITnose

网页中应用CSS样式的几种方式_html/css_WEB-ITnose

WBOY
Freigeben: 2016-06-24 11:31:25
Original
1246 Leute haben es durchsucht

网页中应用CSS样式的几种方式:
建议:尽可能的手写代码,可以有效的提高学习效率和深度。
网页使用CSS样式的方法有多重,下面简单介绍一下:
一.将样式直接写在标签之内,例如:

<div style="color:red;font-weight:bold">蚂蚁部落</div>
Nach dem Login kopieren

此中方式的优点是使用灵活,但是缺点也很明显,比如不能够统一管理样式,容易造成页面体积庞大等等问题。
二.在标签内写CSS样式,例如:

<!DOCTYPE html>  <html>  <head>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  <title>蚂蚁部落</title> <style type="text/css"> .mytest{   color:red;   font-weight:bold } </style> </head> <body> <div class="mytest">蚂蚁部落</div> </body> </html>
Nach dem Login kopieren

此方式和第一种方式相比克服了不能够统一管理样式的缺点,也能够是网页的内容部分更加清晰,但是也能够增加网页的体积。
三.使用link标签引入外部样式表,例如:

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>CSS教程</title><link rel="stylesheet" type="text/css" href="css.css" /></head>
Nach dem Login kopieren

四.@import方式,类似于第二种方式,需要放在之中,例如:

<style type="text/css">@import url(mytest/style.css);</style>
Nach dem Login kopieren

注意:分号是必需的。

原文地址是:http://www.softwhy.com/forum.php?mod=viewthread&tid=4734

更多内容可以参阅:http://www.softwhy.com/divcss/

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage