HTML快速恢復之 CSS基礎

weixin_33778778發表於2018-02-24

目錄
    1.基礎
        分類
        語法
        1.1 元素
        1.2 定位 大小
        1.3 佈局
        1.4 文字+字型
    2. 中級
        2.1 animation動畫
        2.2 型變
    3. CSS3
    4. 適配
        4.1 佈局適配
        4.2 字型適配rem
    5. Sass

1. 基礎

CSS(Cascading Style Sheets) 層疊樣式表 
    定義瞭如何顯示[修飾]HTML元素（使內容與表現分離）。

外部樣式表.css,可應用於多個頁面。    
最新的css標準：css3

分類

根據所在位置，分為3種（優先順序從小到大）：
    外部樣式表
    內部樣式表（位於 <head> 標籤內部）
    內聯樣式（元素內部）
發生重疊時：
    相同部分按優先順序
    不同部分相加。


外部樣式表
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>

內部樣式表
<head>
<style type="text/css">
  hr {color: Sienna;}
  p {margin-left: 20px;}
  body {background-image: url("images/back40.gif");}
</style>
</head>

內聯樣式表
<p style="color: sienna; margin-left: 20px">
This is a paragraph
</p>

語法規則

    selector {property: value,property2: value2}
    selector1,selector2 {property: value,property2: value2} 修飾多個
    selector subSelector ...{property: value,property2: value2}  修飾最後一個（影響所有後代）
    selector1>selector2 {property: value,property2: value2}    修飾最後一個（僅影響子元素）
    selector1+selector2 {property: value,property2: value2}    修飾最後一個（後邊相鄰的一個兄弟元素）
    selector1~selector2 {property: value,property2: value2}    修飾最後一個（後邊相鄰的所有兄弟元素）
    [屬性]{property: value;}
    [屬性=具體值]{property: value;}
    selector[屬性=具體值]{property: value;}
select可以是 
    元素
    #idName
    .className


    註釋：/**/
    大小寫不敏感（但是用到的html中的class和id是區分的）
    連續多個單詞要使用雙引號
    多個宣告用；隔開，最好一個宣告佔一行
    最好最後一行加；便於修改新增

例：
  通用選擇器
    *{} 
  元素選擇器（型別選擇器）
    h1 {color:red; font-size:14px;}
  選擇器分組
    h1,h2,h3,h4,h5,h6 {color: green;}
  派生選擇器（包含選擇器，任意後代為a）
    div a {    
      font-style: italic;
      font-weight: normal;
    }
  子元素選擇器（僅子代為a）
    div > a {color:red;}
  相鄰兄弟選擇器（a緊跟div）
    div + a {color:red;}
  id選擇器    <p id="idName">hello</p>
    #idName{color: green;}  
  id選擇器和派生選擇器結合  <div id="idName"><p>hello</p></div>
    #idName p{color: green;}  
  類選擇器    <p class="className">hello</p>
    .className{color: green;}
  多類選擇器    <p class="className className2">hello</p>
    .className{color: green;}    .className2{color: green;}
    .className .className2{color: green;}   
  類選擇器和派生選擇器結合  <div class="className"><p>hello</p></div>
    .className p{color: green;}  
  屬性選擇器
    包含title屬性
    [title]{
    color:red;
    }
    多屬性
    [title][href]{
    color:red;
    }
    title屬性值為hello
    [title=hello]{
    border:5px solid blue;
    }
    包含hello（hello左右不能有其他字元，空格除外）
    [title~=hello] { color:red; }
    包含hello  
    [title*=hello] { color:red; }
    以hello開頭(且不能跟隨有其他字母字元)
    [title|=hello] { color:red; }
    以hello開頭    
    [title^=hello] { color:red; }
    以hello結尾    
    [title^=hello] { color:red; }
    input元素type屬性值為text
    input[type="text"]    {  width:150px;}

1.1 元素

