Html基礎案例之結合css樣式
連系css樣式，編寫Html案例
東西/原料
- 電腦
- Notepad編纂器
方式/步調
- 1
1、打開notepad文本編纂器，新建空白文檔，并另存為2.html；
- 2
2、再次新建空白文檔，并另存為main.css文件；
- 3
3、編寫main.cs文件，輸入內容：
p{color:red;font-size:40}；
保留該文檔；
- 4
4、在test.html輸入根基的內容：
<html>
<title>測試</title>
<body>
<p>加油！</p>
</body>
</html>
5、保留后運行，獲得輸出成果；
- 5
接下來測試按鈕事務：
6、輸入內容：
<html>
<title>測試</title>
<body>
<script type="text/javascript">
function change(){
document.getElementById("myHeader_1").innerHTML="you have clicked";
}
</script>
<h1 id="myHeader_1">Hello</h1>
<p>盡力，對峙</p>
<button onclick="change()">點擊</button>
</body>
</html>
7、保留后運行，獲得成果如下圖所示；
- 6
8、點擊按鈕，獲得如下圖成果；文字發生了轉變；
- 7
接下來，引用樣式文件；
9、在test.html中插手語句：
<link rel="stylesheet" type="text/css" href="main.css"/>；
即最終代碼為：
<html>
<title>測試</title>
<body>
<link rel="stylesheet" type="text/css" href="main.css"/>
<script type="text/javascript">
function change(){
document.getElementById("myHeader_1").innerHTML="you have clicked";
}
</script>
<h1 id="myHeader_1">Hello</h1>
<p>盡力，對峙</p>
<button onclick="change()">點擊</button>
</body>
</html>
10、保留并運行；如下圖所示，p對應的標簽文字屬性發生了轉變。
- 8
綜上所述，經由過程引用css樣式，可以對各類樣式進行復用。
注重事項
- 樣式編寫合適和引用準確
- 發表于 2018-06-22 00:00
- 閱讀 ( 685 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章