行內樣式:在標籤的開始標籤中直接通過使用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)如果乙個女盒子浮動了,就可以設定寬度和高度.
對父元素造成的影響對後面的兄弟元素影響
清除浮動綜上:近期學習css樣式表,並逐步開展頁面的製作,通過這些基礎點的學習,有一些心得感悟分享給大家。清除對父元素所造成影響
1.overflow:hidden
2.加高法
清除對後面兄弟的影響
clear: left/right/both
常用 clear:both
我感覺在看到乙個頁面時,一定不要直接下手去做,這樣很可能走彎路,繞來繞去;建議先仔細觀察,把整個頁面分解成多個盒子模型,自上而下,從左到右。在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 語句返回乙個值 因為在定義構造方法時加...