初學CSS近期總結

2021-10-07 23:56:40 字數 3085 閱讀 6659

行內樣式:在標籤的開始標籤中直接通過使用style屬性

內部樣式:在head 中新增style標籤

外部樣式:建立css檔案(字尾.css),通過link連線到該樣式

型別選擇器即直接對標籤設定屬性,如p {},a {}

id選擇器即標籤中加入id屬性,然後在css中所用#+id屬性值,注意:不要在同乙個頁面中設定相同的id 屬性

class選擇器即類選擇器,標籤中設定class 屬性,設定對應值,然後在css中設定 .+class 屬性值

font-style設定字型斜體還是普通

font-weight設定字型加粗還是普通

font-size設定字型大小

font-family設定字型 (宋體、微軟雅黑…)

font復合使用

color設定字型顏色

text-decoration(設定文字的修飾線,underline下劃線、overline上劃線、line-through刪除線、none清除設定)

text-intent(設定文字縮排,單位通常使用em,1em表示乙個文字的寬度,在新增logo 中通常用該屬性將文字移出瀏覽器)

text-align(設定文字對齊的水平方式,left左對齊預設值,center居中,right右對齊,justify兩端對齊,只對英文有效)

line-height(設定行高,可以加px設定高度,可以直接加數字,如1.5 2 分別表示文字的1.5倍 2倍高)

id選擇器 >class選擇器 >標籤選擇器

id選擇器: 0 1 0 0 100塊

class選擇器:0 0 1 0 10塊

型別選擇器:0 0 0 1 1塊

width: 寬度

height:高度

border:邊框

padding:內邊距 補白

margin:外邊距 邊界

background:背景

它們表示元素的寬度和高度。不是指整個盒子所佔據的空間。

在設定的時候,通常使用px來進行,如果要實現響應式,則可以使用百分比。

border右三部分構成:邊框的粗細、邊框的樣式、邊框的顏色

如:border:5px solid red

在設定padding屬性值的,可以按照上、右、下、左的順序來設定四邊的padding值。

(只有乙個值 上、右、下、左都相同;

有兩個值:上下是相同的,左右是相同的

常用技巧:margin: 0 auto;實現水平居中

margin寫法同padding 乙個值、兩個值…

background-color:設定盒子的背景顏色 背景顏色可以填充padding 也可以填充border

background-image:設定盒子的背景 img標籤也是盒子 也可以給img這個盒子設定背景

乙個盒子大小正好和背景圖大小一樣:正好裝進去

乙個盒子如果大於背景圖:缺省會在x和y軸都進行平鋪

乙個盒子如果小於背景圖:只會顯示背景圖的一部分,背景圖的左上角和盒子的左上角對齊 左上角是指從pddding開始 但是border中也會填充

background-repeat:

控制是否平鋪  repeat-x 只平鋪x軸 repeat-y 只平鋪y軸 repeat x和y軸都平鋪 no-repeat x和y軸都不平鋪

background-position:

乙個小盒子中放乙個大的背景圖,可以使用background-position定位。

乙個大盒子中放乙個小的背景圖,也可以使用background-position定位

屬性:float

屬性值:left、right

1)貼靠性 如果都向同乙個方向浮動,這兩個浮動的元素會緊緊的貼在一起,如果後面的空間不夠貼靠的話,它會自動換行。

2)包裹性 如果是乙個男盒子,在沒有設定寬度的情況下,只要它浮動了,那麼它的寬度會盡可能小

3)乙個元素內部所有元素都浮動了,如果父元素在沒有設定高度的情況下,它的高度會變成0,也就說父元素的高度塌陷了。

4)如果乙個女盒子浮動了,就可以設定寬度和高度.

對父元素造成的影響

對後面的兄弟元素影響

清除浮動

清除對父元素所造成影響

1.overflow:hidden

2.加高法

清除對後面兄弟的影響

clear: left/right/both

常用 clear:both

綜上:近期學習css樣式表,並逐步開展頁面的製作,通過這些基礎點的學習,有一些心得感悟分享給大家。

我感覺在看到乙個頁面時,一定不要直接下手去做,這樣很可能走彎路,繞來繞去;建議先仔細觀察,把整個頁面分解成多個盒子模型,自上而下,從左到右。在css的書寫中,先寫上重置樣式 如「*、body」。

常用div來建立盒子模型、當然有時候ul 無序列表也很常用 如導航欄的書寫,一般左側logo,右側導航欄;logo左浮動,ul右浮動,最後再把li左浮動,即可實現效果。說到這常用ul時,list-style:none;

去掉預設的無序列表中小黑點。

css總結 初學者

position absolute 絕對定位 position relative 相對定位 position static 靜態定位 position sticky是乙個新的css3屬性,它的表現類似position relative和position fixed的合體,在目標區域在螢幕中可見時,它...

近期學習總結

最近在忙著小 的寫作,主要研究方向是基於p2p網路的非結構搜尋演算法,這一周似乎就沒什麼進展,原因如下 1.思路太亂,切入點沒選好,範圍有點太廣,沒有就某一點做深入的研究。缺少學習後的及時總結,總是沒有一條主線。2.為了做實驗,有點急躁,思路沒有完全理順,就想著怎麼把實驗做好,做實驗的前期準備工作沒...

近期java總結

1.包訪問的實驗。在例子明明可以通過set classpath達到 隨心所遇的呼叫類。但是指定類路徑如果設定成更目錄的話卻沒有達到。看來,windows沒有給你全盤搜尋的美事。還得具體指定了。2.建構函式的特性。老是忘記不能返回值 不能在方法中用 return 語句返回乙個值 因為在定義構造方法時加...