Day03 CSS樣式

1. CSS文本

p{
        /*
      顏色是通過CSS最經(jīng)常的指定：
      十六進制值 - 如: ＃FF0000
      一個RGB值 - 如: RGB(255,0,0)
      顏色的名稱 - 如: red
      */
      color: #ff6699;
      /*文本對齊 默認值為left
    可以取left | center | right*/
      text-align: center;
      /*文本修飾
      text-decoration
      underline 下劃線
      line-through 刪除線
      overline 上劃線
      none 什么都沒有*/
      text-decoration: overline;
      /*文本縮進*/
      text-indent: 2em;
      /*文本轉換
      uppercase 全部大寫
      lowercase 全部小寫
      capitalize 首字母大寫*/
      text-transform: capitalize;
    }

2.CSS字體

p{
      /*字體格式
      font-family 屬性應該設置幾個字體名稱作為一種"后備"機制窗怒，如果瀏覽器不支持
      第一種字體吼蚁，他將嘗試下一種字體
      */
      font-family: -apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;
      /*字體大小*/
      font-size: 14px;
      /*字體樣式 normal | italic*/
      font-style: italic;
      /*設置字體權重  bold lighter
      若數(shù)值：100-900*/
      font-weight: 900;
      /*行高*/
      line-height：40px;
    }

3. CSS鏈接

/*若要同時設置這些樣式必須保證按照如下順序*/
    /* 跳轉之前的鏈接樣式 */
    a:link{
      color: #333;
    }
    /* 跳轉之后的鏈接樣式 */
    a:visited{
      color: yellow;
    }
    /* 鼠標覆蓋的鏈接樣式 */
    a:hover{
      color: blue;
    }
    /* 鼠標點擊時的鏈接樣式 */
    a:active{
      color: red;
    }

4. CSS列表

 <style>
    /*list-style:none 去掉列表樣式
    square 方塊
    circle空心圓
    disc 實心圓*/
    /*list-style-image:url(xxx)
    列表樣式圖片*/
    ul{
      /*list-style:disc;*/
      list-style-image: url("../images/icon1.png");
    }

  </style>

5. CSS邊框

<style>
    div{
      width: 100px;
      height: 100px;
      /*邊框
      參數(shù)1 寬度
      參數(shù)2 樣式
      參數(shù)3 顏色*/
      /*border: 1px solid #333;*/
    /*不同方向的邊框*/
      border-top: 1px solid #333;
    }
  </style>

6. CSS表格

CSS如下：

<style>
    table{
      width: 500px;
      /*邊框折疊
      border-collapse:collapse
      讓邊框都重疊*/
      border-collapse: collapse;
      text-align: center;
      line-height: 50px;
    }
    th,td{
      border: 1px solid #333;
    }
  </style>

HTML如下：

<!--表格table-->
  <table>
    <!--表頭thead-->
    <thead>
    <!--行tr table row-->
    <tr>
      <!--具體的表頭字段th-->
    <th>手機</th>
      <th>商城</th>
    </tr>
    </thead>
    <!--表體-->
    <tbody>
    <tr>
      <!--每一行具體的內容-->
      <td>蘋果</td>
      <td>京東</td>
    </tr>
    <tr>
      <td>小米</td>
      <td>天貓</td>
    </tr>
    <tr>
      <td>華為</td>
      <td>蘇寧</td>
    </tr>
    </tbody>
  </table>

跨行和列的表格
HTML如下：

<table>
  <thead>
  <tr>
    <!--跨列-->
    <th colspan="3">商城</th></tr>
  </thead>
  <tbody>
  <tr class="gap"></tr>
  <tr>
    <!--跨行-->
    <th rowspan="5">商城</th>
    <td>手機</td>
    <td>電池</td>
  </tr>
  <tr class="gap"></tr>
  <tr>
    <td>衣服</td>
    <td>鞋子</td>
  </tr>
  <tr class="gap"></tr>
  <tr>
    <td>電風扇</td>
    <td>話筒</td>
  </tr>
  </tbody>
</table>

CSS如下：

<style>
    table{
      width: 500px;
      border-collapse: collapse;
      text-align: center;
    }
    tr,td{
      border: 1px solid #333;
    }
    .gap{
      height: 20px;
    }
  </style>

