千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機(jī)構(gòu)

手機(jī)站
千鋒教育

千鋒學(xué)習(xí)站 | 隨時(shí)隨地免費(fèi)學(xué)

千鋒教育

掃一掃進(jìn)入千鋒手機(jī)站

領(lǐng)取全套視頻
千鋒教育

關(guān)注千鋒學(xué)習(xí)站小程序
隨時(shí)隨地免費(fèi)學(xué)習(xí)課程

當(dāng)前位置:首頁  >  技術(shù)干貨  > HTMLCSS學(xué)習(xí)筆記(四)-- CSS屬性

HTMLCSS學(xué)習(xí)筆記(四)-- CSS屬性

來源:千鋒教育
發(fā)布人:wjy
時(shí)間: 2022-10-10 15:45:27 1665387927

  HTMLCSS學(xué)習(xí)筆記(四)-- CSS屬性

  CSS屬性

  屬性:屬性是指定選擇符所具有的屬性,它是css的核心,css2共有150多個(gè)屬性

  屬性值:屬性值包括法定屬性值及常見的數(shù)值加單位,如25px,或顏色值等。

  文本屬性

  1:文本大小 font-size

  說明:

  1) 屬性值為數(shù)值型時(shí),必須給屬性值加單位,屬性值為0時(shí)除外。

  2)單位還可以是pt,9pt=12px;

  3)為了減小系統(tǒng)間的字體顯示差異,IE Netscape Mozilla的瀏覽器制作商于1999年召開會(huì)議,共同確定16px/ppi為標(biāo)準(zhǔn)字體大小默認(rèn)值,即1em.默認(rèn)情況下,1em=16px,0.75em=12px; rem

  4)使用絕對(duì)大小關(guān)鍵字

  xx-small =9px

  x-small =11px

  small =13px

  medium =16px

  large =19px

  x-large =23px

  xx-large =27px

  2:文本顏色 color

  說明:

  用十六進(jìn)制(是計(jì)算機(jī)中數(shù)據(jù)的一種表示方法)表示顏色值:

  0 1 2 3 4 5 6 7 8 9

  0 1 2 3 4 5 6 7 8 9 A B C D E F

  顏色模式:光色模式

  R G B

  FF 00 00

  顏色值的縮寫:

  當(dāng)表示三原色的三組數(shù)字同時(shí)相同時(shí),可以縮寫為三位;

  當(dāng)用十六進(jìn)制表示顏色值時(shí),需要在顏色值前加“#”

  # fa 00 00

  3:文本類型 font-family:字體1,字體2,字體3......

  說明:

  瀏覽器首先會(huì)尋找字體1、如存在就使用改字體來顯示內(nèi)容,如在字體1不存在的情況下,則會(huì)尋找字體2,如字體2也不存在,按字體3顯示內(nèi)容,如果字體3 也不存在;則按系統(tǒng)默認(rèn)字體顯示;

  當(dāng)字體是中文字體時(shí),需加雙引號(hào);

  當(dāng)英文字體中有空格時(shí),需加雙引號(hào)如(“Times New Roman”)

  當(dāng)英文字體只有一個(gè)單詞組成是不加雙引號(hào);如:(Arial);

  Windows中文版本操作系統(tǒng)下,中文默認(rèn)字體為宋體或者新宋體,英文字體默認(rèn)為Arial.

  4:文字加粗font-weight:bolder(更粗的)/bold(加粗)/normal(常規(guī))/100—900;

  說明:

  在css規(guī)范中,把字體的粗細(xì)分為9個(gè)等級(jí),分別為100——900,其中100對(duì)應(yīng)最輕的字體變形,而900對(duì)應(yīng)最重的字體變形,

  100-400 一般 500常規(guī)字體 600-900加粗字體

  5:font-style:italic/oblique/normal(取消傾斜,常規(guī)顯示);

  說明:

  italic和oblique都是向右傾斜的文字, 但區(qū)別在于Italic是指斜體字,而Oblique是傾斜的文字,對(duì)于沒有斜體的字體應(yīng)該使用Oblique屬性值來實(shí)現(xiàn)傾斜的文字效果.

  7:文字行高 {line-height:normal/value;}

  說明:

  當(dāng)單行文本的行高等于容器高時(shí),可實(shí)現(xiàn)單行文本在容器中垂直方向居中對(duì)齊;

  當(dāng)單行文本的行高小于容器高時(shí),可實(shí)現(xiàn)單行文本在容器中垂直中齊以上;

  當(dāng)單行文本的行高大于容器高時(shí),可實(shí)現(xiàn)單行文本在容器中垂直中齊以下(IE6及以下版本存在瀏覽器兼容問題)

  *文字屬性簡(jiǎn)寫:font:12px/24px "宋體";

  font屬性的簡(jiǎn)寫:字號(hào),行高,字體

  font-size:12px; line-height:24px; font-family:”宋體”;

  font屬性的簡(jiǎn)寫:

  說明:font的屬性值應(yīng)按以下次序書寫(各個(gè)屬性之間用空格隔開)

  順序: font-style font-weight font-size / line-height font-family

  注意:

  

  (1)簡(jiǎn)寫時(shí) , font-size和line-height只能通過斜杠/組成一個(gè)值,不能分開寫。

  (2) 順序不能改變 ,這種簡(jiǎn)寫法只有在同時(shí)指定font-size和font-family屬性時(shí)才起作用,而且,你沒有設(shè)定font-weight , font-style , 他們會(huì)使用缺省值(默認(rèn)值)。

  8:水平對(duì)齊方式

  text-align:left/right/center/justify(兩端對(duì)齊中文不起作用)

  9:文本修飾text-decoration:

  說明:

  none:沒有修飾

  underline:添加下劃線

  overline:添加上劃線

  line-through:添加刪除線

  10:首行縮進(jìn)

  1)text-indent可以取負(fù)值;

  2)text-indent屬性只對(duì)第一行起作用。

  11:字間距、詞間距

  字間距{letter-spacing:value;}控制英文字母或漢字的字距。

  詞間距{word-spacing:value;}控制英文單詞詞距。

  列表屬性

  1、定義列表符號(hào)樣式

  list-style-type:disc(實(shí)心圓)/circle(空心圓)/square(實(shí)心方塊)/none(去掉列表符號(hào));

  list-style-type:none===list-style:none;

  2、使用圖片作為列表符號(hào)

  list-style-image:url(所使用圖片的路徑及全稱);

  3、定義列表符號(hào)的位置

  list-style-position:outside(外邊)/inside(里邊);

  list-style:none;去掉列表符號(hào)

  邊框?qū)傩?/strong>

  border:邊框?qū)挾?邊框風(fēng)格 邊框顏色;

  例如:border:5px solid #ff0000

  

  邊框:border,網(wǎng)頁中很多修飾性線條都是由邊框來實(shí)現(xiàn)的。

  邊框?qū)挾龋篵order-width:

  邊框顏色:border-color:

  邊框樣式:border-style:solid(實(shí)線)/dashed(虛線)dotted(點(diǎn)劃線)double(雙線)可單獨(dú)設(shè)置一方向邊框,

  

  可單獨(dú)設(shè)置一方向邊框,

  border-bottom:邊框?qū)挾?邊框風(fēng)格 邊框顏色;底邊框

  border-left:邊框?qū)挾?邊框風(fēng)格 邊框顏色;左邊框

  border-right:邊框?qū)挾?邊框風(fēng)格 邊框顏色;右邊框

  border-top:邊框?qū)挾?邊框風(fēng)格 邊框顏色;上邊框

  背景屬性

  · 1、背景顏色 {background-color:顏色值;}

  · 2、背景圖片的設(shè)置 background-image:url(背景圖片的路徑及全稱);背景圖片的顯示原則 1)容器尺寸等于圖片尺寸,背景圖片正好顯示在容器中 2)容器尺寸大于圖片尺寸,背景圖片將默認(rèn)平鋪,直至鋪滿元素; 3)容器尺寸小于圖片尺寸,只顯示元素范圍以內(nèi)的背景圖。 網(wǎng)頁上有兩種圖片形式:插入圖片、背景圖; 插入圖片:屬于網(wǎng)頁內(nèi)容,也就是結(jié)構(gòu)。 背景圖:屬于網(wǎng)頁的表現(xiàn),背景圖上可以顯示文字、插入圖片、表格等。

  · 3、背景圖片平鋪屬性{background-repeat:no-repeat/repeat/repeat-x/repeat-y }

  · 4、背景圖的位置 性{background-position:left/center/right/數(shù)值 top/center/bottom/數(shù)值;}水平方向上的對(duì)齊方式(left/center/right)或值 垂直方向上的對(duì)齊方式(top/center/bottom)或值 background-position:值1 值2; 兩個(gè)值 :第一個(gè)值表示水平位置的值,第二個(gè)值:表示垂直的位置。 當(dāng)兩個(gè)值都是center的時(shí)候?qū)懸粋€(gè)值就可以代表的是水平位置和垂直位置 說明:向左方向,向上方向是負(fù)值 背景屬性的縮寫語法: background:屬性值1 屬性值2 屬性值3; 背景縮寫:background:url(背景圖片的路徑及全稱) no-repeat center top #f00; 網(wǎng)頁上常用的圖片格式(壓縮圖片) 1)jpg :有損壓縮格式,靠損失圖片本身的質(zhì)量來減小圖片的體積,適用于顏色豐富的圖像;(像素點(diǎn)組成的,像素點(diǎn)越多會(huì)越清晰 )如果網(wǎng)頁中 2)gif:有損壓縮格式,靠損失圖片的色彩數(shù)量來減小圖片的體積,支持透明,支持動(dòng)畫,適用于顏色數(shù)量較少的圖像; 3)png:有損壓縮格式,損失圖片的色彩數(shù)量來減小圖片的體積,支持透明,不支持動(dòng)畫,是fireworks的 源文件格式,適用于顏色數(shù)量較少的圖像;

  · 5、背景圖的固定 性{{background-attachment:scroll(滾動(dòng))/fixed(固定);}fixed 固定,不隨內(nèi)容一塊滾動(dòng); scroll:隨內(nèi)容一塊滾動(dòng)。

  浮動(dòng)

  css屬性繼承

  不可繼承的:display、margin、border、padding、background、height、min-height、max- height、、min-width、max-width、overflow、position、left、right、top、 bottom、z-index、float、clear、table-layout、vertical-align

  

  所有元素可繼承:visibility和cursor。

  內(nèi)聯(lián)元素可繼承:letter-spacing、word-spacing、line-height、color、font、 font-family、font-size、font-style、font-variant、font-weight、text- decoration、text-transform。

  塊狀元素可繼承:text-indent和text-align

  列表元素可繼承:list-style、list-style-type、list-style-position、list-style-image。

  表格元素可繼承:border-collapse。

tags:
聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
10年以上業(yè)內(nèi)強(qiáng)師集結(jié),手把手帶你蛻變精英
請(qǐng)您保持通訊暢通,專屬學(xué)習(xí)老師24小時(shí)內(nèi)將與您1V1溝通
免費(fèi)領(lǐng)取
今日已有369人領(lǐng)取成功
劉同學(xué) 138****2860 剛剛成功領(lǐng)取
王同學(xué) 131****2015 剛剛成功領(lǐng)取
張同學(xué) 133****4652 剛剛成功領(lǐng)取
李同學(xué) 135****8607 剛剛成功領(lǐng)取
楊同學(xué) 132****5667 剛剛成功領(lǐng)取
岳同學(xué) 134****6652 剛剛成功領(lǐng)取
梁同學(xué) 157****2950 剛剛成功領(lǐng)取
劉同學(xué) 189****1015 剛剛成功領(lǐng)取
張同學(xué) 155****4678 剛剛成功領(lǐng)取
鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
董同學(xué) 138****2867 剛剛成功領(lǐng)取
周同學(xué) 136****3602 剛剛成功領(lǐng)取
相關(guān)推薦HOT
大數(shù)據(jù)測(cè)試工程師需要具備哪些技能?

一、理解大數(shù)據(jù)概念大數(shù)據(jù)測(cè)試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲(chǔ)、MapReduce、實(shí)時(shí)計(jì)算等。他們還需要了解如何處理大規(guī)模的...詳情>>

2023-10-14 23:43:03
為什么SpringBoot的 jar 可以直接運(yùn)行?

一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫,它是一種壓縮文件格式,可以將Java項(xiàng)目的類文件、資源文件以及依賴庫等...詳情>>

2023-10-14 23:01:49
站群服務(wù)器是什么?

站群服務(wù)器的含義與用途站群服務(wù)器主要用于支持站群,即由一組相互鏈接的網(wǎng)站組成的群體。這些網(wǎng)站通常由同一組織或個(gè)人擁有,并且經(jīng)常會(huì)互相鏈...詳情>>

2023-10-14 22:46:12
自編碼器是什么?

一、自編碼器原理自編碼器的設(shè)計(jì)靈感源于神經(jīng)科學(xué)中關(guān)于感知系統(tǒng)的認(rèn)知原理,它的核心思想是將輸入數(shù)據(jù)經(jīng)過編碼過程,形成一個(gè)隱藏層的特征表示...詳情>>

2023-10-14 22:41:10
什么是云網(wǎng)融合?

一、云網(wǎng)融合的定義云網(wǎng)融合是指將云計(jì)算與網(wǎng)絡(luò)技術(shù)相結(jié)合,實(shí)現(xiàn)資源的共享、業(yè)務(wù)的協(xié)同,將網(wǎng)絡(luò)與云端服務(wù)深度融合,提供更靈活、高效、安全的...詳情>>

2023-10-14 22:31:47
久久亚洲中文字幕精品一区四,亚洲日本另类欧美一区二区,久久久久久久这里只有免费费精品,高清国产激情视频在线观看
亚洲ⅴa久久久噜噜噜久久狠狠 | 日韩精品成人动漫在线播放一区二区 | 亚洲人成网站日本片 | 亚洲精品国产精品制服丝袜 | 中文字幕色婷婷在线精品中 | 亚洲AⅤ一区二区三区四区 亚洲国产人成视频 |