CSS基礎整理(樣式表 樣式屬性)

2022-07-25 06:15:12 字數 2100 閱讀 8935

樣式屬性

1· 背景與前景   

background-color:#00f; /*背景色,樣式表優先順序高*/

background-image:url(); /*設定背景(預設)*/

word-wrap:break-word;

word-break:break-all; /*自動換行*/

background-attachment:fixed; /*背景是固定的,不隨字型滾動*/

background-repeat:no-repeat; /*背景圖 no-repeat不平鋪;repeat平鋪;repeat-x橫向平鋪;repeat-y縱向平鋪*/

background-position:center;/*背景圖居中,設定背景圖位置時,repeat必須為no-repeat*/

background-position:right top;

background-position:left 100px top 200px;}/*離左邊100畫素,離上邊200畫素*/

字型

font-family:"courier new", courier, monospace;/*設定字型*/

color:#fff; /*文字顏色*/

font-size:18px; /*字型大小*/

font-weight:normal; /*bold是加粗,normal是正常*/

font-style:italic; /*傾斜,normal是正常*/

text-decoration:overline; /*下劃線;overline是上劃線;line-through是刪除線;none是去除下劃線*/

text-align:center; /*(水平)居中對齊;left是左對齊;right是右對齊*/

vertical-align:middle; /*(垂直)居中對齊;top是頂端對齊;bottom是底部對齊。在設定行高之後使用*/

text-indent:28px;/*首行縮排量*/

line-height:24px;/*行高。一般為1.5~2倍字型大小*/

display:inline-block; /*none是不顯示;inline-block顯示為塊,不自動換行,寬高可設;block顯示為塊,自動換行;inline效果同span標籤,不自動換行,寬高不可設*/

visibility:visible; /*可視性,hidden隱藏但是占用空間;visible顯示*/

邊界與邊框

border:5px solid #f00; /*四邊框;5畫素寬,實線,紅色*/

border-width:5px;

border-style:solid;

border-color:#f00;

border-top:5px solid #9f0; /*上邊框:5畫素寬,實線,綠色*/

border-bottom:5px solid #39c; /*下邊框:5畫素寬,實線,藍色*/

border-left:5px solid #ff0; /*左邊框:5畫素寬,實線,黃色*/

border-right:5px solid #fff; /*右邊框:5畫素寬,實線,白色*/

margin:50px; /*四邊外邊框寬度為10畫素,auto,居中*/

margin-top:10px; /*上邊外邊框寬度為10畫素,其他三邊邊框類似*/

margin:20px 0px 20px 0px; /*順序為上右下左,順時針順序*/

padding:10px; /*內容與邊框的四邊間距為10畫素*/

padding-top:20px; /*內容與邊框的上間距為20畫素,其他三邊類似*/

padding:50px 20px 10px 20px; /*順序為上右下左,順時針順序*/

CSS樣式表基礎

css的樣式表其實就是美觀頁面的,加一些樣式。一 樣式表的三種分類 內聯樣式 寫在某乙個標籤裡面的樣式。優點 控制精確。缺點 重用性差。太多了不好寫 頁面 亂。太亂,後期不方便看 優先順序最高!內嵌樣式 嵌在某乙個頁面裡的。是寫在裡面,專門用來寫樣式 需要新增乙個標籤 優先順序其次!外部樣式表。優點...

css樣式表的屬性

屬性名稱 字型屬性 font font family font style font variant font weight font size 顏色和背景屬性 color background color background image background repeat background ...

CSS樣式表屬性彙總

w3上看到了。除了inline和block的定義,主要是要注意 body h1 h6 blockquote menu ul ol dd等標籤的預設樣式 html,address,blockquote,body,dd,div,dl,dt,fieldset,form,frame,frameset,h1,...