CSS樣式詳解
淮安網站建設公司創(chuàng)新互聯公司,淮安網站設計制作，有大型網站制作公司豐富經驗。已為淮安千余家提供企業(yè)網站建設服務。企業(yè)網站搭建\外貿營銷網站建設要多少錢，請找那個售后服務好的淮安做網站的公司定做！
字體樣式(font)
字體
font-family:字體名
font-family:字體名1，字體名2...
font-family: fantasy | monospace | ncursive | serif | sans-serif
字體系列
cursive：模擬手寫的字體，通常這類字體的曲線比較明顯。
monospace：無比例的字體。通常用于模擬打字機中打出來的文字，也就是等寬字體。
serif：有比例有襯線的字體，這種字體中的所有字母都根據不同需要占有不同的寬度，有襯線是指在字母上做裝飾的細線。
sans-serif：有比例無襯線的字體，這種字體中的所有字母都根據不同需要占有不同的寬度。
文字大小
font-size: xx-small | x-small | small | medium | large | x-large | xx-large | larger | smaller | 長度 | 百分比
xx-small：文字顯示為最小(絕對)；
x-small：文字顯示為較小(絕對)；
small：文字顯示為小(絕對)；
medium：默認值(絕對)
large：文字顯示為大(絕對)；
x-large：文字顯示為較大(絕對)；
xx-large：文字顯示為最大(絕對)；
larger：增大(相對)；
smaller：減小(相對)；
長度：數值加上單位；
百分比：相對字體大小。
文字大小調整
在英文方面，一段文字看上去是否舒服，很大程度上取決于當前字體的高度與這種字體的小寫x字母高度的比值，這個比值稱為字體的面值。
font-size-adjust: none | number
none：不改變文字大??；
number：強制文字使用面值。
粗體
font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900
normal：默認值(400)，正常粗細；
bold：加粗(700)；
bolder：比normal粗，比bold細；
lighter：不比normal粗；
x00：分9個級別，數值越大越粗。
斜體
font-style: normal | italic | bolique
normal：默認值，代表正常的字體；
italic：斜體；
bolique：傾斜的字體。
文字變形－小型大寫字母
fontvariant: normal | small-caps
normal：默認值；
small-caps：小型大寫字母
小型大寫字母指將字母更改為大寫字母，并且該大寫字母比通常的大寫字母要小。
文字變形－文字拉伸
font-stretch: normal | narrower | wider | ultra-condensed | extra-condensed | condensed | semi-condensed | semi-expanded | expanded | extra-expanded | ultra-expanded
normal：默認值，不拉伸變形；
narrower：水平方向變窄；
wider：水平方向變寬；
condensed：壓縮文字；
extra-condensed：壓縮得很??；
ultra-condensed：壓縮得特別??；
semi-condensed：從大到小逐步縮??；
semi-expanded：從小到大逐步變大；
expanded：拉伸文字；
extra-expanded：拉伸得很大；
ultra-expanded：拉伸得特別大。
PS：font-stretch是CSS2中所規(guī)定的屬性，目前還沒有瀏覽器可以支持該屬性。
修飾
text-decoration: none | underline | overline | line-through | blink
none：默認值，無修飾樣式；
underline：下劃線；
overline：上劃線；
line-through：貫穿線；
blink：閃爍。
陰影
text-shadow: none | color | length | length | length | inherit
none：不設置；
color：陰影的顏色；
length：長度值；
inherit：繼承父級樣式。
陰影有3個length要進行設置，分別是水平方向的距離、垂直方向的距離和模糊半徑的長度(不能為負值)。
大小寫轉換
text-transform: capitalize | uppercase | lowercase | none | inherit
capitalize：首字母大寫；
uppercase：變大寫；
lowercase：變小寫；
none：不改變；
inherit：繼承。
間距－行間距
行間距：文本行與行之間的距離
line-height: normal | number | length | 百分數 | inherit
normal：默認值；
number：在當前文字大小的基礎上再做增加來設置行高(不能為負值)；
length：指定行高數(不能為負值)；
百分數：用百分數表示行高；
inherit：繼承。
行高是指上一行文字的基線與下一行文字之間的基線之間的距離，行高等于行間距加上文字高度。
間距－字間距
letter-spacing: normal | length | inherit
normal：默認值；
length：字間距的大小；
inherit：繼承。
詞間距
word-spacing: normal | length | inherit
normal：默認值；
length：詞間距的大小；
inherit：繼承。
文本樣式
文字縮進
text-indent: length | 百分數 | inherit
length：縮進量；
百分數：父級元素的百分比；
inherit：繼承。
水平對齊
text-align: left | right | center | justify | string | inherit
left：左對齊；
right：右對齊；
center：居中對齊；
justify：兩端對齊；
string：字符對齊，多用于表格里；
inherit：繼承。
垂直對齊
vertical-align: baseline | sub | super | top | text-top | middle | bottom | text-bottom | 百分數 | length | inherit
baseline：默認值，基線對齊；
sub：下標；
super：上標；
top：頂端對齊；
text-top：文本行頂端對齊；
middle：中間對齊；
bottom：底端對齊；
text-bottom：文本行底端對齊；
百分數：相對于父級元素的基線的百分比；
length：調整長度；
inherit：繼承。
文字方向－文本流入方向
derection: ltr | rtl | inherit
ltr：left to right，默認值，從左到右流入；
rtl：right to left，從右到左流入；
inherit：繼承。
文字方向－文字方向
unicode-bidi: normal | embed | bidi-override | inherit
normal：默認值，不打開流入的文字，對其文字不重排；
embed：打開流入的文字，在對象內部進行隱式重排；
bidi-override：嚴格按流入方向重排文字；
inherit：繼承。
文字方向－豎排文字
layout-flow: horizontal | vertical-ideographic
horizontal：書寫方向從左到右，由上而下；
vertical-ideographic：書寫方向從上至下，由左至右。
空格處理
white-space: normal | pre | nowrap | inherit
normal：默認值，瀏覽器自動忽略多余的空格，連續(xù)多個空格只顯示一個；
pre：類似于pre元素，瀏覽器不忽略源代碼的空格；
nowrap：不自動換行；
inherit：繼承。
詞間換行
word-break: normal | break-all | keep-all
normal：默認值，對于英文則以單詞為單位換行，對于中文則以字為單位換行；
break-all：英文以字母為單位換行；
keep-all：對于英文以單詞為單位換行，對于中文則以標點或空格為單位換行。
首字樣式
使用偽元素fitst-letter，對于英文則代表第一個字母，對于中文則代表第一個文字。
首行樣式
使用偽元素first-line，設置第一行文字的樣式。
顏色與背景樣式
文本顏色：指文本的顏色。
color: 顏色 | inherit
顏色：使用指定顏色值；
inherit：繼承。
背景色：指元素后面背景的顏色。
background: transparent | 顏色 | inherit
transparent：設置透明，默認值；
顏色：使用指定顏色值；
inherit：繼承。
背景圖片
background-image: none | url(路徑) | inherit
none：無背景圖片(默認值)；
url(路徑)：圖片的URL地址；
inherit：繼承；
背景附件：指背景圖片如何依附元素。
background-attachment: scroll | fixed | inherit
scroll：滾動，隨內容滾動，默認值；
fixed：固定，不隨內容滾動；
inherit：繼承。
背景重復
background-repeat: repeat | no-repeat | repeat-x | repeat-y | inherit
repeat：重復，平鋪圖片，默認值；
no-repeat：不重復，不平鋪圖片；
repeat-x：水平方向重復；
repeat-y：垂直方向重復；
inherit：繼承。
背景定位：背景圖片的定位，要設置兩個值，分別是相對于元素左上角的x軸和y軸，默認是0px。
background-position: top | center | bottom | left | right | 數值 | 百分數 | inherit
top：頂部；
center：中部；
bottom：底部；
left：左側；
right：右側；
數值：用數值指定圖片的位置；
百分數：用百分數表示位置；
inherit：繼承；
背景綜合應用(可節(jié)省代碼)
background: background-color | background-image | background-repeat | background-attachmen | background-position
background-color：顏色；
background-image：圖片；
background-repeat：重復方式；
background-attachmen：附件；
background-position：定位。
一共有三種 形式存在
第一種為標簽樣式，taglib為標簽名，后面{}里面加屬性,這種樣式對頁面內所有的標簽名為taglibname的標簽起作用。
第二種為css類樣式，需要在HTML開始標簽 后綴 class="name"，name即類名，這類標簽對HTML內所有后綴同樣name的標簽起作用 class="name" 可以設在多個開始標簽后，表示這些標簽具有同一類樣式。
第三種為cssID樣式，需要在HTML開始標簽后綴 id="id",需要注意的是，ID樣式的話，每一個name都是獨立且不重復的，具有唯一性。
希望我的回答對你有幫助
使用cursor設置
也可以設置圖片cursor:url()，圖片格式必須為.ico或.cur。
可以用visibility來控制圖標或字體的閃爍
img元素是屬于HTML的概念
背景圖屬于css概念
所以img和背景圖的使用主要取決于內容
默認情況下，背景圖會在橫坐標和縱坐標中進行重復
預設值：contain、cover，類似于object-fit
數值或百分比
設置背景圖的位置
預設值：left、bottom、right、top、bottom
數值或百分比：數字可以是負數
雪碧圖（精靈圖）（spirit）: 需要小圖標合并成一張大圖片，大圖片就是雪碧圖
通常用它控制背景圖是否固定。
fixed: 此時背景圖是相對于視口的
1. CSS2.1的尺寸體系
在CSS2.1的世界中，常見的尺寸分為這幾類：
2.1 充分利用可用空間。例如，一些div元素默認寬度100%父元素，這種充分利用可用空間的行為就稱為“fill-available”。
2.2 收縮與包裹。典型代表就是浮動，絕對定位以及inline-block，英文稱為“shrink-to-fit”，直譯為“收縮到合適”，這種直譯往往都是不準確的，這種行為表現確實很難描述，有些只可意會不能言傳的感覺，而我自己一直以“包裹性”作為理解。在CSS3中有個專有的關鍵名稱，fit-content
2.3 收縮到最小。這個基本上就出現在table-layout為auto的表格中，想必有經驗的小伙伴一定見過下面這樣一柱擎天的盛況的吧！
大家空間都不夠的時候，文字能斷的就斷，中文是隨便斷的，英文單詞不能斷。于是乎，第一列被無情地每個字都斷掉，形成一柱擎天。這種行為稱之為“preferred minimum width”或者“minimum content width”，也就是本文的重點角色之一min-content，換了一個更加規(guī)范好聽的名字了。
2.4 超出容器限制 上面1~3情況，除非有明確的width相關設置，否則尺寸都不會主動超過容器寬度的，但是，存在一些特殊情況，例如，連續(xù)的英文數字，好長好長；或者內聯元素被設置了white-space:nowrap，則表現為一江春水向東流
例如下面：
max-content的表現與之有些類似，具有收縮特性，同時最大內容寬度
2. 理解width:fill-available
width:fill-available比較好理解，比方說，我們在頁面中扔一個沒有其他樣式的div元素，則，此時，該div元素的width表現就是fill-available，自動填滿剩余的空間。也就是我們平常所說的盒模型的margin,border,padding的尺寸填充。
出現fill-available關鍵字值的價值在于，我們可以讓元素的100%自動填充特性不僅僅在block水平元素上，其他元素，例如，我們一直認為的包裹收縮的inline-block元素上：
此時，元素兼具了塊狀元素的自動填充特性以及內聯元素的定位對齊等特性(vertical-align/height/line-height)。于是，（例如）我們就可以直接使用line-height讓一個塊狀表現的元素垂直居中
3. 理解width:max-content
max-content的行為表現可以這么理解，假設我們的容器有足夠的寬度，足夠的空間，此時，所占據的最大寬度是就是max-content所表示的尺寸。
會發(fā)現，width:max-content表現得好像設置了white-space:nowrap一樣，文字一馬平川下去，元素的寬度也變成了這些文字一行顯示的寬度！為什么會這么表現呢？定義就是這樣的，對吧，我們對照下， 首先，假設我們的容器有足夠的空間，你想呀，容器足夠空間，那下面的描述文字肯定會從左到右排列一行顯示了，此時，上面的圖片和下面的文字哪個內容寬度大？，自然是文字啦，所謂max-content就是width值采用寬度大的那個內容的寬度，也就是這里的文字的長度了
4. 理解width:min-content
min-content寬度表示的并不是內部哪個寬度小就是哪個寬度，而是，采用內部元素最小寬度值最大的那個元素的寬度作為最終容器的寬度。
首先，我們要明白這里的“最小寬度值”是什么意思。對于替換元素，例如圖片的最小寬度值就是圖片呈現的寬度，對于文本元素，如果全部是中文，則最小寬度值就是一個中文的寬度值；如果包含英文，因為默認英文單詞不換行，所以，最小寬度可能就是里面最長的英文單詞的寬度。So，大家明白的說
同樣的是和display:inline-block做比較，display:inline-block雖然也具有收縮特性，但寬度隨最大長度長的那一個（同時不超過可用寬度）。而width:min-content的最終寬度是圖片和文字最小寬度值里面較大的那一個
5. 理解width:fit-content
width:fit-content也是應該比較好理解的，“shrink-to-fit”表現，換句話說，和CSS2.1中的float, absolute, inline-block的尺寸收縮表現是一樣的
OK，然后，有小伙伴會疑問，既然跟很多CSS聲明有一樣的表現，那為什么還要再弄個新東西呢？
就拿水平居中效果舉例，首先浮動肯定不行，因為只有左浮動和右浮動；絕對定位壓根不占據空間，普通流中根本無法應用，而inline-block需要父級使用text-align:center，而本身可能還需要text-align:left略煩。
而width:fit-content可以沒有這些煩惱，因為，width:fit-content可以實現元素收縮效果的同時，保持原本的元素block水平狀態(tài)，于是，就可以直接使用margin:auto實現元素向內自適應同時的居中效果了。
css樣式是HTML的一個補充，簡單的css使用樣式如下:
html
body
div?id=div/div
/body
style?type="text/css"
width:300px;//設置div的寬度300像素
height:500px;//設置div高度500像素
background-color:red;//設置div的背景顏色為紅色
/style
/html
css代碼位于style之間，詳細的css代碼解釋見代碼注釋。
CSS樣式分為：內聯式css樣式、嵌入式css樣式、外部式css樣式。
對CSS三種樣式定義及其實例：
內聯式css樣式。
內聯式css樣式表就是把css代碼直接寫在現有的HTML標簽中，如下面代碼：
1? ?p?style="color:red"這里文字是紅色。/p? ?
css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開（英文狀態(tài)下;）。
嵌入式css樣式。
嵌入式css樣式，就是可以把css樣式代碼寫在標簽之間。如下面代碼實現把三個標簽中的文字設置為紅色：
1? ?style?type="text/css"span{color:red;}/style? ?
嵌入式css樣式必須寫在之間，并且一般情況下嵌入式css樣式寫在之間。
外部式css樣式。
外部式css樣式(也可稱為外聯式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名（也可以為調用其他網站CSS）。
1? ?link?href="style.css"?rel="stylesheet"?type="text/css"?/? ?
注意事項：?1、css樣式文件名稱以有意義的英文字母命名，如 main.css。?2、rel=”stylesheet” type=”text/css” 是固定寫法不可修改。?3、標簽位置一般寫在標簽之內。
掌握好三種CSS三種樣式使用方法在Web開發(fā)中將節(jié)省很多時間。
重慶分公司
重慶分公司
