自學web前端之CSS樣式書寫方法

前言

回顧之前寫的內容;
1.認識編譯軟件和html
2.html中的標籤和特殊字符
3.html中的頭部標籤和常用標籤
4.超鏈接、錨鏈接和功能性鏈接
之前介紹過修飾網頁需要用到css樣式,但是在哪裏寫css樣式呢?這篇帖子就介紹如何書寫。
本篇帖子的目錄
1.內部CSS樣式代碼書寫
2.外部CSS樣式代碼書寫

css樣式書寫

用html寫出的網頁內容,簡單而有單一,不是很好看,如果要對網頁佈局進行修飾,就用到了css樣式進行修飾,可以給特定的區域設置顏色、背景、字體、位置等等。那麼怎麼寫css樣式代碼呢?一般我們進行佈局修飾的時候會用到盒子容器(如<div>),將所要修飾 的內容放到盒子中再用class屬性。
css樣式的書寫分爲內部樣式和外部樣式。顧名思義,內部樣式就是在內部書寫css樣式代碼,放到裏面直接寫。而外部樣式就是在另外的文件中寫css樣式代碼,通過<link>標籤將css文件鏈接到html中。

內部CSS樣式代碼書寫

具體操作:
1.給要修飾的內容加上盒子標籤<div>,設置calss屬性(舉例用name)。
2.在頭部標籤中添加<style>標籤,將type屬性設置爲text/css。
3.(1)便籤選擇器法:對html中的某種全部的標籤進行樣式修飾,直接用標籤名+中括號即可。如下圖的"body{}"。
(2)類名法:對html中的某一個標籤進行樣式修飾,可以先將要修飾的內容的標籤設定類名,然後再在<style>中用點+類名+{}的形式。如下圖中的 “.name{}”,然後在中括號內{}寫需要設定的樣式即可。
(溫馨提示,類名要一一對應哦)
具體操作如下:
在這裏插入圖片描述

外部CSS樣式代碼書寫

一般樣式代碼較多時,纔會用書寫外部css樣式代碼。
具體操作:
1.首先在外部創建一個txt記事本文件,並修改後綴名爲css,在此文件下寫css樣式代碼,也可以用標籤選擇器法和類名法(同內部樣式)
2.用<link>標籤將寫好的css樣式文件鏈接到html中。
在這裏插入圖片描述

小結

知道了css樣式的書寫方法,下一篇帖子就總結一下css樣式中其他屬性,畢竟css是利用像
color、background這樣的屬性進行修飾的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章