前端學習-基礎部分-css（一）

時間 2019-11-17

標籤前端學習基礎部分 css 欄目 CSS 简体版

原文原文鏈接

開始今日份整理css

1.CSS的導入方式

CSS的導入方式主要是有內聯模式，行內模式，外部樣式表html

1.1 內聯模式

內聯模式：直接在<head>中直接寫css，例如前端

p{
        color:rgb(166, 226, 226);
    }
#設置P標籤的顏色

1.2 行內模式

行內模式：在html中對應元素直接書寫瀏覽器

<p style="color:cadetblue">第一段 世界大勢，合久必分，分久必合</p>

1.3 外部樣式表

外部樣式表，主要是有倆種，一種爲連接式，一種爲外聯樣式表ide

<link rel="stylesheet" href="index.css">
<!-- CSS2.1的樣式 -->
@import.url()

倆者的區別以下佈局

一個是所有導入後，纔開始編譯，包括css，<link>方式
一個是先導入html進行編譯，而後在將css文件加載到網頁中 <@import>方式

2.CSS選擇器

css的選擇器主要分基本選擇器以及高級選擇器學習

2.1 基本選擇器

通用元素選擇器 *: 匹配任意元素，通常用於清楚網頁的默認樣式
標籤選擇器：匹配全部指定標籤的樣式，無論樣式有多深，均可以匹配，選中既全部，並非單一的一個
id選擇器：根據指定的id匹配標籤，id在網頁中全局惟一，通常留給後面js中調用，獲取到標籤
class類選擇器：根據指定的class匹配標籤

注：必定要有公共類的概念，不要試圖用一個類完整一個網頁，儘可能把類拆分出來，每一個類儘可能的小，讓更多的標籤去使用，同一個標籤能夠攜帶多個類，類與類之間用空格隔開便可。測試

基本應用字體

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基礎選擇器</title>
    <style>
        /*標籤選擇器*/
        body{
            background: #b6bbb2;
        }
        div{
            background: #747F8C;
            color: red;
        }
        /*id選擇器*/
        #h1{
            color: #501c56;
        }
        /*class選擇器*/
        .c1{
            background: #2d4ca2;
            color: #41db50;
        }
    </style>
</head>
<body>
<h1 id="h1">id</h1>
<div>
    <p>內容1</p>
</div>
<span class="c1">class1</span>
<div>
    <p>內容2</p>
</div>
<span class="c1">class1</span>
<span class="c1">class1</span>
</body>
</html>

基本應用

2.2 高級選擇器

2.2.1 後代選擇器

後代選擇器：外層的選擇器寫在前面，內層的選擇器寫在後面，之間用空格分隔，標籤嵌套時，內層的標籤成爲外層的標籤的後代，eg：url

div p{
            background-color: rgb(33, 140, 228);
        }
        /* 意思就是div標籤內的P標籤的樣式 */

注：這個在正常的前端學習中頻繁使用。

2.2.2 兒子選擇器

兒子選擇器，經過’>’鏈接在一塊兒的，僅用於子元素，eg：

div>p{
            color:red;
        }
        /* 意思就是div的子標籤p的顏色爲紅色 */

2.2.3 並集選擇器與交集選擇器

並集選擇器：多個鏈接器，經過逗號鏈接而成，同時聲明多個分格相同的樣式

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>組合選擇器</title>
    <style>
        #i1, #i2, #i3{
            background: #2d4ca2;
            color: #41db50;
        }
    </style>
</head>
<body>
<div id="i1">第一行</div>
<div id="i2">第二行</div>
<div id="i3">第三行</div>
</body>
</html>

交集選擇器：由倆個選擇器鏈接而成，第一個必須爲標籤選擇器，第二個爲類選擇器或者是ID選擇器

2.2.5 屬性選擇器

除了HTML元素的id，classy也可使用特定的屬性來選擇元素

input[type='text']{ width:100px; height:200px; }，對選擇到的標籤再經過屬性再進行一次篩選，選擇type屬性等於text的input標籤

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>屬性選擇器</title>
    <style>
        input[type="text"]{
            width:100px;
            height: 200px;
        }
    </style>
</head>
<body>
<input type="text">
<input type="password">
</body>
</html>

2.3 僞類

2.3.1僞類選擇器

CSS僞類是用來給選擇器添加一些特殊效果

a:link（沒有接觸過的連接）,用於定義了連接的常規狀態
a:hover（鼠標放在連接上的狀態）,用於產生視覺效果
a:visited（訪問過的連接）,用於閱讀文章，能清楚的判斷已經訪問過的連接
a:active（在連接上按下鼠標時的狀態）,用於表現鼠標按下時的連接狀態

