關于CSS - 簡書

一、CSS

Cascading Style Sheets：層疊樣式表
用來控制標簽樣式

二赫段、CSS語法: 鍵值對

color: red;

三魂拦、CSS位置

3.1.行內(nèi)

<div style="color: blue; font-size: 28px; background-color: aqua;">容器標簽</div>

3.2.頁內(nèi)

<style>
    body{
        color: red;
    }
</style>

3.3.外部：單獨CSS文件中贝室，用link標簽引用

<link href="css/index.css" rel="stylesheet">

// CSS文件中代碼
div{
   color: olivedrab;
   font-size: 66px;
   background-color: greenyellow;
}
p{
   color: goldenrod;
   font-size: 2px;
   border: 2px dashed darkolivegreen;
}

四、CSS選擇器

4.1.普通選擇器

選擇某一類標簽添加樣式: div

<style>
    div{
        color: red;
    }
    p{
        color: blue;
    }
</style>

選擇某個類(class)標簽添加樣式: .test1

<style>
    .test1{
        color: green;
     }
</style>

選擇某一 id標簽添加樣式: #main

<style>
    #main{
       font-size: 40px;
    }
</style>

并列選擇器: #main, .test1
id="main" 或者 class="test1" 都會被選中

<style>
    #main, .test1{
        border: 1px solid rosybrown;
    }
</style>

復合選擇器: p.test1

<body>
    <p class="test1">我是段落標簽</p>
</body>

<style>
    p.test1{
        background-color: yellow;
    }
</style>

后代選擇器 div a

<body>
    <div class="test1"> 
        我是div標簽 
        <a href="#">我是超鏈接</a> 
          <div> 
             <a href="#">我是二級鏈接</a> 
          </div> 
    </div>
</body>
// div里面所有的a畸裳，無論多少個層級
<style>
    div a{
        color: red;
    }
</style>

直接后代選擇器 : >

<body>
    <div class="test1"> 
        我是div標簽 
        <a href="#">我是超鏈接</a> 
          <div> 
             <a href="#">我是二級鏈接</a> 
          </div> 
    </div>
</body>

<style>
    // 直接后代 >
    div.test1>a{
        color: green;
    }
</style>

相鄰兄弟選擇器: div + p
- 第一個p標簽會被選中

<body>
    <div>我是div標簽</div>
    <p>我是段落標簽p1</p>
    <p>我是段落標簽p2</p>
</body>

<style>
    div + p {
        color: red;
    }
</style>

屬性選擇器: div[name]

<div name="Jack">我是div標簽</div>
div[name]{
   color: red;
}

通配選擇符： *

//級別非常低缰犁，性能比較差 
*{  
  font-size: 30px ;
}

4.2.偽類選擇器

focus 向有鍵盤輸入焦點的元素添加樣式

<style>
input:focus{
    outline: none; // 去除外線條
    width: 500px; // 改變寬度和高度
    height: 50px;
    font-size: 20px; // 改變文字的大小
}
</style>

hover 鼠標移動到元素上時候，改變元素的樣式

#main:hover{
    width: 300px;
    height: 200px;
    background-color: aqua;
}

五躯畴、選擇器的優(yōu)先級別

選擇器的權值加在一起民鼓，大的優(yōu)先。如果相等蓬抄，后定義優(yōu)先
- 通配選擇符：0
- 標簽： 1
- 偽元素： 1
- 類： 10
- 屬性： 10
- 偽類： 10
- id： 100
- important： 1000
important > 內(nèi)聯(lián) > id > 類 > 標簽 | 偽類 | 屬性選擇 > 偽元素 > 通配符 > 繼承

六、CSS屬性

6.1.可繼承屬性

所有標簽可繼承
visibility // 元素是否可見
cursor // 顯示的光標的類型

<style>
    div{
         visibility: hidden; 
         cursor: help; 
    }
</style>

內(nèi)聯(lián)標簽可繼承
letter-spacing夯到、word-spacing嚷缭、white-space、line-height耍贾、color阅爽、font、font-family荐开、font-size付翁、font-style、font-variant晃听、font-weight百侧、text-decoration、text-transform能扒、direction
塊級標簽可繼承
text-indent佣渴、text-align
列表標簽可繼承
list-style、list-style-type初斑、list-style-position辛润、list-style-image

6.2.不可繼承屬性

