CSS入門-字體和背景的一些屬性

CSS文字屬性

長度單位
· px:像素,相當于設備(顯示器)的長度單位。相對單位
· em:文字長度的幾倍甥捺,默認1em=16px。相對定位
· { in(英寸)镀层,cm(厘米)皿曲,mm(毫米),pt(點數(shù))吴侦,pc(印刷單位)}屋休。絕對定位

rgb控制顏色
· 百分比:color:rgb(100%,100%,100%);
· 0-255:color:rgb(0-255,0-255,0-255);
·16進制:color:#00ff00;

rgba控制透明度
· 百分比:color:rgba(100%,100%,100%,0-1);
· 0-255:color:rgb(0-255,0-255,0-255,0-1);

字體

·設置字體 font-family:字體;多個字體用逗號隔開

p{
   font-family: Arial, "Times New Roman";
}

·字體大小 font-size: px;(em 默認字體的幾倍);

p{
    font-size: 12px;
}

·文字傾斜 font-style: normal正常 / oblique偏斜體 / italic斜體

p{
    font-style: italic备韧;
}

·字體加粗 font-weight: normal正常 / bold比正常字體粗 / bolder比blod字體粗 / lighter比正常字體細劫樟;100 ~ 900 共有9個層次,數(shù)字越大越粗织堂。

p{
    font-weight:  bold叠艳;
}

·文字顏色 color:red;

p{
   color:red;
}

·背景顏色 background:red;

p{
   background:red;
}

·單詞間距 word-spacing:-1px;

p{
   word-spacing:-1px; 
}

·字母間距 letter-spacing:10px;

p{
   letter-spacing:10px; 
}

·段落首行縮進 text-indent: 數(shù)值px/2em(兩個字的間距)

p{
  text-indent: 2em;
}

·文字裝飾 text-decoration: none;正常顯示 / underline;加下線 / line-through;刪除線 / overline;加頂線

p{
   text-decoration:underline;
}

·英文字母大小寫轉換 text-transform: capitalize;首字母大寫 / uppercase;全部大寫 / lowercase;全部小寫

p{
    text-transform: capitalize;
}

·垂直對齊 vertical-align:top頂部 / bottom底部 / middle居中;在目前瀏覽器中只能對表格單元格中的對象進行豎直方向的對齊設置易阳,而對于一般的塊級元素附较,例如div等,不起作用潦俺。

td{
   vertical-align:top;
}

·文字垂直對齊居中 line-height:height相同拒课;

p{
    height:30px;
    line-height:30px;
}

·文字的水平對齊 text-align: left左對齊,默認 / right右對齊 / center居中對齊 / justify兩端對齊

p{
    text-align:center;
}

CSS背景與列表屬性

·背景圖像 background-image:url(路徑);背景圖像所在的元素一定要設置寬和高

div{
   background-image:url(img/1.jpg);
}

·背景重復 background-repeat: repeat平鋪排滿,默認 / /repeat-x水平方向平鋪 / repeat-y垂直方向平鋪 / no-repeat不平鋪

div{
   background-repeat: no-repeat事示;
}

·背景圖片位置 background-position: 水平方向 垂直方向捕发;
水平方向:left center right ;
垂直方向:top center bottom很魂;
可以用數(shù)字;

div{
  // background-position: right top;
  background-position: right 20px;
}

·背景圖片復合屬性 background: 路徑 平鋪方式 位置信息扎酷;

div{
   background:url(img/1.jpg)  no-repeat  left 200px; 
}

·背景圖片位置固定 background-attachment: scroll滾動 / fixed固定不變;

div{
  background-attachment: scroll;
}

·ul列表樣式list-style-type:none沒有樣式/disc實心圓/circle空心圓square正方形遏匆;

ul{
   list-style-type:none;
}

·ol列表樣式list-style-type:decimal1,2,3…/ upper-alphaA,B,C.../lower-alpha a,b,c.../upper-roman I,II,III,IV.../lower-roman i,ii,iii,iv,v.../none不顯示

ol{
   list-style-type:none;
}

·列表項目標記的位置list-style-position:inside/outside;
inside 列表項目標記放置在文本以內法挨,且環(huán)繞文本根據(jù)標記對齊。
outside 默認值幅聘。保持標記位于文本的左側凡纳。列表項目標記放置在文本以外,且環(huán)繞文本不根據(jù)標記對齊帝蒿。

ul{
   list-style-position: inside;
}

·列表項目標記的圖像list-style-image:url(路徑)/none沒有;

ul{
  list-style-image:url(img/1.jpg)
}

·邊框
border-width:(粗線)
border-color:(顏色)
border-style:solid實線 / dashed虛線 / dotted點線 (線型)
border-left, (左邊框)
border-right,(右邊框)
border-top,(上邊框)
border-bottom,(下邊框)
border-right-color (右邊框顏色)

