1、css是什麼?
css是cascadingstylesheets(級聯樣式表)的縮寫。
2、css可以用來做什麼?
css是一種樣式表語言,用於為html文件定義布局。例如,css涉及字型、顏色、邊距、高度、寬度、背景影象、高階定位等方面。
3、css跟html的區別在**?
html用於結構化內容;css用於格式化結構化的內容。
在tim berners-lee發明全球資訊網(world wide web)的那個年代,html語言是唯一用於給文字新增結構的語言。作者可以通過宣告「這是乙個標題」(利用h1
標籤)或「這是乙個段落」(利用p
標籤)的方式來標記文字。
隨著web逐漸流行起來,網頁設計者們開始尋求為網頁增添布局的可能性。為此,當時的瀏覽器廠商們發明了一些新的html標籤(比如等),以引入了新的布局——而非新的結構。
這也導致了原本用於進行文字的結構化的標籤(比如等)越來越多地被誤用於進行頁面的布局。許多新的布局標籤(比如
)只有一種瀏覽器支援。「您需要使用某某瀏覽器來瀏覽本頁面」成為當時常見於許多**的宣告。
css的發明正是為了改善這一狀況,它為web設計師們提供了完善的、所有瀏覽器都支援的布局能力。而且,文件的表現樣式與內容的分離,也令**維護容易了許多。
4、採用css有哪些好處?
css是web設計界的一次革命。css的具體優點包括:
(1) 通過單個樣式表控制多個文件的布局;
(2) 更精確的布局控制;
(3) 為不同的**型別(螢幕、列印等)採取不同的布局;
(4) 無數高階、先進的技巧。
5、css在html中的使用方法
(1)行內樣式表(style屬性);
(2)內部樣式表(style元素)放在頭部;
(3)外部樣式表(引用乙個樣式表檔案)。
詳見:
二、顏色與背景
1、前景色
2、背景顏色
(1) background-color:transparent;
(2) background-color:rgb(255,0,0)
(3) background-color:rgba(255,0,0,0.5)
ps:「a」通道用來設定透明度,為0-1之間的值,0為全透明,1為不透明
(4) background-color:#ff0000;
3、背景
background-repeat:no-repeat; /*repeat-x或repeat-y*/
background-attachment:fixed; /*fixed固定 scroll滾動*/
background-position:center;
三、文字
padding:10px; ---邊距
word-spacing :5px; ---針對英文,空格距離
letter-spacing :5px; ---字元間距
line-height
:2px; ---行間距
direction
:ltr; ---文字方向: 左至右ltr 右至左rtl
text-transform :uppercase; --- 全部英文大寫uppercase 首字母大寫capitalize 全部英文小寫lowercase
text-indent:2em; ---文字縮排:em幾倍於文字大小
text-align
:left; ---文字對齊: 居中center 兩端對齊justify
text-decoration
:underline overline; ---文字裝飾: 上劃線overline 刪除線line-through
white-space
:normal; ---文字空白處理 格式化pre 不捲繞nowrap
保留空格回車並捲繞pre-wrap 合併空白保留回車pre-line
四、字型
font-style: italic斜體 normal正常 oblique傾斜
font-weight: blod加粗 指定字型顯示的濃淡程度(100-900)
font-size: 2em;2px;1% 字型大小
font-family: serif sans-serif monospace等寬 cursive手寫 fantasfy無法歸類
font-variant: small-caps以小尺寸顯示的大寫字母來代替小寫字母
五、效果
text-shadow:0px -1px 0px #ff0000;
oueline-color:red;
outline-style:
none
:無輪廓。與任何指定的outline-width值無關
dotted
:點狀輪廓。
dashed
:虛線輪廓。
solid
:實線輪廓
double
:雙線輪廓。兩條單線與其間隔的和等於指定的outline-width值
groove
:3d凹槽輪廓
ridge
:3d凸槽輪廓
inset
:3d凹邊輪廓
outset
:3d凸邊輪廓
outline-width:10px;
css3學習筆記
1.為什麼分許多模組進行管理?為了避免產生瀏覽器對於某個模組支援不完全的情況。2.使用元素的class屬性的缺點 第一,class屬性本身沒有語義,褚翠是用來為css樣式服務的,屬於多餘屬性。第二,使用屬性的話,並沒有把樣式與元素繫結起來,針對同乙個class屬性文字框,下拉框,按鈕都可使用。這樣很...
CSS3學習筆記
一.選擇符 二.屬性 溢位隱藏 div4 p文字陰影 text shadow 2px 1px rgba 255,255,255,1 圓角效果 border radius邊框陰影 box shadow 2px 2px 5px 5px inset 內陰影透明度 div for ie8 and earli...
css3學習筆記
1,transition是過度效果,一般是和hover一起用,transition的屬性有height,width常用屬性,在hover裡面就是會覆蓋原來的屬性,屬性由逗號間隔,各個屬性之間沒有先後關係,webkit transition width 2s ease in,height 2s,web...