CSS基礎

顏色:

1.color:<color> 設置對象的文本顏色。無默認值。
2.opacity:<number>默認值:1。設置對象的不透明0。

字體:

1.font:復合屬性。設置文本屬性。不能一次性設置全部的font屬性,只能針對具體的屬性進行設置。
2.font-style:normal|italic|oblique 默認值:normal。設置文本字體樣式。
3.font-variant:normal|small-caps。默認:normal。設置文本是否為小型的大寫字母。
4.font-weight:normal|bold|bolder|lighter|<integer> 默認值:normal。 設置文本字體的粗細。
5.font-size:<absolute-size> 默認值:medium(16 ) 設置對象中的字體尺寸。
6.font-family:'隸書'? 默認值:由瀏覽器決定。設置字體風格。

表格:

1.table-layout:auto|fixed? 設置表格的布局算法。默認值:auto。
2.border-collapse:separate|collapse 設置表格的行和單元格的邊框是合并還是獨立。默認值:separate(獨立)。
3.border-spacing:<length>{1,2}? 設置當表格邊框獨立時,行和單元格的邊框在橫向和縱向向上的間距。
4.caption-side:top|bottom|left|right 設置表格的caption對象是在表格的位置(表頭位置)
5.empty-cells:hide|show 設置當表格的單元格無內容時,是否顯示該單元格的邊框。

列表:(ol有序列表;ul無序列表;li列表元素)

1.list-style:none(設置無序列表前的...); 復合屬性。設置列表項的相關內容。
2.list-style-image:none|<url>? 默認值:none 設置列表項標記的圖像
3.list-style-position:outside|outside 設置列表項標記文本排列的位置。 默認值:outside。
4.list-style-type:disc|circle|... 設置列表項所使用的預設標志。 默認值:disc。

背景:

1.background: 復合屬性。設置背景特性。可一次性設置大部分屬性,也可針對部分屬性進行設置。
2.background-color:<color> 默認值:transpoarent 設置背景顏色。
3.background-image:<bg-image> 默認值:none 使用絕對或相對地址或者創建漸變色(linear-gradient-線性漸變,radial-gradient-徑向漸變)來確定圖像。
4.background-repeat:repeat-x|repeat-y|no-repeat... 設置背景圖片如何鋪排填充。必須先指定<background-image>屬性
5.background-attachment:fixed|scroll|local? 設置背景圖像是隨對象內容滾動還是固定。必須先指定<background-image>屬性。
6.background-position:left|right|top|bottom|center 默認值:0% 0%,效果等同于left top。必須先指定<background-image>屬性。
7.background-origin:border-box|padding-box|centent-box 默認值:padding-box? 設置背景圖像計算<background-position>時的參考原點(位置)
8.background-clip:border-box|padding-box|content-box|text 默認值:border-box 指定對象的背景圖片向外裁剪的區域。
9.background-size:atuo|cover|contain 默認值:auto? 設置背景圖像的尺寸大小(auto:背景圖像的真實大小。cover:將圖片完全等比列縮放到完全覆蓋容器,背景圖像有可能超出容器。contain:將背景圖像等比列縮放到寬度或高度與容器的高度或寬度相等,背景圖像始終被包含在容器里)。

文本:

1.text-align:start|end|right|left|center|justify ... 默認值:start 設置內容的水平對齊方式。
2.text-indent:<lenngth> 默認值:0? 設置對象中的文本首行縮進(兩個字是32px)。
3.vertical-align:baseline|sub|super|top|text-top|middle|bottom|text-bottom|<length>? 默認值:baseline 設置內聯元素在行框內的垂直對齊方式(效果不明顯,,,基本沒作用)。
4.line-height:normal|<length> 默認值:normal 設置對象的行高,即字體最低端與字體內部頂端之間的距離。
5.word-wrap:normal|break-word 默認值:normal 設置當內容超過指定容器的邊界時是否斷行(break-word 跳到下一行,針對英文。中文會自動換行,不需要設置。)。
6.word-break:normal|keep-all|break-all 默認值:normal 設置文本的字內換行行為(keep-all:是在當前行的長度不夠放置這個單詞時,就讓整個單詞都跳轉到下一行。break-all:是把單詞拆分,放滿當前行,放置不下的拆分放置到下一行)。
7.word-spacing:normal|<length> 默認值:normal? 檢索單詞之間的最小,最大和最佳間隙。
8.letter-spacing:normal|<length> 默認值:normal? 設置字符之間的最小,最大和最佳間隙。
9.text-decoration:<text-decoration-line>|<text-decoration-style>|<text-decoration-color> 復合屬性。設置對象中的文本的修飾。
10.text-decoration-line:none|underline|overline|line-through|blink? 默認值:none 設置對象中的文本修飾線條的位置。
11.text-decoration-style:solid|double|dotted|wavy? 設置對象中的文本修飾線條的形狀。
12.text-decoration-color:<color> 設置對象中的文本修飾線條的顏色。
13.text-shadow:none|<shadow> 設置對象中文本的文字是否有陰影及模糊效果(上,左,下,右,偏移量,顏色)。