div{
 // border: 1px solid  red;
 border-right-color:1px solid  red;
}

·設置寬高
width: 百分比/像素(px)
height:百分比/像素(px)

div{
  width:100px;
  height:100px;
  border: 1px solid  red;
}

·圖片與文字的對齊方式
橫向對齊 text-align: left/ right/ center
圖片的水平對齊通常不能直接通過設置圖片的text-align屬性荐糜,而是通過設置其父元素的該屬性值來實現(xiàn)的。

縱向對齊 vertical-align: top/ bottom/middle
在默認情況下葛超,行內的圖像在最下端暴氏,將與同行的文字的基線對齊。
圖像的上或者下端將不在按照默認的方式與基線對齊

div{
  text-align: right;
}
img{
  vertical-align: middle;
}
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末绣张,一起剝皮案震驚了整個濱河市答渔,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌侥涵,老刑警劉巖沼撕,帶你破解...
    沈念sama閱讀 216,544評論 6 501
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件宋雏,死亡現(xiàn)場離奇詭異,居然都是意外死亡务豺,警方通過查閱死者的電腦和手機磨总,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,430評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來笼沥,“玉大人蚪燕,你說我怎么就攤上這事【赐兀” “怎么了?”我有些...
    開封第一講書人閱讀 162,764評論 0 353
  • 文/不壞的土叔 我叫張陵裙戏,是天一觀的道長乘凸。 經(jīng)常有香客問我,道長累榜,這世上最難降的妖魔是什么营勤? 我笑而不...
    開封第一講書人閱讀 58,193評論 1 292
  • 正文 為了忘掉前任,我火速辦了婚禮壹罚,結果婚禮上葛作,老公的妹妹穿的比我還像新娘。我一直安慰自己猖凛,他們只是感情好赂蠢,可當我...
    茶點故事閱讀 67,216評論 6 388
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著辨泳,像睡著了一般虱岂。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上菠红,一...
    開封第一講書人閱讀 51,182評論 1 299
  • 那天第岖,我揣著相機與錄音,去河邊找鬼试溯。 笑死蔑滓,一個胖子當著我的面吹牛,可吹牛的內容都是我干的遇绞。 我是一名探鬼主播键袱,決...
    沈念sama閱讀 40,063評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼摹闽!你這毒婦竟也來了杠纵?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 38,917評論 0 274
  • 序言:老撾萬榮一對情侶失蹤钩骇,失蹤者是張志新(化名)和其女友劉穎比藻,沒想到半個月后铝量,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,329評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡银亲,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 37,543評論 2 332
  • 正文 我和宋清朗相戀三年慢叨,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片务蝠。...
    茶點故事閱讀 39,722評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡拍谐,死狀恐怖,靈堂內的尸體忽然破棺而出馏段,到底是詐尸還是另有隱情轩拨,我是刑警寧澤,帶...
    沈念sama閱讀 35,425評論 5 343
  • 正文 年R本政府宣布院喜,位于F島的核電站亡蓉,受9級特大地震影響,放射性物質發(fā)生泄漏喷舀。R本人自食惡果不足惜砍濒,卻給世界環(huán)境...
    茶點故事閱讀 41,019評論 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望硫麻。 院中可真熱鬧爸邢,春花似錦、人聲如沸拿愧。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,671評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽浇辜。三九已至感猛,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間奢赂,已是汗流浹背陪白。 一陣腳步聲響...
    開封第一講書人閱讀 32,825評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留膳灶,地道東北人咱士。 一個月前我還...
    沈念sama閱讀 47,729評論 2 368
  • 正文 我出身青樓,卻偏偏與公主長得像轧钓,于是被迫代替她去往敵國和親序厉。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 44,614評論 2 353

推薦閱讀更多精彩內容

  • 1.塊級元素和行內元素 塊級(block-level)元素毕箍;行內(內聯(lián)弛房、inline-level)元素。 塊元素的...
    饑人谷_小侯閱讀 2,002評論 1 4
  • 學習CSS的最佳網(wǎng)站沒有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_閱讀 1,050評論 0 1
  • 一而柑,HTML有N多標簽文捶,根據(jù)顯示的類型荷逞,主要可以分為3大類 1,塊級標簽 獨占一行的標簽 能隨時設置寬度和高度(比...
    張不二01閱讀 734評論 0 4
  • CSS基礎 本文包括CSS基礎知識選擇器(重要4馀拧V衷丁!)繼承顽耳、特殊性坠敷、層疊、重要性CSS格式化排版單位和值盒模型浮動...
    廖少少閱讀 3,077評論 0 40
  • 一首澌澌然的歌從云端唱到山麓射富,從山麓唱到低低的荒村膝迎。我如一個孤獨的歌者,唱出繁華胰耗,唱出夢囈限次,歌里全是你來過的痕跡。...
    麻麻麻木木閱讀 184評論 0 3