web前端基礎 css

2021-09-11 08:32:20 字數 2046 閱讀 5978

前言----- 繼續努力

什麼是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內容在瀏覽器內的顯示樣式...