外邊距(外補白):

1.margin:<length> auto 設置一個值就可以設置全方位的偏移量。
2.margin-top. margin-right. margin-left. margin-bottom.

內邊距(內補白):

1.padding:<length> auto 設置一個值就可以設置全方位的偏移量。
2.padding-top. padding-right. padding-left. padding-bottom.

邊框:

1.border:[border-width]|[border-style]|[border-color]? 復合屬性。設置對象邊框的特性。
2.border-width:<length>? 設置邊框寬度。如果提供全部四個參數,將按上右下左(border-top,border-top-width 復合屬性)的順序作用于四邊。如果只提供一個,將用于全部的四邊。
3.boder-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset (border-top-style 復合屬性)設置邊框樣式。
4.border-color:<color> 設置或檢索對象的邊框顏色。

css盒子模型

圓角邊框:

1.border-radius:<length> 設置圓角邊框。(上左top-left,上右top-right,下右bottom-right,下左bottom-left。如果只提供一個將作用于全部的四個角)
2.border-top-left-radius?

陰影:

1.box-shadow:none|<shadow> 設置對象中文本的文字是否有陰影及模糊效果(水平 垂直 模糊值 外延值 顏色。其中模糊值和顏色必須要有)。

定位:

1.position:static|relative|absolute|fixed 默認值:static
????? a.static:無特殊定位,對象遵循正常交流文檔。top,right,bottom,left等屬性不會被應用。(即對top,right,bottom,left進行設置,也不會有任何作用,依然會根據元素默認排版情況進行放置)
????? b.relative:對象遵循正常交流文檔,但依據top,right,bottom,left等屬性在正常文檔流中偏移位置。(即放置情況會根據對top,right,bottom,left的設置,根據上一層對象進行排版)
????? c.absolute:對象脫離正常文檔流,使用top,right,bottom,left等屬性進行絕對定位。而其層疊通過z-index屬性定義。(即放置情況會根據對top,right,bottom,left的設置,相對最近的,設置了position的上一層對象進行排版)
????? d.fixed:對象頭里正常文檔流,使用top,right,bottom,left等屬性以窗口為參考點進行定位,當出現滾動條時,對象不會隨著滾動。(相對窗口固定在某個位置)
????? /*設置了absolute,脫離文檔,不按規則順序設置,自己相對設置了position的上級對象層設置,沒有就根據最底層設置(即窗口);設置了relative,不脫離文檔,都是根據上一層對象層進行設置。*/
????? 2.-index:auto| 默認值:auto 檢索或設置對象的層疊順序。必須定義position屬性值為absolute,relative或fixed,此取值方可生效。
???? 3.定位關鍵字:top,right,bottom,left?? 設置的默認值為auto。設置與其最近一個定位的父對象相關部分的位置。

布局:

1.display:none|inline|block|...? 用于設置布局的屬性。
?????? a. inline:行內元素。一個行內元素可以在段落中包裹一些文字而不會打亂段落的布局。span是一個標準的行內元素。a元素是最常用的行內元素,它可以被用作鏈接
????? b. block:塊級元素。一個塊級元素會新開始一行并且盡可能撐滿容器。其他常用的塊級元素包括p,form和HTML5種的新元素:header,footer,section等等。
????? c. none:通常用來在不刪除元素的情況下隱藏或顯示元素。它和visibility屬性不一樣。把display設置成none不會保留元素本該顯示的空間,但是visibility:hidden;還會保留(占位)。

浮動:

1.float:none|left|right 默認值:none 設置對象是否及如何浮動。(可實現表格布局的多列功能)
?????? a. left:設置元素從左向右依次排列
?????? b.right:設置元素從右向左依次排列
2.clear:none|left|right|both? 默認值:none? 設置是否允許浮動及浮動對象的邊。(使用float屬性設置多列功能后,在下一列開始之前使用clear屬性清除一次浮動,否則上面的布局會影響到下面)
????? a.none:允許兩邊都可以有浮動對象
????? b.both:不允許有浮動對象
????? c.left:不允許左邊有浮動對象
????? d.right:不允許右邊有浮動對象