元素概念圖如下：
    element : 元素。
    padding : 內邊距。
    border : 邊框。
    margin : 外邊距（空白或空白邊）。

    內邊距、邊框和外邊距：可選，預設值是零。
    修改內邊距不會改變元素內容大小，但會增加元素框的總大小

元素概念圖

內邊距padding

有背景色
    p{
      padding: 10px;
      padding: 10%;    父元素寬
      padding: 10px 0.25em 2ex 20%;    上、右、下、左
      padding: 10px 20%;  上下，左右

      padding-top: 10px;
      padding-right: 0.25em;
      padding-bottom: 2ex;      寬/高*width可以自適應圖片高
      padding-left: 20%;
    }

外邊距margin

沒有背景色
    p{
      margin: 10px;
      margin: 10%;    父元素寬
      margin: 10px 0.25em 2ex 20%;    上、右、下、左
      margin: 10px 20%;  上下，左右

      margin-top: 10px;
      margin-right: 0.25em;
      margin-bottom: 2ex;
      margin-left: 20%;

      margin:auto;  縱向居中（一個宣告要放在單個宣告上面，以防覆蓋）
    }


外邊距合併
    當兩個垂直外邊距相遇時，它們將形成一個外邊距。
    合併後的外邊距的高度等於兩個發生合併的外邊距的高度中的較大者。
    行內框、浮動框或絕對定位之間的外邊距不會合並。

邊框

風格寬度顏色：邊框
    p{
      border-top:thick double #ff0000;
      border-right:thick double #ff0000;
      border-left:thick double #ff0000;
      border-bottom:thick dotted #ff0000;

風格
      border-style: solid dotted dashed double;   上右下左

      border-top-style:dotted;    none
      border-right-style:dotted;
      border-bottom-style:dotted;
      border-left-style:dotted;

寬度
      border-width: 15px 5px 15px 5px;    上右下左
      border-width: 5px;     thin 、medium 和 thick

      border-top-width: 15px;
      border-right-width: 5px;
      border-bottom-width: 15px;
      border-left-width: 5px;

顏色
      border-color: blue rgb(25%,35%,45%) #909090 red;
      border-color: blue red;

      border-top-color: red;      transparent透明
      border-right-color: red;
      border-bottom-color: red;
      border-left-color: red;

圓角
      border-bottom-left-radius:2em;
      border-bottom-right-radius:2em;
      border-top-left-radius:2em;
      border-top-right-radius:2em;
      border-radius:2em;      
      border-radius:50%;  切圓

邊框圖片
      相容各瀏覽器
      -moz-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* 老版本的 Firefox */
      -webkit-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Safari */
      -o-border-image: url(/i/border_image_button.png) 0 14 0 14 stretch; /* Opera */
      border-image: url(/i/border_image_button.png) 0 14 0 14 stretch;

      重複
      border-image-repeat: repeat;
      邊框圖片向內偏移
      border-image-slice: 50% 50%;
      邊框圖片向外偏移      
      border-image-outset: 30 30;
      邊框圖片
      border-image-source: url(border.png);
      邊框圖片寬
      border-image-width: 30 30;
      

邊框陰影(配合hover可以做出立體效果)
    box-shadow: 10px 10px 5px #888888;

      一個宣告
      border: medium double rgb(250,0,255)
    }

輪廓

外邊距邊框（最外層）
    p{
      outline-color:#00ff00;     顏色
      outline-style:dotted;    風格 dotted，dashed，solid，double，groove，ridge，inset，outset，
      outline-width:thin;    寬度
          thin medium thick 1px inherit
      outline-offset:15px;  向外偏移

      一個宣告
      outline:#00ff00 dotted thick;   
    }

