CSS是為HTML服務的, 離開了網(wǎng)頁, CSS是看不到效果的.
我們見到的網(wǎng)頁, 其實就是html文件, 擴展名是html. 里面的內容要按照html的語法. 在瀏覽器中打開時, 瀏覽器就會按照HTML的語法規(guī)則解析網(wǎng)頁, 分解成DOM節(jié)點樹和CSS規(guī)則樹, 將CSS樣式規(guī)則應用到匹配的元素樹, 渲染出頁面的結構, 繪制到屏幕上.
html的內容就是各種標簽. 記一些最常用的就好. 那些不太會用到的不如忘掉, 給自己減輕點負擔.
標簽是要寫在尖括號里的, 格式照著寫就行. html方便的地方在于, 只要在瀏覽器里點擊右鍵, 查看源代碼, 就可以看html文件的內容了, 想學習還是想復制粘貼都可以隨意了.
標簽的尖括號里還可以寫一些屬性. 大概就是誰=誰之類的信息. 有很多關鍵的信息是寫在固定的屬性中的. 比如鏈接和圖片的地址.
div自帶換行, span沒有換行, 類似于java里的println和print這種區(qū)別.
ul 以及 li 列表, 表示一系列重復或相關的東西, 可以理解成數(shù)組.
table 表格, 以前很流行, 現(xiàn)在用的也少了. 不過很好理解, 和excel里的表格一樣, 橫平豎直, 方方正正. 里面還可以填一些內容.
input 輸入框, 默認是輸入單行文本的, 加一個password的type屬性, 就會用星號替代輸入內容, 可以用來輸入密碼.
加一個file的type可以選擇文件.
form 以前是用來提交數(shù)據(jù), input都必須寫在form里才行, 現(xiàn)在很多都不用表單提交, 自己發(fā)送數(shù)據(jù), 也就有些邊緣化了.
p 表示段落, 從功能來說, 也是帶個換行.
h1 到 h6 標題, 帶換行
a 鏈接網(wǎng)址
img 圖片
我只想大概提一下. 要快速學習的話, 一個是推薦w3c的學習網(wǎng)站, 可以很方便的看到寫出來的效果, 內容結構也組織的比較清楚. 另外一個就是看markdown文件的幫助文檔, markdown可以看作簡化版的html, 基本語法很少, 可能就一頁, 但是濃縮了html的精華. 現(xiàn)在markdown格式很流行, 寫起來方便, 而且可以轉成html.
css
html里寫了網(wǎng)頁的內容, 至于美觀就要靠css了. css學習起來很簡單, 要用好也不容易.
css也是一種類型的文件, 擴展名css. 里面的內容是按照css的語法寫的.
css的基本格式 選擇器 { 屬性 : 值; 另一個屬性 : 值}
選擇器有三種最基本的.
類選擇器 現(xiàn)在基本是最常用的了 可以看到網(wǎng)頁里到處都是class.
標簽選擇器, 和標簽同名.
id選擇器, 標簽里用id屬性. 原則上一個頁面內不應該有重復的id. 不過瀏覽器的容錯能力較強, 有重復的id也不會報錯.
基本選擇器可以組合起來.
后代選擇 用空格分隔 類似于 一年級 二班
并列選族 用逗號分隔 類似 一年級, 三年級
屬性包含幾大類, 就是對各種外觀的描述和控制.
比如, 位置 大小 顏色 字體 裝飾 動畫 等.
值包括各種屬性相應的單位.
比如長度的表示法 px表示像素 em表示字寬 百分比 還有rem
顏色表示 rgb CMYK hsl
具體還是先從w3c的文檔開始學習吧. 其實css是一門跨界的學科, 要真正用好還需要了解一些視覺藝術, 設計排版方面的知識. 總之還是多學多練吧.
現(xiàn)在學習的話, 建議直接從css3入手. 布局和動畫會簡單很多. 另外一個選擇是使用樣式庫, 尤其是基于css3的, 純css庫, 簡單方便, 沒有副作用. 使用庫之后的主要工作量就是添加相應的class.
引入css到html中使用link標簽. 或者寫在頁面內的style標簽內. 修改和調試方面, 直接用瀏覽器打開html文件都可以看到效果. 不需要什么其他的設置.
總體來看,制作網(wǎng)頁更多是練的內容, 而不是學的內容. 更多是設計的內容, 而不是技術的內容. 更多是經(jīng)驗的內容, 而不是智力的內容.
推薦幾本書吧:
寫給大家看的設計書
3周3web頁面
補充
在 html5 里面有的元素是可以省略不寫的
可以省略全部標記的元素有 :
html,head,body,colgroup,tbody
不允許寫結束標簽的元素有 :
area,base,br,col,command,embed,hr,img,input,keygen,link,meta,paran,source,track,wbr。
這些標簽都是單標簽。
可以省略結束標記的元素有 :
li,dt,dd,p,rt,rp,optgroup,option,colgroup,thead,tbody,tfoot,tr,td,th。
使用這些標簽可以節(jié)省結束標簽, 可以部分代替pug等縮進式模板的功能. 這是瀏覽器原生支持的, 不需要轉換.
HTML中可以使用字符實體, 就是特定格式的字符編碼, 如換行 乘號 × 在某些場景下可以用一下.