a:link {color: #FF0000}     /* 未訪問的連接 */ 
a:visited {color: #00FF00} /* 已訪問的連接 */
a:hover {color: #FF00FF} /* 鼠標移動到連接上 */
a:active {color: #0000FF} /* 選定的連接 */ 格式: 標籤:僞類名稱{ css代碼; }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hover示例</title>
    <style>
        body{
            margin: 0 auto;
        }
        a{
            text-decoration: none;
        }
        .pg-header{
            height: 38px;
            line-height: 38px;
            width: 100%;
            background-color: #5d48ff;
        }
        .w{
            width: 980px;
            margin: 0 auto;
        }
        .pg-header .log{
            color: #8c3d41;
        }
        .pg-header .menu{
            display: inline-block;
            padding: 0 10px;
            color: white;
        }
        /*當鼠標移動到標籤上時如下CSS才生效*/
        .pg-header .menu:hover{
            background-color: #501c56;
        }
    </style>
</head>
<body>
<div class="pg-header">
    <div class="w">
        <a href="" class="logo">Logo</a>
        <a href="" class="menu">所有</a>
        <a href="" class="menu">42區段子</a>
        <a href="" class="menu">1024</a>
    </div>
</div>
</body>
</html>

hover實例

hover實例

2.3.2 focus僞類

:focus input標籤獲取光標焦點

應用eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>focus</title>
    <style>
        .container{
            width: 600px;
            height: 350px;
            margin: 0 auto;
            border: 1px solid red;
        }
        .form{
            margin-top: 135px;
            text-align: center;
        }
        input.text{
            margin-bottom: 10px;
        }
        input.text:focus{
            color: #8c3d41;
            background-color: grey;
        }
    </style>
</head>

<body>

<div class="container">
    <span>搜索框</span>
    <div class="form">
        <form action="">
            <input type="text" class="text">
            <br/>
            <input type="submit" value="搜索" class="submit">
        </form>
    </div>
</div>

</body>
</html>

focus實例

2.3.3 before after僞類

first-letter:文本首字母，特殊樣式
before：用於在元素的內容前面插入內容，在每一個 <p> 元素的內容以前插入內容 p:before{content:"hello";color:red}
after:在元素後面插入新內容，也用於清除浮動，在每一個 <p> 元素的內容以後插入內容 p:after{ content:"hello"；color:red}

2.4 CSS的繼承以及優先級

2.4.1 選擇器的優先級

選擇器的優先級是按照選擇器的權重來計算

選擇器    權重
style=""  1000
 #id 　　  100
class 　 10
p 　　　   1
#注意：權重計算永遠不進位

補充：

在正常的權重在，也能夠用import強制讓樣式生效，不過不推薦使用，權重會無限大
當權重同樣大時，後來者居上
繼承的權重與選中的權重相比，繼承的權重爲0
若是屬性都是繼承的，權重都是0，採用就近原則，誰的描述近就採用它的樣式

2.4.2 選擇器的繼承性與層疊性

繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是CSS中的繼承，有些屬性是能夠繼承的，只有color,font-*,text-*,line-*能夠繼承，像一些盒子元素，定位的元素（浮動，絕對定位，固定定位，border, margin, padding, background等）不能繼承。

層疊：誰的權重大就會顯示誰的樣式。

3. CSS經常使用樣式

3.1 通用樣式

3.1.1 字體相關屬性

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

left 把文本排列到左邊。默認值：由瀏覽器決定。
right 把文本排列到右邊。
center 把文本排列到中間，水平方向居中
justify 實現兩端對齊文本效果。

line-height: 標籤高度垂直方向根據標籤高度居中

text-decoration:文字裝飾

3.1.2 字體屬性

color:字體顏色

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

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

font-weight:字重屬性

font-family:字體系列

font-family能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。eg:

body { font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif }

font-size:字體大小，設置像素大小，便可設置字體的大小

3.1.3 背景屬性

經常使用背景屬性

在HTML中能夠直接給body設置背景以下所示

<body background=圖片文件名>

CSS中的背景設置以下：

1 background-color: cornflowerblue    ->  指定背景顏色
2 background-image: url('1.jpg');      ->  指定背景圖片
3 background-repeat: no-repeat;(repeat:平鋪滿)   ->  指定背景重複方式(no-repeat;repeat-x;repeat-y)
4 background-position: right top（20px 20px）;  -> 指定背景位置(橫向：left center right 縱向：top center bottom )

3.1.4 其餘經常使用屬性

其餘

height 高度: 像素,百分比
width 寬度: 像素,百分比
text-align:ceter 水平方向居中
text-indent 首行縮進
text-decoration 裝飾(去除a標籤的下劃線 text-decoration:none;)

3.2 邊框屬性

經過使用 CSS 邊框屬性，咱們能夠建立出效果出色的邊框，而且能夠應用於任何元素

邊框設置：

寬度(border-width)，樣式(border-style)，顏色(border-color) border: 4px dotted red;
border-left,border-right,border-top,border-bottom

1 border-style: solid;
2 border-color: red;
3 border-width: 10px;
4 簡寫：border: 10px red solid;

經常使用邊框樣式：

dotted: 定義一個點線邊框
dashed: 定義一個虛線邊框
solid: 定義實線邊框

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>邊框</title>
    <style>
        body{
            margin: 0 auto;
        }
        p{
            margin-left: 30px;
            width: 300px;
            height: 100px;
        }
        .c1{
            border: 3px solid red;
        }
        .c2{
            border-top: 3px dashed green;
            border-bottom: 3px dashed red;
            border-left: 3px dotted #804761;
            border-right: 3px dotted blue;
        }
    </style>
</head>
<body>
<p class="c1">這是一句話</p>
<br>
<p class="c2">最後一句話!</p>
</body>
</html>

效果以下

3.3 顯示屬性

顯示屬性：設置元素如何被顯示

3.3.1 顯示分類

(1)display分類

display: none; -- 讓標籤消失(隱藏元素並脫離文檔流)
display: inline; -- 內聯元素(內聯表籤)
display: block; -- 塊級元素(塊級標籤)
display: inline-block; -- 既有inline的屬性也有block屬性

(2)塊級元素和內聯元素

block元素：

block元素會獨佔一行，多個block元素會各自新起一行。默認狀況下，block元素寬度自動填滿其父元素寬度
block元素能夠設置width和height屬性。塊級元素即便設置了寬度,仍然是獨佔一行
block元素也能夠設置margin和padding屬性

inline元素：

inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行
inline元素的寬度是自身內容的寬度(默認有多少佔多少)
inline元素設置width和height屬性無效
inline元素的margin和padding屬性，水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

inline-block元素：

簡單來講就是將對象呈現爲inline對象，可是對象的內容做爲block對象呈現。以後的內聯對象會被排列在同一行內。好比咱們能夠給一個link（a元素）設置inline-block屬性，使其既具備block的可設置寬度和高度特性又具備inline的同行特性

3.3.2 塊級標籤與內聯標籤(塊級元素和內聯元素)

(1)塊級標籤與內聯標籤實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>塊級標籤和內聯標籤</title>
    <style>
        div, p, span{
            width: 100px;
            height: 100px;
        }
        div{
            background: red;
        }
        p{
            background: #747F8C;
        }
        span{
            background: #41db50;
        }
    </style>
</head>
<body>
<div>div(塊級標籤) </div>
<p>p(塊級標籤)</p>
<span>span(內聯標籤)</span>
</body>
</html>

(2)塊級標籤和內聯標籤經過display轉換

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>塊級標籤和內聯標籤經過display轉換</title>
    <style>
        .inline{
            background: red;
            display: inline;
        }
        .block{
            background: red;
            display: block;
        }
    </style>
</head>
<body>
    <!--將塊級標籤變成行內標籤-->
    <div class="inline">div</div>
    <!--將行內標籤變成塊級標籤-->
    <span class="block">span</span>
</body>
</html>

3.3.3 inline-block應用

display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：

1 #outer{
2 border: 3px dashed;
3 word-spacing: -6px;
4 }

3.4 列表屬性

ul,ol{   
list-style: none; /*去掉樣式*/
list-style: circle;
list-style: disc; 
list-style: upper-alpha;
、、、
}

4.CSS補充內容

(1)overflow -> 隱藏溢出

overflow: hidden; //超過範圍隱藏

overflow: auto; 　//超出加滾動條　

overflow: scroll; //無論如何都帶滾動條

(2)下劃線

去掉下劃線：text-decoration: none ;
加上下劃線： text-decoration: underline;

1 /*清除a標籤的下劃線*/
2 a{
3      text-decoration: none;
4 }

(3)居中顯示

針對block元素居中：

指定block元素寬度
而後指定margin 0 auto

居中測試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>居中顯示</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .content-box{
            width: 100%;
            height: 800px;      /*實際中能夠不用設置*/
        }
        .content{
            margin: 0 auto;
            width: 800px;
            height: 800px;      /*實際中能夠不用設置*/
            background-color: #747F8C;
        }
    </style>
</head>
<body>
<div class="content-box">
    <div class="content"></div>
</div>
</body>
</html>

居中顯示