前言----- 繼續努力
什麼是css?
就是對html進行美化,好比化妝前後的差距。
html的塊級標籤
標籤:預設獨佔一行,跟同級兄弟塊豎直排列
標籤:預設同在一行,跟同級兄弟塊橫向排列
塊級標籤只有結合css樣式才有意義!修飾div標籤一般用style屬性並使用樣式,不贊成用align屬性
css的語法格式
最好寫在標籤下
css的類別選擇器
元素選擇器:span
id選擇器:span
類選擇器:
css的其他選擇器
屬性選擇器:
後代選擇器:如下
子元素選擇器:如下
偽類選擇器:
css的引入
行內嵌入式:
嵌入式:
哈哈哈
匯入樣式:
樣式優先順序:遵循就近原則(以修飾的標籤為基準)行內樣式》id選擇器》類選擇器》元素選擇器
css的塊級標籤的浮動
屬性float:使塊級元素脫離文件流進行浮動
(left:向左浮動;right:向右浮動;)
浮動原理:脫離文件流之外,不占用文件流的空間
屬性clear:清除浮動
both:兩邊都不允許浮動
left:左邊不允許浮動
right:右邊不允許浮動
css屬性display
display: none/不顯示
display:block/作為塊級元素顯示,相當於標籤,
display:inline-block/作為行內塊元素,相當於標籤
display:inline/預設,作為內聯元素,元素前後沒有換行符,沒有寬和高的效果
盒模型
margin:外邊距(可以為負值)
margin-top:上外邊距;margin-bottom:下外邊距;margin-left:左外邊距;margin-right:右外邊距;
margin:10px; 上下左右都是10px
margin:10px 20px 上下10px,左右20px
margin:10px 20px 30px; 上10px,右20px,下30px,左20px
margin:10px 20px 30px 40px; 順序上右下左
padding:內邊距(同上)
border:邊框
border-width:邊框寬度
border-color:邊框顏色
border-style:邊框樣式(實線solid)
盒模型定位
屬性position:定位屬性
absolute:絕對定位(top、right、bottom、left),以包含框最外層的包含框為基準進行偏移
relative:相對定位,相對於原來標準流的位置進行定位
fixed:固定定位,以瀏覽器為視窗進行定位
(盒子在標準流的定位:行內元素水平方向:margin-left+margin-right;塊級元素豎直方向:margin-top 和 margin-bottom哪個值大取哪個;盒模型巢狀:子塊的margin以父塊的內容為參考)
web前端基礎之css
w3c 值描述 none 此元素不會被顯示。block 此元素將顯示為塊級元素,此元素前後會帶有換行符。inline 預設。此元素會被顯示為內聯元素,元素前後沒有換行符。inline block 行內塊元素。區別 w3c overflow 屬性規定當內容溢位元素框時發生的事情 visible 預設值...
web前端 基礎部分(二) CSS
一 css概述 css cascading style sheet 層疊樣式表 作用 定義了網頁的行為,簡單的說就是將網頁的內容和顯示樣式分離,從而提高顯示的多樣性和顯示的功能。就好比html定義的是網頁的骨架,css就是為網頁穿上外衣 特點 樣式定義靈活多樣且豐富多彩,可以設定任意的字型及大小。等...
web前端開發(二) CSS基礎
目錄 一 css語法 二 css 樣式的三種引入方式 三 css選擇器 四 css 文字樣式與字型樣式 五 鏈結樣式與列表樣式 六 css背景 七 css盒子模型 八 css定位 css全稱為 層疊樣式表 cascading style sheets 它主要是用於定義html內容在瀏覽器內的顯示樣式...