背景

    顏色：red #ff0000 #f00 rgb(255,0,0) rgb(100%,0%,0%) transparent透明預設 rgba(255,0,0,0.5) hsl(120,65%,75%) hsla(120,65%,75%,0.3)

    p {
背景色（可以為所有元素設定背景色，不能繼承，預設控制元件背景透明）
      background-color: gray; padding: 20px;

背景圖片
    預設背景圖片為none無
    background-image: url(/i/eg_bg_03.gif);
    背景圖片y / x方向重複
    background-repeat: repeat-y;    
    background-repeat: repeat-x;
    背景圖片不重複，居中顯示
    background-repeat:no-repeat;
    背景圖片位置
    background-position:50% 50%; 或下方同等
    background-position:center;  top、bottom、left、right 和 center
    (左 上)
    background-position:50px 100px;

    背景固定，不隨網頁內容滾動
    background-attachment:fixed
    背景剪裁
    background-clip:content-box;  內容，padding-box內邊距+內容，border-box
    背景影像的位置
    background-origin:content-box;
    背景圖片的大小
    background-size:63px 100px;  contain(全) cover（比例裁剪）


    一個宣告
    background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center; 
    }

1.2. 定位大小

定位

position屬性：
      1. static
        在不指定定位方式時預設（文件流）。
        塊級元素生成一個塊框，內聯元素生成一個行內框。
            left right top bototm無效。
      2.relative
        相對原來位置定位。
        原位置所在框所佔空間依舊存在（在文件流）。
            距是距自己（原來位置）
            top距上，left距左。
            bottom距下（會向上移），right距右。
      3.absolute
          放置在指定位置（相對最近的已定位（static不算）祖先元素，若無則相對於最初的包含塊body）。
          為塊級框，原位置所在框所佔空間（不在文件流）不存在。
              距是距（最近的已定位的）父元素定位
               top距上，left距左。
               bottom距下，right距右。
      4.fixed
         同 absolute，當永遠相對body。(不在文件流)
              距是距body
               top距上，left距左。
               bottom距下，right距右。
      5.inherit
          繼承父元素的屬性

float屬性（浮動）：
    浮動框 向左/向右 移動，直到外邊緣碰到包含框或另一個浮動框為止。
    浮動框會從文件的普通流中刪除（不在文件流中）,會造成覆蓋。
    浮動框使塊元素變成內聯元素。

    在float元素們後加一個div clear可以防止位置錯亂（使其在文件流中，佔空間）
    clear:both;    左右兩側不允許出現浮框。  left、right、both 或 none

display屬性：
    block：將內聯元素轉為塊級元素
    inline：將塊級元素轉為內聯元素
    none：不再顯示（不再佔空間）
    inline-block：？

元素分為：
    1.塊級元素（塊框），前後都會換行
        如：address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li，
    2.內聯元素（行內元素，行內框），前後無換行
        如：a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var

z-index屬性    (元素的疊加順序,從父元素算):
        大在小上。
        auto不參與層級。
        負值：在普通文件流（預設：0）下

正常文件流，後寫的元素在前面的元素上面。
display:none; float 均會使脫離文件流
clear:both; 不會

overflow屬性：
    scroll溢位部分滾動，hidden隱藏，auto自動滾動,visible,inherit
overflow-y屬性(或 overflow-x)：
    scroll溢位部分滾動，hidden隱藏，auto自動滾動,visible,no-display,no-content

left right top bottom 屬性:
     px inherit % auto
clip屬性（剪裁）:
    rect(0px 50px 200px 0px);  

vertical-align:text-top;    text-bottom


visibility( 是否可見):
    visible    
    hidden    仍然佔空間

對齊

縱向對齊（垂直對齊）
    margin: auto;

橫向居中（水平居中）
    padding: 10px 0;

文字對齊（left，right，center）
    text-align: center;

line-height
transform: translate(-50%, -50%);

大小

width/height/max-height/min-height/max-width/min-width：
    auto % px

1.3 佈局

div

<div>
</div>

表格

<table>
    <tr>  行
      <th>Firstname</th>      表頭
      <th>Lastname</th>
    </tr>
    <tr>
      <td>Peter</td>    列
      <td>Griffin</td>
    </tr>
    <tr>
      <td>Lois</td>
      <td>Griffin</td>
    </tr>