7. CSS輪廓

 div{
      width: 100px;
      height: 100px;
      background: red;
    /*輪廓和邊框設置方式類似*/
      outline: 10px solid #333;
    }
    input{
      margin-top: 50px;
    /* 輸入框選中高亮就是用的outline，若設置為none就沒有這個樣式了*/
      outline: none;
    }

8. CSS透明度

.child{
      width: 100px;
      height: 100px;
      background-color: red;
      /*透明度opacity 取值范圍0-1*/
      opacity: 0.4;
    }

9. CSS樣式繼承

CSS如下：

<style>
    /*在塊元素之間
    width子元素不設置width，他會繼承父元素的width*/
    /*height: 如果父元素沒有設置height躬存，它會得到子元素的高度*/
    .child{
      height: 50px;
      width: 50px;
      background: yellow;
    }
    .parent{
      background: red;
    }
    .grandfather{
      width: 100px;
    }
  </style>

HTML如下：

<div class="grandfather">
<div class="parent">
  <div class="child"></div>
</div>
</div>

效果：

繼承效果

CSS如下：

 <style>
    /*css可以繼承的屬性*/
    /*文本相關屬性:color,text-align,text-decoration,text-transform,text-indent(內聯(lián)標簽不能設置此屬性)*/
    /*字體相關屬性:font-family,font-style,font-size,font-weight,line-height*/
    /*列表相關屬性:list-style*/
    /*表格相關屬性:border-collapse*/
    /*其他屬性:cursor,visibility*/

    body{
      color: red;
      font-size: 14px;
      cursor: pointer;
    }
    ul{
      list-style: none;
    }
  </style>

HTML如下：

<p>你好,世界</p>
<div>
  <h1>h1</h1>
</div>
<ul>
  <li>列表</li>
</ul>

10. 盒子模型的box-sizing

 <style>
    /*當盒子模型的*/
    /*box-sizing:border-box*/
    /*設置border，padding它的width困介，height不會發(fā)生改變 會往里擠
    默認是content-box
    */
    div{
      width: 100px;
      height: 100px;
      background: red;
      box-sizing: border-box;
      margin-left: 100px;
      border: 10px solid #333;
      padding: 5px;
    }
  </style>

效果如下：
盒子總的大小為設置的100X100 不會因為border和padding而改變

box-sizing

11. 浮動

11.1 什么是浮動

浮動的目的：為了讓元素并排顯示
浮動的原理：子元素浮動姐刁，父元素沒有了高度
HTML如下：

<div class="parent">
  <div class="child"></div>
</div>

CSS如下：

<style>
    .parent{
      width: 1200px;
      background: red;
    }
    .child{
      width: 100px;
      height: 50px;
      background: yellow;
      float: left;
    }
  </style>

效果如下：
父元素坍塌，沒有高度贿肩。

浮動

11.2 清除浮動方式1

HTML

<div class="parent">
  <div class="child"></div>
  <div class="two"></div>
</div>

CSS如下：

<style>
    .parent{
      width: 1200px;
      background: red;
      height: 200px;
    }
    .child{
      width: 100px;
      height: 50px;
      background: yellow;
      float: left;
    }
    .two{
      /*clear: both 讓該元素不受其他元素浮動的影響/清除浮動的樣式
      只用對緊靠著的元素使用 注意two所在的位置*/
      clear: both;
      width: 150px;
      height: 150px;
      background: green;
    }
  </style>

11.3清除浮動方式2

HTML如下:

<div class="parent" >
  <div class="child"></div>
</div>
<div class="one"></div>

CSS如下：

<style>
    /*子元素浮動峦椰，讓父元素有高度
    給父元素添加overflow:hidden;
    */
    .parent{
      overflow: hidden;
      width: 300px;
      background: red;
    }
    .child{
      width: 100px;
      height: 50px;
      background: yellow;
      float: left;
    }
    .one{
      width: 60px;
      height: 60px;
      background: green;
    }
  </style>

效果：
浮動被清除

清除浮動

11.4 清除浮動方式3

HTML如下：

<div class="parent row" >
  <div class="child"></div>
</div>
<div class="one"></div>

CSS 如下：
注意：是給父元素添加after偽元素，因為生成的偽元素會成為使用樣式的元素的子元素

