http://www.javashuo.com/article/p-zleanfce-mo.htmlcss
上一節給你們說了哈,安裝這個軟件,自行安裝...html
這節咱用這個軟件接着學習網頁開發瀏覽器
工程路徑本身設置less
先運行一下再說函數
新建的工程要比咱上一節的東西多佈局
<head> 通常放實現功能性程序 </head>學習
<body> 通常放頁面佈局部分 </body> 就是放咱頁面中看到的東西spa
其它細節請自行學習3d
https://www.runoob.com/tags/att-meta-charset.htmlcode
會不會出現懵逼的現象???
其實同樣寫
<!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;
}
運行一下,剛想起來,不會有人不會運行吧