1. 程式人生 > 其它 >css-字型、文字屬性、快捷鍵、背景

css-字型、文字屬性、快捷鍵、背景

(一)Fonts(字型)屬性 一 字型 用font-family屬性定義字型 1.eg: p{font-family:"微軟雅黑";} p{font-family:"微軟雅黑",sans-serif,"Microsofe YaHei";}//會優先顯示第一個,沒有第一個字型就顯示第二個 2.語法
  • 多個字型之間用逗號
  • 由多個單片語成的字型加引號
  • 一般直接給<body>標籤寫上字型就行了: body{ }
二 字型大小 font-size:20px; (px為畫素) 三字型粗細 font-weight: 屬性值可以是:normal | bold | bolder | number
  • normal正常的字型。效果跟400一樣
font-weight:400;和font-weight:normal;等價
  • bold加粗 。效果跟700一樣
  • 一般用100-900直接寫數字
四 文字樣式 font-style 屬性值:
  • normal預設值
  • italic斜體
五字型屬性的混合使用 可以用一句話寫完所有字型屬性:
  • 格式要求:順序只能按照下面的順序
  • 屬性值之間用空格,不用謝屬性名,直接寫值就行了
font:italic 700 16px "Microsoft yahei";
  • 別的屬性可以省略(取預設值),但必須保留font-size和font-family屬性,否則font不起作用
(二)文字屬性text 一 文字顏色 屬性名color: 二 text-align對齊文字 只能設定水平對齊方式:左對齊left、右對齊right、居中center
  • 想讓圖片居中對齊,則讓他的父標籤新增水平居中的程式碼
  • 文字居中對齊: text-align:center;
三裝飾文字text-decoration 新增下劃線underline(a標籤自帶下劃線)、刪除線line_through、上劃線overline。預設為none 四文字縮排 text-indent 用於首行的縮排 1.eg:text-indent:20px; 2.設定-20就向左縮了 3.em是一個相對單位 縮排兩個文字大小:text-indent:2em; 五行間距 line-height控制行與行之間的距離 文字16px,若設定行間距為26,則上下間距各為5 (三)其他 一 一條線: <hr> (四) emmet語法 作用:快速生成html,css語法 一 快速生成html:
  • 英文的!加tab生成html模板
  • div*10按tab鍵,則會生成10個div
  • ul>li按tab,會生成ul標籤裡面包含li的標籤
父子級用>,兄弟用+ eg:div+p然後tab
  • 寫.nav然後tab會自動生成div中含class=“nav”的標籤
若想生成id則寫#banner然後tab 若想生成p標籤則p.one然後tab,則<p class="gray"></span>
  • 想有順序則用$
.demo$*5再tab 則會生成 <div class="demo1"></div> <div class="demo2"></div> <div class="demo3"></div> <div class="demo4"></div> <div class="demo5"></div> 只寫$也會依次生成12345文字
  • 想標籤裡顯示文字,用{ }
div{今天是30號} 會生成 <div>今天是30號</div> 二快速生成css
  • 用縮寫。寫首字母就行。w200再tab會生成width:200px;
  • lh26 tab會生成line-height:26ps
(五)背景 一 背景顏色 在div中的css中直接寫color指的是文字顏色,background-color才是盒子的背景顏色 backfround-color: 預設屬性值:transparent透明的 二 背景圖片 background-image 屬性值:none或者url地址 語法:background-image:url( ); 即:背景圖片的地址是在css中新增的 eg: .nav.bg1{ background:url(image.png) no-repeat; } <div class="nav"> <a href="" class="bg1">gfd</a>
  • 圖片要和html檔案在一個資料夾裡
三背景平鋪 background-repeat 屬性值: 背景圖片預設為平鋪
  • repeat-x:沿著x軸平鋪,即橫著平鋪
四 背景位置 background-position可以改變圖片在背景中的位置 1.屬性值可以寫center left等 eg:background-position:center top;圖片在上方的中間 background-position:right center;圖片在右邊的中間
  • 如果只寫了一個right,則預設在right中的中間
2.屬性值也可以寫精確座標,先寫x座標後寫y座標 x指圖片離左邊框的距離,y指圖片離上邊框的距離,
  • 如果只設定一個值,則另一個預設居中
3.屬性值也可以一個寫精確座標,另一個寫center等。按照x和y的順序 五 背景圖片固定 background-attachment 屬性值: 六背景色半透明:(css3新增屬性) background:rgba(0,0,0,0.3)
  • 最後一個引數為透明度,取值0-1,0為全透明,1為不透明
  • 0,0,0,表示黑色
七 背景複合寫法 順序為: eg:

本文來自部落格園,作者:mdj今天又過關了,轉載請註明原文連結:https://www.cnblogs.com/mhhh/p/15751694.html