</table>

  table, th, td{
邊框
    border: 1px solid blue;
邊框邊距
    border-spacing:10px 50px;
摺疊邊框
    border-collapse:collapse;
隱藏空單元格
    empty-cells: hide;

寬高
    width:100%;
    height:50px;

文字對齊
    text-align:right;
    vertical-align:bottom;

內邊距
    padding:15px;

背景色
    background-color:green;

文字色
    color:white;

表格標題位置
    caption-side:bottom;
  }

列表

常用於導航欄
    預設：縱向，float：橫向
    可配合@media屬性改變水平或垂直方式
    display或visibility可以實現下拉選單

    ol{
      左邊點風格
      list-style-type :decimal;  數字，lower-roman小寫羅馬數字，upper-roman大寫羅馬數字，lower-alpha小寫英文字母，upper-alpha大寫英文字母，decimal-leading-zero 01始
    }

    ul {
      左邊點風格
      list-style-type : square;    square方塊，circle空心圓，disc實心圓，none無，
      左邊點圖片
      list-style-image : url(xxx.gif);    
      左邊點位置
      list-style-position: inside;  

      一個宣告
      list-style : url(example.gif) square inside;    
    }

導航欄

<!DOCTYPE HTML>
<html>
<body>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {
    background-color: #f1f1f1
}

.dropdown:hover .dropdown-content{
display:block;
}
</style>
<ul>
  <li><a class="active" href="#home">主頁</a></li>
  <li><a href="#news">新聞</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">下拉選單</a>
    <div class="dropdown-content">
      <a href="#">連結 1</a>
      <a href="#">連結 2</a>
      <a href="#">連結 3</a>
    </div>
  </li>
</ul>

</body>
</html>

1.4 文字+字型

文字

文字色
    p{color:#00ff00} 

縮排（可被繼承）
    p {text-indent: -5em;padding-left: 5em;}
    p {text-indent: 20%;}

水平對齊
    p {text-align:center}   預設left、right 和 center justify

字間隔（預設0）
    p {
      word-spacing: 30px;
      word-spacing: -0.5em;
    }  

字元間隔
    p {
      letter-spacing: 20px;
      letter-spacing: -0.5em;
    } 

行間距
    p {
      line-height: 90%;
      line-height: 10px;
      line-height: 0.5;
    } 

字母大小寫轉換
    p {
        text-transform: uppercase;    none，uppercase全大寫，lowercase全小寫，capitalize首字母大寫
    } 
    
文字劃線
    p {
      text-decoration: none;   none,underline下劃線,overline上劃線,line-through刪除線,blink閃爍
      text-decoration: underline overline;  
    }

空格
    p {white-space: normal;} normal忽略,pre保留,nowrap不換行直到br,pre-wrap保留且支援換行,pre-line忽略空格保留換行(通常不使用pre無法適配，使用pre-line)

方向
    p {direction: rtl}     ltr左向右預設，rtl右向左，inherit繼承 
    
陰影（立體文字）
    text-shadow:2px 2px #FF0000; 橫向 縱向 模糊距離 顏色


    vertical-align:text-top;
    unicode-bidi: normal|embed|bidi-override|initial|inherit;
文字背景色（見上）

字型

    p{font-family: sans-serif;}    該字型系列中選擇一個使用
    p{font-family: Georgia;}       指定具體的字型
    p{font-family: Georgia,sans-serif;}    從左往右尋找字型

字型大小（預設16 畫素 (16px=1em)）
    p {font-size:14px;} smaller，larger，50%，inherit，3.75em，14px

字型風格
    p{font-style:normal;}   normal正常顯示，italic斜體顯示，oblique傾斜顯示

字型變形
    p {font-variant:small-caps;}

字型加粗
    p{font-weight:normal;}    normal標準,bold粗體,bolder更粗,lighter更細，100 200...700，



  一個宣告
    p {font:italic bold 12px/30px arial,sans-serif;} 

    字型中有空格則用引號

/*-------匯入字型-------*/  
@font-face {  
    font-family: BebasNeue-webfont;  
    src: url('../fonts/BebasNeue-webfont.ttf');  
}

適配字型
@media screen and (min-width: 1024px) and (max-width: 1920px){
    .htmlCSS{
        font-family: "微軟雅黑";
            font-size:10px;
    }
}
@media screen and (min-width: 0px) and (max-width: 1024px) {
    .htmlCSS{
            font-family: "微軟雅黑";
            font-size:8px;
    }
}

em 相對父元素的大小
設定html字型為10px,則他的子元素1em為10px;

rem 永遠相對根元素（html）

1.5 其他

開關

<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}
</style>
<label class="switch">
  <input type="checkbox" checked>
  <div class="slider"></div>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