常用
display、margin见秤、border砂竖、padding、background鹃答、height乎澄、min-height、max-height挣跋、width三圆、min-width、max-width、overflow舟肉、position修噪、left、right路媚、top黄琼、bottom、z-index整慎、float
不常用
clear脏款、table-layout、vertical-align裤园、page-break-after撤师、page-bread-before、unicode-bidi

七拧揽、CSS實戰(zhàn)應用-重點舉例

1.設置文本中間劃杠

text-decoration: line-through; // 中間有線
text-decoration: none; // 無下劃線等
text-shadow: 10px 10px 9px purple; // 設置文字陰影

2.首行縮進

text-indent: 2%;

3.處理超出的內(nèi)容: hidden直接裁剪

overflow: scroll;

5.設置自己的下劃線

border-bottom: 1px solid #dddddd;

6.無序列表剃盾，去除黑點

ul{
    list-style: none;
}

7.no-repeat:不平鋪

background: url("images/bg.jpeg") no-repeat;

8.覆蓋一整頁

background-size: cover

9.設置邊框

border: 2px solid black;

10.設置內(nèi)邊距

padding:10px;

11.設置外邊距

margin: 30px;

12.設置透明度

background-color: rgba(255,0,0,1.0);

13.設置圓角

border-radius: 20px;

14.設置上左的圓角

border-top-left-radius: 100px;

15.設置下右的圓角

border-bottom-right-radius: 100px;

16.設置不透明度

opacity: 0.1;

17.設置塊陰影

box-shadow: 10px 10px  10px purple;

19.浮動(到父標簽的左邊和右邊，上邊淤袜，下邊)
- 任何標簽只要一浮動,類型就會被轉(zhuǎn)為行內(nèi)-塊級標簽

float: left;

20.相對瀏覽器進行定位

position: fixed;

21.停留在父標簽的任意位置

/*子絕父相*/
position: relative;
position: absolute;

22.設置水平居中,垂直居中:適用于行內(nèi)標簽和行內(nèi)-塊級標簽

text-align: center;
line-height: 200px;

23.設置水平居中,垂直居中:適用于塊級標簽

// 先設置高度
margin:0 auto;
position left top tanslate

24.設置input的外邊框

box-sizing: border-box;

25.偽類: 去除input外邊框痒谴，設置自定義邊框

#main .search input:focus{
    outline: none;
    border:1px solid #3385ff;
}

26.去除按鈕邊框

border: 0;

27.偽類:去除按鈕外邊框

.login-btn:focus{
    outline: none;
}

28.字體加粗

/*加粗*/
font-weight: bolder;
/*不加粗*/
font-weight: normal;

29.設置字體

font-family: 'Arial';

30.改變標簽的類型

display: inline-block;
display: none; // 設置標簽是否顯示

31.設置鼠標在圖片之上的時候，圖片的透明度

#main .normal-search img:hover{
    opacity: 0.5;
}

32.設置標簽們的屬性（和通配選擇符差不多）

a, address, b, big, blockquote, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, font, form, h1, h2, h3, h4, h5, h6, html, i, iframe, img, ins, label, legend, li, ol, p, pre, small, span, strong, u, ul, var{
    padding: 0;
    margin: 0;
}

33.圖片居中

vertical-align: middle;

34.導入字體

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

35.設置背景圖片

background: url("../images/pattern.gif");

36.自適應布局

@media screen and (max-width: 1095px){
    #nav ul li a{
        width: 150px;
    }
}

@media screen and (max-width: 844px){
    #nav ul li a{
        width: 60px;
        font-size: 14px;
        height: 35px;
        line-height: 35px;
    }
    #list {
       margin-top: 60px;
    }
}

37.在body中垂直水平居中

#footer{
    background-color: chartreuse;
    height: 60px;
    width: 400px;
    
    position: fixed;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
}

38.動畫的過度效果

百度搜索 w3cschool trasform屬性铡羡，就會出現(xiàn)屬性相關用法
transition 自動彈出代碼
這是對于不同瀏覽器的適配
第二個參數(shù)表示動畫的用時

    -webkit-transition: linear 0.25s;
    -moz-transition: linear 0.25s;
    -ms-transition: linear 0.25s;
    -o-transition: linear 0.25s;
    transition: linear 0.25s;

動畫方向

-webkit-transform-origin: center bottom;

設置動畫的效果

-webkit-transform: scale(1.5);

39.剪裁超出部分

overflow: hidden;