通過標籤修改樣式的缺點:
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然後在...