https://www.cnblogs.com/yangfengwu/p/10947388.html
上一節給大家說了哈,安裝這個軟件,自行安裝...
這節咱用這個軟件接着學習網頁開發
工程路徑自己設置
先運行一下再說
新建的工程要比咱上一節的東西多
<head> 一般放實現功能性程序 </head>
<body> 一般放頁面布局部分 </body> 就是放咱頁面中看到的東西
其它細節請自行學習
https://www.runoob.com/tags/att-meta-charset.html
會不會出現懵逼的現象???
其實一樣寫
<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔--> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <h1>文華</h1> </body> </html>
<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔--> <html lang="en"> <head> <meta charset="UTF-8"> <title>這是網頁顯示的標題</title> <script> function click1() { //函數 alert("顯示的內容");//彈出一個框 } </script> </head> <body> <h1 onclick="click1()">文華</h1> </body> </html>
只不過多了些規定,有些東西寫到哪個里面而已
以前改變控件的屬性都是在html里面直接修改,現在咱新建一個.css文件,把屬性放在這個里面,然后html里面調用使用
名字隨意哈
新建完以后什么都沒有
先看第一種方式,加個ID
然后在布局文件里面,設置ID為id1的控件的顏色為紅色
但是現在運行是不可以的,需要在html里面引用才可以,
<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔--> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" type="text/css" href="lesson2.css"/> <title>這是網頁顯示的標題</title> <script> function click1() { //函數 alert("顯示的內容");//彈出一個框 } </script> </head> <body> <h1 onclick="click1()" id="id1">文華</h1> </body> </html>
<link rel="stylesheet" type="text/css" href="lesson2.css"/>
https://www.runoob.com/tags/att-link-rel.html
告訴瀏覽器我要導入一個 布局樣式的文件 文件是一個css類型的文本文件 后面是文件的名字
運行一下
然后說一下路徑問題
因為咱的html文件和.css文件在一個文件夾里面所以,可以直接
如果不在一個文件夾可以使用 ./XXXX 當前目錄下的XXXXX 或者 ../XXXX 當前目錄的上一級目錄的XXXXX 這個應該都懂吧....
另一種方式:
如果好多個控件初始化的顏色都是紅色難道要所有的都寫一遍????
提供了另一種方式
咱再添加個標簽
<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔--> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴瀏覽器我要導入一個 布局樣式的文件 文件是一個css類型的文本文件 后面是文件的名字--> <link rel="stylesheet" type="text/css" href="lesson2.css"/> <title>這是網頁顯示的標題</title> <script> function click1() { //函數 alert("顯示的內容");//彈出一個框 } </script> </head> <body> <h1 onclick="click1()" id="id1">文華</h1> <h1 id="id2">楊</h1> </body> </html>
#id1{
color: red;
}
#id2{
color: red;
}
控件少還好要是多了就不好了
現在呢,用Class
<!DOCTYPE html> <!--告訴瀏覽器這是一個html文檔--> <html lang="en"> <head> <meta charset="UTF-8"> <!--告訴瀏覽器我要導入一個 布局樣式的文件 文件是一個css類型的文本文件 后面是文件的名字--> <link rel="stylesheet" type="text/css" href="lesson2.css"/> <title>這是網頁顯示的標題</title> <script> function click1() { //函數 alert("顯示的內容");//彈出一個框 } </script> </head> <body> <h1 onclick="click1()" id="id1" class="TestClass">文華</h1> <h1 id="id2" class="TestClass" >楊</h1> </body> </html>
<h1 onclick="click1()" id="id1" class="TestClass">文華</h1> <h1 id="id2" class="TestClass" >楊</h1>
這兩個文本都引用了同一個class TestClass
然后在css 里面
.TestClass{
color: red;
}
運行一下,剛想起來,不會有人不會運行吧
https://item.taobao.com/item.htm?spm=a1z38n.10677092.0.0.3e3b1deb80xzYz&id=569295486025
https://www.cnblogs.com/yangfengwu/p/11037653.html