如果將html比作網頁的骨架,那麼css就是網頁的**,讓我們的網頁外表看上去更好看
說css之前呢,先要說一下id和class:id就是類似於變數的概念,是唯一的,class則是乙個變數組,可以指定多個,通常在html中定義,利用css的選擇器來查詢它們,之後修改它們的屬性值.
例如:<
div class="post-content">
/*這裡class包括了兩個部分*/
再來說下css的選擇器,,id的查詢方式為#id名,class的查詢方式為.class名,而基本的html標籤直接用標籤名表示:
例如:#post 和.post-content 和a
css的選擇器利用的是層次結構,分層查詢
例如#post .post-conten就是在post內容裡的post-content
css的結構也非常簡單:
選擇器就是這麼簡單的結構,卻可以讓我們的網頁看起來形形色色.
接著我們借用開發者工具(按f12彈出)講一下每乙個網頁,每乙個網頁裡的內容都具有的結構
margin(外補),border(邊框),padding(內補),height(高度),width(寬度)
這種結構就像我們的快遞,外補就像是包裝盒外的一層包裝紙,邊框就是我們的包裝盒,內補就是內補用來保護的填充物,而長度和寬度就構成了我們實際買到的東西.(形容非常恰當)
通過這些屬性我們可以調節我們內容的位置,大小等等等等屬性
注意當兩個東西放在一起時,他們的外補會重合在一起
最後講一下幾個常用的偽類:
:active 當前滑鼠點下鏈結的時候
:hover 當滑鼠懸浮在元素上方時
:link 當鏈結還未被訪問過時
:visited 當鏈結被訪問過之後
把他們加在選擇器後面就是想要的結果了
例如:乙個按鈕可以通過偽類使我們的滑鼠放在上面時有相應的變化
#button:hover{
background:blue;
css先說這麼多了,想到再來補充,總之這個需要多加練習,多打**,只是看教程而不去實驗是怎麼也學不會的
前端複習記錄（前端基礎 CSS）二
修改父元素的color屬性 line height一般是指布局裡面一段文字上下行之間的高度，是針對字型來設定的，height一般是指容器的整體高度，background color設定的背景顏色會填充元素的content padding border區域 margin的外邊緣 聖杯布局是指布局從上到...
web前端 基礎部分（二） CSS
一 css概述 css cascading style sheet 層疊樣式表 作用 定義了網頁的行為，簡單的說就是將網頁的內容和顯示樣式分離，從而提高顯示的多樣性和顯示的功能。就好比html定義的是網頁的骨架，css就是為網頁穿上外衣 特點 樣式定義靈活多樣且豐富多彩，可以設定任意的字型及大小。等...
web前端開發（二） CSS基礎
目錄 一 css語法 二 css 樣式的三種引入方式 三 css選擇器 四 css 文字樣式與字型樣式 五 鏈結樣式與列表樣式 六 css背景 七 css盒子模型 八 css定位 css全稱為 層疊樣式表 cascading style sheets 它主要是用於定義html內容在瀏覽器內的顯示樣式...