CSS 初步學習(1)

2021-10-18 22:44:07 字數 4327 閱讀 7679

通過標籤修改樣式的缺點:

1.需要記憶標籤和屬性,如果該標籤沒有這個屬性,那麼設定也沒有效果

2.需求變更時,需要修改大量**才能滿足現在的需求

3.html只有乙個作用就是新增語義

所以在企業開發中,修改樣式都是交給css來做。

type

="text/css"

>

標籤名稱

style

>

tips:

格式:

font-style:italic;
取值:

格式:

font-weight:bold;
單詞取值

bold:加粗

bolder:比加粗還要粗

lighter:細線,預設

快捷鍵:

fw+table鍵:font-weight:;

fwb:font-weight:bold;

fwbr:font-weight:bolder;

數字取值

100-900之間整百的數字

格式:

font-size:30px;
單位:px(畫素 pixel)

tips:

快捷鍵:

fz:font-size

fz30:font-size:30px;

格式:

font-family:「微軟雅黑」
注意點:

快捷鍵ff:font-family

1.如果設定的字型不存在,那麼系統會使用預設的字型來顯示:即宋體

2.如果設定的字型不存在,而我們又不想預設的字型來顯示怎麼辦

3.如果想給中文和英文單獨設定字型,怎麼辦?

在企業開發中,最常見的字型有以下幾個:

中文:宋體,黑體,微軟雅黑

英文本型:times new roman / arial

並不是名稱是英文就一定時英文的字型,因為中文字型都有自己的英文名稱,所以判斷是否為中文字型看能不能處理中文

縮寫格式:

font:style weight size family;

即 font:italic bold 10px 「字型」;

tips:

1.文字裝飾屬性

格式:

text-decoration:取值;
取值:

快捷鍵:

td:text-decoration:none;

tdu,tdo,tdl

2.文字水平對齊屬性

格式:

text-align:」取值「;
取值:left,right,center

快捷鍵:tal(預設) tar tac

3.文字縮排屬性

格式:

text-indent:"取值";
取值:如2em(em是單位,乙個em代表縮排乙個字元的寬度)

快捷鍵:ti2e 即text-indent:2em;

格式:

color:顏色;
1.在css中如何通過color屬性來修改文字顏色

取值:十六進製制:一種計數方式,取值範圍0-f,逢16進一

第一位*16+第二位就是十進位制數

tips:

作用:根據指定的標籤名稱,在當前介面中找到所有該名稱的標籤,然後設定屬性

tips:

作用:根據指定的id名稱找到對應的標籤,然後設定屬性

格式:

#id名稱
tips:

作用:根據指定的類名稱找到對應的標籤,然後設定屬性

格式:

.類名
tips:

《標籤名稱

class

=」類名一

類名二...「

>

總結

id和class有何區別

1.id相當於人的身份作證不可重複,class相當於人的名稱可以重複

2.乙個html標籤只能繫結乙個id名稱,可以繫結多個class名稱

id選擇器和class選擇器有何區別:

id選擇器以#開頭,class選擇器以.開頭

在企業開發中到底用id還是class選擇器?

id一般情況下是給js用的,除非特殊情況,否則不要使用id去設定樣式

在企業開發中,開發人員對類的使用可以看出開發人員的技術水平,要注重冗餘**的抽取,可以將一些公共的**抽取到乙個類選擇器中即可

作用:找到指定標籤的所有後代標籤,設定屬性

格式:

標籤名稱1 標籤名稱2
先找到名稱叫做標籤名稱1的標籤,然後再給這個標籤下面去查詢所有名稱叫做標籤名稱2的標籤,然後設定屬性

tips:

作用:找到指定標籤中所有的直接子元素,然後設定屬性

格式:

標籤名稱1>標籤名稱2
先找到名稱為」標籤名稱1「的標籤,然後在這個標籤中查詢所有的直接子元素名稱叫做「標籤名稱2」的元素

tips:

總結

後代選擇器和子元素選擇器之間的區別

1.後代選擇器用空格作為連線符號;子元素選擇器使用》作為連線符號

2.後代選擇器會選中指定標籤中所有的特定後代標籤;子元素選擇器只會選擇指定標籤中所有特定的直接標籤。(企業開發中的選擇依據)

後代選擇器和子元素選擇器之間的共同點

1.都可以使用標籤名稱/id名稱/class名稱作為選擇器

2.都可以通過各自指定連線符號一直延續下去

作用:給所有選擇器選中的標籤中,相交的那部分標籤設定屬性

格式:

選擇器1選擇器2
tips:

作用:給所有選擇器選中的標籤設定屬性

格式:

選擇器1,選擇器2
tips:

1.相鄰兄弟選擇器(css2)

作用:給指定選擇器後面緊跟的那個選擇器選中的標籤設定屬性

格式:

選擇器1+選擇器2
tips:

2.通用兄弟選擇器(css3)

作用:給指定選擇器後面的所有選擇器選中的所有標籤設定屬性

格式:

選擇器1~選擇器2
tips:

css3中新增的選擇器最具代表性的就是序選擇器

1.同級別的第幾個

:first-child 選中同級別的第乙個

:last-child選出同級別中的最後乙個標籤

:nth-child(n)選中同級別中的第n個標籤

:only-child 選中父元素中唯一的子元素

tips:

2.同型別的第幾個

:first-of-type 選出同級別中同型別的第乙個標籤

:last-of-type 選出同級別同型別中的最後乙個標籤

:nth-of-type(n)選中同級別中同型別的第n個標籤

:nth-last-of-type(n)選出同級別中同型別的倒數第幾個

:only-of-type 選中父元素中唯一型別的某個元素

作用:根據指定的屬性名稱找到對應的標籤,然後設定屬性

格式:

【attribute】

作用:根據指定的屬性名稱找到對應的標籤,然後設定屬性

例:p[id]

即p標籤中所有帶有id屬性的

【attribute=value】

作用:找到有指定屬性,並且屬性的取值等於value的標籤

最常見的應用場景為區分input屬性

例:p【class=cc】

1.屬性的取值是以什麼開頭的

【attribute|=value】(css2)

【attribute~=value】(css3)

2.屬性的取值是以什麼結尾的

【attribute$=value】(css3)

3.屬性的取值是否包含某個固定的取值的

【attribute~=value】(css2)

【attribute*=value】(css3)

重點掌握css3的

作用:給當前介面上所有的標籤設定屬性

格式:

*
tips:

OpenCV學習 1 初步接觸

一 介紹opencv opencv的全稱是open source computer vision library,是乙個跨平台的計算機視覺庫。opencv是由英特爾公司發起並參與開發,以bsd許可證授權發行,可以在商業和研究領域中免費使用。opencv可用於開發實時的影象處理 計算機視覺以及模式識別...

初步學習css 從css手冊看起 Font

其實學css還是有兩個星期了吧,但是自己在上班,雖說這段時間不是很忙,加上自己還是實習,所以呢還是有空餘大把時間來學習的。自己還是一邊學一邊寫下筆記吧!加深印象,介個難免回忘記的 css properties reference 樣式表屬性 font 字型 font基本的語法 font style ...

CSS3學習 初步應用

css是由選擇器 selector 與樣式規則 rule 組成 和jquery相似 而選擇器是指css樣式要應用的目標。當不同的選擇器寫在一起的時候,中間用逗號 隔開即可 當有多個樣式規則時,中間用分號 隔開。下面進行演示 首先在對應的css檔案中對要修飾的物件進行定義 text style1然後在...