day44前端開發2之css基礎

時間 2019-11-09

標籤 day44 day 前端開發 css 基礎欄目 CSS 简体版

原文原文鏈接

web前端開發1
一.前端三劍客之css
1.選擇器:由標籤/類/id單獨或組合出現
2.做用域:{}內部區域
3.樣式塊:知足css連接語法的各類樣式
eg:引入的基本樣式
<head>
  <style>                   
   div {
    color: red
    background-color: cyan;
    font-size: 100px   
   }
  </style>
</head>
二.再html引入css的三種方式 : 行間式 | 內聯式 | 外聯式
1.行間式
  
  
  
  
  <div style="width: 100px; height: 100px; </div>
2.內聯式
  
  
  
  
  
  <head>
   <style>
    div {width: 100px;
    height: 100px;
    background-color: red;
    }
   </style>
  </head>
  <body>
   <div></div>
  </body>
3.外聯式
  
  
  
  
  
  
  file: zero.css
  div {
   width: 100px;
   height: 100px;
   background-color: red; }
  file: zero.html
  <head>
   <link rel="stylesheet" type="text/css" href="css/zero.css" />
  </head>
4.三種引入方式的優先級
  注:三種方式間沒有優先級 -->

三.css中長度級顏色單位 1.長度單位 px：像素(pixel)，屏幕上顯示的最小單位，用於網頁設計，直觀方便 mm：毫米 cm：釐米 in：英寸 pt：點(point)，一個標準的長度單位，1pt＝1/72in，用於印刷業，很是簡單易用； em：至關長度，一般1em=16px，應用於流式佈局 div { width: 100px; <--長--> width: 720pt; 10in width: 100mm; 10cm width: 10em; 一般160px 10rem width: 50vw; 50% view width <--view width表示頁面長度--> height: 100px; <--寬--> 2.顏色單位*/ rgb()：三個值可爲[0-255]數值或百分比，以,相隔（r:Red g:Green b:Blue） rgba()：前三個值可爲像素或是百分比，最後一個爲[0, 1]數值，以,相隔（r:Red g:Green b:Blue a:Alpha） hsl()：第一個值爲[0,360]數值，後二個值可爲百分比，以,相隔（h:Hue s:Saturation l:Lightness） hsla()：第一個值爲[0,360]數值，中間二個值可爲百分比，最後一個爲[0, 1]數值，以,相隔（h:Hue s:Saturation l:Lightness a:Alpha） #AABBCC：六個十六進制位，每兩位一總體，分別表明Red、Green、Blue，能夠簡寫#abc div { background-color: cyan; background-color: rgb(255, 0, 0); background-color: rgba(255, 0, 0, 0); background-color: #a0c <-- 知足AABBCC形式能夠簡寫爲abc --> } 四.經常使用樣式 1.字體樣式 span { 1.大小:符合長度單位 font-size: 30mm; 2.字重: bold(粗字體) normal(更粗字體) lighter(細字體 ) 100~900(100最細,900最粗) font-weight: 900; 3.行高: 行高設置大於等於字體大小,字體在行高中垂直居中顯示 line-height: 50mm; 4.樣式: 通常不關心 font-style: normal; 5.字族:能夠自定義字族, font-family: "Segoe UI Emoji", "微軟雅黑"; <--當Segoe UI Emoji不存在,或不起做用,再選取微軟雅黑 --> 6.字體樣式總體設置 css語法: 空格隔開爲多個值賦值, ,隔開爲一個值多值賦值 font: lighter 50mm/80mm "Segoe UI Emoji", "微軟雅黑"; } 2.文本樣式 span { 1.顏色:符合顏色單位 color: red; 2.水平居中方式:left(左) center(居中) right(右) text-align: center; 3.字劃線: underline line-through overline none text-decoration: overline; 4.字間距 letter-spacing: 3px; 5.詞間距 word-spacing: 10px; } a { 6.應用場景 text-decoration: none; } div { width: 300px; 7.顯示方式 display: inline-block; } div { font-size: 12px; 8.垂直排列方式: top baseline bottom vertical-align: baseline; 9.縮進 text-indent: 2em; } <--遇到連體的英文,html將其解析爲一個單詞(做爲一個總體)--> .div { 10.按標籤的設定寬度強行換行,能夠在單詞(總體)內部換行 word-break: break-all; } 3.背景樣式 div { 1.背景圖片 background-image: url("data/bg_repeat.gif"); url(背景圖片地址) 2.平鋪: no-repeat repeat-x repeat background-repeat: no-repeat; 3.定位 10px == 10px center 設置一個值,第二個值默認爲center 10px 10px 第一個值控制水平位置,第二個值控制垂直位置 background-position: right center; 4.定位相關的涉及到滾動時的效果: scroll fixed background-attachment: fixed; } div { 5.總體設置(順序不可變) background: url("data/bg_repeat.gif") 10px 10px no-repeat red; } 五.選擇器 1.基礎選擇器*/ 1.通配選擇器(*): 匹配全部(html,body,body中的全部子標籤)(具備顯示效果的全部標籤) * { border: solid; } 2.標籤選擇器(標籤名):匹配指定標籤名的對應全部標籤 div { width: 100px; height: 100px; background-color: red; } 3.類選擇器(.):匹配指定類名對應的全部標籤 .dd { font-size: 50px; } 4.id選擇器(#):匹配指定id名對應的惟一標籤* #ele { color: blue; } 5.總結: 1.通配選擇器通常用於總體reset操做(reset操做:清除系統自定義樣式) 2.標籤與id選擇器運用場景並很少,通常不提倡採用id選擇器進行佈局 html,css都是標記語言,全部對id能夠進行多匹配,但js是編程語言.只能匹配到一個 3.類選擇器爲佈局首選(建議基本全用class選擇器進行佈局) 6.基本選擇器優先級:id > class > 標籤 > 通配

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。