載入框

<style>
.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid blue;
  border-right: 16px solid green;
  border-bottom: 16px solid red;
  border-left: 16px solid pink;
  width: 120px;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
}

@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
</style>
<div class="loader"></div>

<style>
a {
    text-decoration: none;
    display: inline-block;
    padding: 8px 16px;
}

a:hover {
    background-color: #ddd;
    color: black;
}

.previous {
    background-color: #f1f1f1;
    color: black;
}

.next {
    background-color: #4CAF50;
    color: white;
}

.round {
    border-radius: 50%;
}
</style>


<a href="#" class="previous">&laquo; 上一頁</a>
<a href="#" class="next">下一頁 &raquo;</a>

<a href="#" class="previous round">&#8249;</a>
<a href="#" class="next round">&#8250;</a>

連結

a:link {color:#FF0000;text-decoration:none;}        /* 未被訪問的連結 */
a:visited {color:#00FF00;text-decoration:none;} /* 已被訪問的連結 */
a:hover {color:#FF00FF;text-decoration:underline;}  /* 滑鼠指標移動到連結上 */
a:active {color:#0000FF;text-decoration:underline;} /* 正在被點選的連結 */

可配合選擇器使用
    a.className{}

注意：
    a:hover 必須位於 a:link 和 a:visited 之後
    a:active 必須位於 a:hover 之後

除a外其他偽類（可配合選擇器使用）：

滑鼠在元素上
    :hover 
元素的最後一個子物件
    元素:last-child {font-weight: bold;}    
元素的首個子物件
    元素:first-child {font-weight: bold;}    
元素的首個子元素型別物件
    元素>子元素:first-child {font-weight: bold;}    
獲取焦點時
    input:focus{
      background-color:yellow;
    }
為屬性值為 no 的q元素定義引號的型別
    q:lang(no){
      quotes: "~" "~"
    }

所有禁用的元素
    :disabled
所有沒有子元素的元素
    :empty
所有可用的元素
    :enabled
第一行
    :first-line
第一個字元
    :first-letter
元素前面
    :before
元素後面
    :after
所有僅有一個子元素為該元素的元素
    :only-of-type
所有僅有一個子元素的該元素
    :only-child
"required"屬性的input元素
    input:required
沒有"required"屬性的input元素
    input:optional
只讀屬性的input元素
    input:read-only
可讀寫屬性的input元素
    input:read-write
所有選中的input元素
    input:checked



偽元素 （只能用於塊級元素）
    selector:pseudo-element {property:value;}
    selector.class:pseudo-element {property:value;}
    適用以下屬性：font，color，background，word-spacing，letter-spacing，text-decoration，vertical-align，text-transform，line-height，clear
首行
    p:first-line{
      color:#ff0000;
      font-variant:small-caps;
    }
首字母    
    p:first-letter{
      color:#ff0000;
      font-size:xx-large;
    }

使用者可調整大小

div{
  resize:both;
  overflow:auto;
}

none
vertical
horizontal

透明

    img{
      opacity:0.4;
      filter:alpha(opacity=40); /* 針對 IE8 以及更早的版本*/
    }

修改外觀

    div{
      appearance:button;
      -moz-appearance:button; /* Firefox */
      -webkit-appearance:button; /* Safari 和 Chrome */
    }

有的無效
    normal  預設
    icon    圖示
    window  視窗
    button  按鈕
    menu    一套選項
    field   輸入框

2. 中級

2.1 animation動畫

<style> 
定義動畫
/*目前瀏覽器都不支援 @keyframes 規則*/
@keyframes mymove{
from {top:0px;left:0px; background:red; width:100px;}
to {top:200px;left:100px; background:yellow; width:300px;}
}

/* 支援瀏覽器Firefox */
@-moz-keyframes mymove {
0%   {top:0px;}
25%  {top:200px;}
50%  {top:100px;}
75%  {top:200px;}
100% {top:0px;}
}

 /* 支援瀏覽器Safari and Chrome */
@-webkit-keyframes mymove{
from {top:0px;}
to {top:200px;}
}

 /* 支援瀏覽器Opera */
@-o-keyframes mymove{
from {top:0px;}
to {top:200px;}
}


使用動畫
div{
width:100px;
height:100px;
background:red;
position:relative;


繫結動畫
相容各瀏覽器
animation:mymove 5s infinite;   一個宣告
-moz-animation:mymove 5s infinite; /* Firefox */
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
-o-animation:mymove 5s infinite; /* Opera */


    動畫名
    animation-name: mymove;   none
    。。。 適配其他瀏覽器
    時長
    animation-duration:2s;
    。。。
    速度曲線
    animation-timing-function: linear;  勻速，ease快慢快，ease-in慢快，ease-out快慢，ease-in-out慢快慢，cubic-bezier(0,0,1,1);
    。。。
    延遲
    animation-delay:2s;
    。。。
    動畫播放次數
    animation-iteration-count:3; infinite無限
    。。。
    下一週期播放方式
    animation-direction:alternate; 反向，normal正向。
    。。。
    動畫結束時方式
    animation-fill-mode: forwards;  保持最後一幀
}
</style>

2.2 型變

    transition: .5s ease; 時間 方式

  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);

互動

cursor滑鼠型別

    auto,crosshair, default, pointer手, move,e-resize,ne-resize,nw-resize,n-resize,se-resize,sw-resize,s-resize,w-resize,text,wait,help

尺寸

%   百分比
in  英寸
cm  釐米
mm  毫米
em  1em 等於當前的字型尺寸。
ex  一個 ex 是一個字型的 x-height。 (x-height 通常是字型尺寸的一半。)
pt  磅 (1 pt 等於 1/72 英寸)
pc  12 點活字 (1 pc 等於 12 點)
px  畫素 (計算機螢幕上的一個點)

3. CSS3

4. 適配

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"/>

4.1 佈局適配

@media

針對解析度範圍---設定不同佈局
@media screen and (min-width: 800px) and (max-width: 1920px){
/*css樣式*/
}
@media screen and (min-width: 0px) and (max-width: 800px){
/*css樣式*/
}

1.css 僅在最大解析度為320時生效
<link type="text/css" rel="stylesheet" href="public/styles/1.css" media="screen and (max-width:320px)"/>


針對不同媒介---設定不同佈局
@media screen{    電腦顯示
    p.test {font-family:verdana,sans-serif; font-size:14px}
}
@media print{      列印
    p.test {font-family:times,serif; font-size:10px}
}
@media tv{      電視機
}
@media tty{     使用固定密度字母柵格的媒介
}
@media projection{      幻燈片
}
@media handheld{      小的手持裝置
}
@media braille{      用於盲人用點字法觸覺回饋裝置
}
@media embossed{      用於分頁的盲人用點字法印表機
}
@media aural{      用於語音和音訊合成器
}
@media all{      所有
}
@media screen,print{    
    p.test {font-weight:bold}
}

% 做簡單適配


width:64%;
height:100px;

4.2 字型適配rem

rem（font size of the root element）
      也可以作為寬度、高度單位

        根據media，設定不同根字型
    html{
        position:relative;
    font-size:10px;     /*預設：16px*/
    font-family: "微軟雅黑";
    }

        .otherEle{
            font-size:1.5em;    /*15px,預設：16px*/
        }

5. Sass

擴充套件了CSS, 增加了：
    變數 (variables)、巢狀 (nested rules)、混合 (mixins)、匯入 (inline imports) 等高階功能

相容 CSS3


兩種語法格式：
    1.以 .scss 作為擴充名
    2.以 .sass 作為擴充名
        使用 “縮排” 代替 “花括號” 表示屬性屬於某個選擇器，
        用 “換行” 代替 “分號” 分隔屬性
轉換：
    1.@import
    2.sass-convert命令列工具
        sass-convert style.sass style.scss
        sass-convert style.scss style.sass

使用

安裝
    sudo gem install sass

手冊:

CSS參考手冊
 顏色16進位制參考手冊
 顏色名參考手冊

html css 基礎 js
2018-04-23
HTMLCSSJS
【WEB基礎】HTML & CSS 基礎入門（9）CSS盒子
2019-05-30
WebHTMLCSS
前端基礎知識之html和css全解
2020-05-31
前端HTMLCSS
Oracle恢復基礎概述
2013-12-04
Oracle
PHP快速上手（11）：HTML基礎
2020-12-27
PHPHTML
Html5、css、JavaScript基礎
2020-04-06
HTMLCSSJavaScript
【WEB基礎】HTML & CSS 基礎入門（7）表格
2019-05-26
WebHTMLCSS
【管理篇備份恢復】備份恢復基礎
2010-05-22
【WEB基礎】HTML & CSS 基礎入門（8）表單
2019-05-28
WebHTMLCSS
【WEB基礎】HTML & CSS 基礎入門（1）初識
2019-05-20
WebHTMLCSS
HTML基礎快速入門筆記
2021-01-02
HTML筆記
HTML與CSS基礎day1
2020-04-01
HTMLCSS
前端-html和css基礎知識
2021-10-19
前端HTMLCSS
01---HTML+CSS---基礎標籤
2018-01-17
HTMLCSS
HTML基礎8–CSS、滑動門
2015-05-05
HTMLCSS
Java每日基礎恢復訓練
2020-10-11
Java
【WEB基礎】HTML & CSS 基礎入門（3）段落及文字
2019-05-22
WebHTMLCSS
【WEB基礎】HTML & CSS 基礎入門（6）超連結
2019-05-25
WebHTMLCSS
python之前端HTML/CSS基礎知識學習筆記
2017-06-06
Python前端HTMLCSS筆記
面試之道之 CSS 基礎
2019-07-04
面試CSS
前端基礎學習1 | Web、Html、CSS
2024-03-05
前端WebHTMLCSS
HTML/CSS基礎課程筆記————CSS結束篇
2021-09-09
HTMLCSS筆記
【WEB基礎】HTML & CSS 基礎入門（4）列表及其樣式
2019-05-23
WebHTMLCSS
【WEB基礎】HTML & CSS 基礎入門（10）佈局與定位
2019-05-31
WebHTMLCSS
【WEB基礎】HTML & CSS 基礎入門（5）邊框與背景
2019-05-24
WebHTMLCSS
前端面試基礎手冊（HTML+CSS）
2018-07-29
前端面試HTMLCSS
oracle快速恢復區
2017-05-09
Oracle
HTML——① HTML 基礎
2019-04-09
HTML
深入CSS基礎之box model
2019-02-19
CSS
rman 搭建，備份，恢復基礎練習
2014-08-29
前端之路---入坑篇之基礎中的基礎html
2020-03-30
前端HTML
Html與css基礎知識介紹(必看篇)
2019-01-14
HTMLCSS
HTMl————2、HTML基礎
2018-07-22
HTML
html+css快速入門-css簡介
2022-08-09
HTMLCSS
Redis當機快速恢復
2021-08-02
Redis
HTML基礎
2024-03-10
HTML
資料恢復基礎和進階教程(二)
2020-12-27
資料恢復
MS SQL基礎教程：備份和恢復概述
2010-03-19
SQL

HTML快速恢復 之 CSS基礎

1. 基礎

2. 中級

3. CSS3

4. 適配

5. Sass

相關文章

HTML快速恢復之 CSS基礎