<style>
    /*子元素浮動尸曼，讓父元素有高度
    給父元素添加after偽元素并設置偽元素clear:both display:table
    */
    .parent{
      width: 300px;
      background: red;
    }
    .child{
      width: 100px;
      height: 50px;
      background: yellow;
      float: left;
    }
    .row:after{
      content: '';
      display: table;
      clear: both;
    }
    .one{
      width: 60px;
      height: 60px;
      background: green;
    }
  </style>

效果如11.3的圖们何。

12. CSS定位

CSS如下：

<style>
    .parent{
      width: 200px;
      height: 200px;
      background: red;
      /*相對定位就是元素在頁面上正常的位置
      position:relative*/
      position: relative;
      left: 100px;
      top: 100px;
    }
    .child{
      right: 0px;
      /*top: 50px;*/
      bottom: 0px;
      width: 100px;
      height: 100px;
      background: yellow;
      /*絕對定位：絕對定位的元素的位置相對于最近的相對定位的父元素
      相對定位和絕對定位一般是成對出現(xiàn)，父元素相對定位控轿，子元素絕對定位
      */
      position: absolute;
    }
  </style>

HTML如下：

<div class="parent">
  <div class="child">
  </div>
</div>

效果如下：

定位

13. CSS垂直水平居中

13.1 方式1

<style>
    *{
      margin: 0;
      padding: 0;}
      /*父元素相對定位冤竹，子元素絕對定位，子元素定位于高寬50%處
      再用margin-top| margin-left為子元素高寬值得一半來擠到中心*/
    .parent{
      width: 200px;
      height: 200px;
      background: red;
      position: relative;
    }
    .child{
      width: 80px;
      height: 80px;
      left: 50%;
      top: 50%;
      margin-top: -40px;
      margin-left:-40px;
      background: yellow;
      position: absolute;
    }
  </style>

13.2 方式2

<style>
    *{
      margin: 0;
      padding: 0;}
    .parent{
      width: 200px;
      height: 200px;
      background: red;
      position: relative;
    }
    .child{
      width: 80px;
      height: 80px;
      /*父元素相對定位茬射，子元素絕對定位鹦蠕，子元素上下左右定位0，再用margin：auto去拉*/
       left:0;
      right:0;
      top:0;
      bottom:0;
      margin:auto
      background: yellow;
      position: absolute;
    }
  </style>

14. CSS固定定位

 <style>
    .one{
      /*position:fixed 定于屏幕上得一個位置在抛，不隨頁面滾動而滾動*/
      position: fixed;
      width: 100px;
      height: 100px;
      right: 0;
      bottom: 50%;
      background: red;
    }
  </style>

15. CSS Z-index

CSS如下：

 <style>
    .parent{
      width: 300px;
      height: 300px;
      background: red;
      position: relative;
    }
    .one{
      width: 100px;
      height: 100px;
      background: yellow;
      position: absolute;
      z-index: 100;
    }
    .two{
      width: 50px;
      height: 50px;
      background: green;
      position: absolute;
      z-index: 199;
    }
    .parent:hover .two{
      z-index: 99;
    }

  </style>

HTML如下：

<!--Z-index -->
<!--功能：給那些設置了絕對定位的元素設置元素的堆疊順序  -->
<div class="parent">
  <div class="one"></div>
  <div class="two"></div>
</div>

16. 浮動導航案例

CSS如下：

<style>
    *{
      margin: 0;
      padding: 0;
    }
    ul{
      list-style: none;
    }
    .nav{
      line-height: 50px;
      overflow: hidden;
      background: pink;}
    li{
      width: 100px;
      text-align: center;
      float: left;
    }
    li>a{
      text-decoration: none;
      color: white;
      font-weight: bold;
      display: block;
    }
    a:hover{
      background: deeppink;
      color: #eee;
    }
  </style>

HTML 如下：

<div class="nav">
  <ul>
    <li><a href="">手機</a></li>
    <li><a href="">平板</a></li>
    <li><a href="">電腦</a></li>
  </ul>
</div>

效果如下：

浮動導航

17. 搜索框案例

CSS如下：

<style>
    *{
      margin: 0;
      padding: 0;}
    .search{
      position: relative;
      width: 250px;
      height: 40px;

    }
    .btn{
      position: absolute;
      width: 23px;
      height: 22px;
      background-image: url("../images/icon4.png");
      border: none;
      top: 0;
      bottom: 0;
      margin: auto;
      right: 10px;
    }
    .search>input{
      box-sizing: border-box;
      width: 250px;
      height: 40px;
      padding-left: 30px;
      background: #eee;
      border: none;
      outline: none;
      border-radius: 30px;
    }
  </style>

