前端基礎02 CSS

時間 2019-11-05

標籤前端基礎 css 欄目 CSS 简体版

原文原文鏈接

CSS的幾種引入方式

行內樣式

行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。css

<p style="color: red">Hello world.</p>

內部樣式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：html

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

外部樣式

外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用此方式。前端

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

CSS選擇器

基本選擇器

元素選擇器
```
p {color: "red";}
```
ID選擇器
```
#i1 {
background-color: red;
}
```
類選擇器
```
.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}
```
標籤中的class屬性若是有多個，要用空格分隔瀏覽器
通用選擇器
```
* {
color: white;
}
```

組合選擇器

後代選擇器

/*li內部的a標籤設置字體顏色*/
li a {
color: green;
}

兒子選擇器

/*選擇全部父級是 <div> 元素的 <p> 元素*/
div>p {
font-family: "Arial Black", arial-black, cursive;
}

毗鄰選擇器

/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
margin: 5px;
}

弟弟選擇器

/*i1後面全部的兄弟p標籤*/
#i1~p {
border: 2px solid royalblue;
}

屬性選擇器

/*用於選取帶有指定屬性的元素。*/
p[title] {
  color: red;
}
/*用於選取帶有指定屬性和值的元素。*/
p[title="213"] {
  color: green;
}

分組和嵌套

分組
當多個元素的樣式相同的時候，咱們沒有必要重複地爲每一個元素都設置樣式，咱們能夠經過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
例如：ide
```
div, p {
color: red;
}
```
嵌套
多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。
```
.c1 p {
color: red;
}
```

選擇器的優先級

同等選擇器，越靠近標籤的優先級越高（就近原則）
性能

僞類選擇器

/* 鼠標移動到連接上 */
a:hover {
  color: #FF00FF
} 

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;
}

僞元素選擇器

first-letter
經常使用的給首字母設置特殊樣式：字體

p:first-letter {
  font-size: 48px;
  color: red;
}

beforecode

/*在每一個<p>元素以前插入內容*/
p:before {
  content:"*";
  color:red;
}

afterhtm

/*在每一個<p>元素以後插入內容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用於清除浮動。blog

CSS屬性相關

寬和高

width屬性能夠爲元素設置寬度。

height屬性能夠爲元素設置高度。

塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定。

字體屬性

文字字體、字體大小

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
p {
  font-size: 14px;
}

若是設置成inherit表示繼承父元素的字體大小值
字重（粗細）
font-weight用來設置字體的字重（粗細）。

值	描述
bold	粗體

文本顏色
顏色屬性被用來設置文字的顏色。

顏色是經過CSS最常常的指定：

十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顏色的名稱 - 如: red

還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間。

文字屬性

文字對齊

text-align 屬性規定元素中的文本的水平對齊方式。

值	描述
left	左邊對齊默認值
right	右對齊
center	居中對齊

文字裝飾
text-decoration 屬性用來給文字添加特殊效果
經常使用的爲去掉a標籤默認的自劃線：

a {
  text-decoration: none;
}

首行縮進
將段落的第一行縮進 32像素：

p {
  text-indent: 32px;
}

兩倍於font-size的設置就是縮進兩個字體

背景屬性

http://www.javashuo.com/article/p-xnrtvfmf-g.html

邊框

border-radius

用這個屬性能實現圓角邊框的效果。

將border-radius設置爲長或高的一半便可獲得一個圓形。

display屬性

CSS盒子模型

margin: 用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，多用來調整標籤和標籤之間的距離，從視覺角度上達到相互隔開的目的。
padding: 用於控制內容與邊框之間的距離；
Border(邊框): 圍繞在內邊距和內容外的邊框。
Content(內容): 盒子的內容，顯示文本和圖像。

margin外邊距

.margin-test {
  margin-top:5px;
  margin-right:10px;
  margin-bottom:15px;
  margin-left:20px;
}

推薦使用簡寫：

.margin-test {
  margin: 5px 10px 15px 20px;
}

順序：上右下左

常見居中：

.mycenter {
  margin: 0 auto;
}

padding內填充

示例：設置一個列表
效果：

<style>
    /*取消ul標籤前面的標誌*/
    ul {
        list-style-type: none;
    }
    /*把li標籤轉成行級標籤*/
    li {
        display: inline;
    }
    /*把a標籤下劃線取消，右邊框設置1px實線紅色，padding上下設置0，左右設置15px*/
    li>a {
        text-decoration: none;
        border-right: 1px solid red;
        padding: 0 15px;
    }
    /*不顯示最後一個li標籤的右邊框*/
    li.last>a {
        border-right: none;
    }
</style>

<ul>
    <li><a href="">大米商城</a></li>
    <li><a href="">小魅商城</a></li>
    <li><a href="">錘科商城</a></li>
    <li class="last"><a href="">華爲商城</a></li>
</ul>

float

在 CSS 中，任何元素均可以浮動。

浮動元素會生成一個塊級框，而不論它自己是何種元素。
關於浮動的兩個特色：

浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。
因爲浮動框不在文檔的普通流中，因此文檔的普通流中的塊框表現得就像浮動框不存在同樣。

三種取值

left：向左浮動

right：向右浮動

none：默認值，不浮動

.c2 {
    float: left;
    height: 100px;
    width: 100px;
}

clear

clear屬性規定元素的哪一側不容許其餘浮動元素。

值	描述
left	在左側不容許浮動元素。
right	在右側不容許浮動元素。
both	在左右兩側均不容許浮動元素。

clear屬性只會對自身起做用，而不會影響其餘元素。

舉例：解決父標籤塌陷，清除浮動

由於c1和c2都是浮動元素，因此撐不起父標籤，此時利用僞元素添加一個元素，同事設置清除左側浮動能夠把父標籤撐起來，這個僞元素自己不須要有高度

<div id="d1" class="clearfix">
    <div class="c1">c1</div>
    <div class="c2">c2</div>
</div>

.clearfix:after {
    content: "";
    clear: left;
    display: block;
}

overflow溢出屬性

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

圓形頭像示例：

<style>
    .header-img {
        width: 120px;
        height: 120px;
        border: 2px solid silver;
        /*設置爲原型*/
        border-radius: 100%;
        /*若是溢出則隱藏*/
        overflow: hidden;
    }
    .header-img>img {
                max-width: 100%;
    }
</style>

<div class="header-img">
    <img src="https://s4.51cto.com//oss/201901/03/d4ad6e4650cfe4f35e18a5c76d2af13f.jpg" alt="">
</div>

效果：

定位（position）

static --> 默認的
relative --> 相對定位(相對於原來的位置來講)
absolute --> 絕對定位(相對於最近的一個被定位過的祖宗標籤) (徹底脫離文檔流)
fixed --> 固定在某個位置(返回頂部按鈕)

左右上下
left right top bottom

示例：
返回頂部按鈕樣式示例

<div class="scrollTop">返回頂部</div>

<style>
    * {
        margin: 0;
    }
    .fixed-test {
        /*固定位置*/
        position: fixed;
        /*用右和下定位*/
        right: 20px;
        bottom: 20px;
        background-color: olivedrab;
    }
</style>

脫離文檔流補充

脫離文檔流的三種方式
float
absolute 絕對定位
fixed 固定定位

z-index

數值越大,越靠近你
只能做用於定位過的元素

示例：自定義的模態框

<div class="c1"></div>
<div class="c2"></div>

.c1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0,0,0,0.5);
    z-index: 999;
}

.c2 {
    height: 400px;
    width: 600px;
    position: fixed;
    background-color: white;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -300px;
    z-index: 1000;
}