元素選擇符:

1. *????? ? ? ?? ? ??通配選擇符?? 所有元素對象。
2.E?????????????????? 類型選擇符?? 以文檔語言對象類型作為選擇符。
3.E#myid ? ? ? ? id選擇符? ? ?? 以唯一標識符id屬性等于myid的E對象作為選擇符。
4.E.myclass ? ? class選擇符 ??以class屬性包含myclass的E對象作為選擇符。

偽類選擇符:

1.E:link? ? ? ? ? ? ? ? ? ? ? ? ? ? ?? 設置超鏈接a在未被訪問前的樣式。
2.E:visited? ? ?????????? ? ? ? ? ? ? 設置超鏈接a在其鏈接地址已被訪問過時的樣式。
3.E:hover? ? ? ? ? ? ? ? ? ? ? ? ? ?? 設置元素在其鼠標懸停時的樣式。
4.E:active? ? ? ? ? ? ? ?????????????? 設置元素在被用戶激活時的樣式。
5.E:focus? ? ???????????? ? ? ? ? ? ?? 設置元素在成為輸入焦點時的樣式。
6.E:checked ? ? ? ? ? ?????????????? 匹配用戶界面上處于選中狀態的元素E。
7.E:enabled? ????????? ? ? ? ? ? ? ? 匹配用戶界面上處于可用狀態的元素E。
8.E:disabled?????????? ? ? ? ? ? ? ? 匹配用戶界面上處于禁用狀態的元素E。
9.E:empty? ? ? ? ? ? ? ? ? ? ? ? ? ? 匹配沒有任何子元素(包括text節點)的元素E。
10.E:target? ? ? ? ? ??????????????? 匹配相關URL指向的E元素。
11.E:not(s)? ? ? ? ? ??????????????? 匹配不含有s選擇符的元素E。
12.E:root????????????? ????????????? 匹配E元素在文檔的根元素。
13.E:first-child???? ????????????? 匹配父元素的第一個子元素E。
14.E:last-child????? ????????????? 匹配父元素的最后一個子元素E。
15.E:only-child???? ? ? ? ? ? ? ? 匹配父元素僅有的一個子元素E。
16.E:nth-child(n)???????????????? 匹配父元素的第n個子元素E。
17.E:nth-last-child(n)????????? 匹配父元素的倒數第n個子元素E。
18.E:first-of-type??????????????? 匹配同類型中的第一個同級兄弟元素E。
19.E:last-of-type ??????????????? 匹配同類型中的最后一個同級兄弟元素E。
20.E:only-of-type ?????????????? 匹配同類型中的唯一的一個同級兄弟元素E。
21.E:nth-of-type(n?????????????? 匹配同類型中的第n個同級兄弟元素E。
22.E:nth-last-of-type(n)?????? 匹配同類型中的倒數第n個同級兄弟元素E

偽對象類選擇符:

1.E:before/E::before設置在對象前(依據對象樹的邏輯結構)發生的內容。用來和content屬性一起使用
2.E:after/E::after設置在對象后(依據對象樹的邏輯結構)發生的內容。用來和content屬性一起使用。

語法與規則:

1.!important?????????提升指定樣式條目的應用優先權。
2./*comment*/????CSS中的注釋 /* 這里是注釋內容 */
3.@import ? ? ? ? ? ?指定導入的外部樣式表及目標媒體。該規則必須在樣式表頭部最先聲明
3.@charset???????????在外部樣式表文件內使用。指定該樣式表使用的字符編碼
4.@media?????????????指定樣式表規則用于指定的媒體類型和條件。
5.@font-face????????設置嵌入HTML文檔的OpenType字體。
6.@keyframes??????指定動畫名稱和動畫效果。


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,815評論 1 92
  • CSS基礎 本文包括CSS基礎知識選擇器(重要!!!)繼承、特殊性、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,209評論 0 40
  • 時間:2016年5月16號 前三天,HTML5的基礎已經完結。網頁中涉及的樣式就跟我們今天學習的css有關。首先,...
    旭先生閱讀 1,007評論 0 3
  • 一.CSS描述 CSS全稱為“層疊樣式表(Cascading Style Sheets)”,它主要是用于定義HTM...
    snowy_sunny閱讀 1,107評論 0 4
  • Lvyawen閱讀 355評論 1 0