HTML如下:

<div class="search">
  <input type="text" placeholder="搜索">
  <button class="btn"></button>
</div>
</body>

效果如下：

搜索框

?著作權歸作者所有,轉載或內容合作請聯(lián)系作者

人面猴
序言：七十年代末钟病，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子刚梭，更是在濱河造成了極大的恐慌肠阱，老刑警劉巖，帶你破解...
沈念sama閱讀 206,723評論 6贊 481
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件朴读，死亡現(xiàn)場離奇詭異屹徘，居然都是意外死亡，警方通過查閱死者的電腦和手機衅金，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 88,485評論 2贊 382
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門噪伊，熙熙樓的掌柜王于貴愁眉苦臉地迎上來簿煌，“玉大人，你說我怎么就攤上這事鉴吹∫涛埃” “怎么了？”我有些...
開封第一講書人閱讀 152,998評論 0贊 344
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵豆励，是天一觀的道長夺荒。經(jīng)常有香客問我，道長良蒸，這世上最難降的妖魔是什么般堆？我笑而不...
開封第一講書人閱讀 55,323評論 1贊 279
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮诚啃，結果婚禮上淮摔，老公的妹妹穿的比我還像新娘。我一直安慰自己始赎，他們只是感情好和橙，可當我...
茶點故事閱讀 64,355評論 5贊 374
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著造垛，像睡著了一般魔招。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上五辽，一...
開封第一講書人閱讀 49,079評論 1贊 285
城市分裂傳說
那天办斑，我揣著相機與錄音，去河邊找鬼杆逗。笑死乡翅，一個胖子當著我的面吹牛，可吹牛的內容都是我干的罪郊。我是一名探鬼主播蠕蚜，決...
沈念sama閱讀 38,389評論 3贊 400
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼悔橄！你這毒婦竟也來了靶累？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 37,019評論 0贊 259
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤癣疟，失蹤者是張志新（化名）和其女友劉穎挣柬，沒想到半個月后，有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體睛挚，經(jīng)...
沈念sama閱讀 43,519評論 1贊 300
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡邪蛔，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 35,971評論 2贊 325
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了竞川。大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片店溢。...
茶點故事閱讀 38,100評論 1贊 333
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖委乌，靈堂內的尸體忽然破棺而出床牧，到底是詐尸還是另有隱情，我是刑警寧澤遭贸，帶...
沈念sama閱讀 33,738評論 4贊 324
?日本核電站爆炸內幕
正文年R本政府宣布戈咳，位于F島的核電站，受9級特大地震影響壕吹，放射性物質發(fā)生泄漏著蛙。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點故事閱讀 39,293評論 3贊 307
男人毒藥：我在死后第九天來索命
文/蒙蒙一耳贬、第九天我趴在偏房一處隱蔽的房頂上張望踏堡。院中可真熱鬧，春花似錦咒劲、人聲如沸顷蟆。這莊子的主人今日做“春日...
開封第一講書人閱讀 30,289評論 0贊 19
一樁弒父案腐魂，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽帐偎。三九已至，卻和暖如春蛔屹，著一層夾襖步出監(jiān)牢的瞬間削樊，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 31,517評論 1贊 262
情欲美人皮
我被黑心中介騙來泰國打工兔毒，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留漫贞，地道東北人。一個月前我還...
沈念sama閱讀 45,547評論 2贊 354
代替公主和親
正文我出身青樓育叁，卻偏偏與公主長得像绕辖，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子擂红，可洞房花燭夜當晚...
茶點故事閱讀 42,834評論 2贊 345

Day03 CSS樣式

1. CSS文本

2.CSS字體

3. CSS鏈接

4. CSS列表

5. CSS邊框

6. CSS表格

7. CSS輪廓

8. CSS透明度

9. CSS樣式繼承

10. 盒子模型的box-sizing

11. 浮動

11.1 什么是浮動

11.2 清除浮動方式1

11.3清除浮動方式2

11.4 清除浮動方式3

12. CSS定位

13. CSS垂直水平居中

13.1 方式1

13.2 方式2

14. CSS固定定位

15. CSS Z-index

16. 浮動導航案例

17. 搜索框案例

推薦閱讀更多精彩內容