前端--css

時間  2019-12-11
標籤 前端 css 欄目 CSS 简体版
原文   原文鏈接

認識css樣式css

css 全稱爲「層疊樣式表（cascading style sheeets）」 ，它主要是用於定義html內容在瀏覽器內顯示的樣式，如文字大小，顏色，字體加粗等。html

如：瀏覽器

P{佈局

       font-size:12px;字體

       color:red;spa

       font-weight:bold;code

}orm

使用css樣式的一個好處是經過定義某個樣式，可讓不一樣網頁位置的文字有着統一的字體，字號或者顏色等。htm

 

CSS代碼語法繼承

CSS樣式由選擇器和聲明組成，而聲明又由屬性和值組成。

選擇符：又稱選擇器，指明網頁中要應用樣式規則的元素

聲明：在英文大括號{}中的就是聲明，屬性和值之間用英文冒號：分隔，當有多條聲明時，中間能夠英文號；分隔

注意：

1， 最後一條聲明能夠沒有分號，可是爲了之後修改方便，通常也加上分號。

2， 爲了使用樣式更加閱讀容易，能夠將每條代碼寫在一個新行內

 

CSS註釋代碼

語法：/*註釋語句*/

 

內嵌式css樣式，直接寫在現有的html標籤中

內嵌式：css樣式表就是把css代碼直接寫在現有的html標籤中

<p style=」color:red」>這裏文字是紅色。</p>

 

外部式css樣式，寫在單獨的一個文件中

外部式css樣式（也可稱爲外聯式）就是把css代碼寫在一個單獨的外部文件中，這個css樣式文件以.css爲擴展名

<link href = 「base.css」 rel=」stylesheet」 type=」text/css」/>

注意：

1， css樣式文件名稱以有意義的英文字母命名

2， rel=「stylesheet」 tyoe=」text/css」式固定寫法不可修改。

3， <link>標籤位置通常寫在<head>標籤以內。

內聯式>嵌入式>外部式

 

標籤選擇器

如：p{font-size:12px ; line-height:1.6em}

 

類選擇器

語法：.類選擇名稱{css樣式代碼；}

注意：

1， 英文圓點開頭

2， 其中類選擇器名稱能夠任意起名（不要用中文）

 

Id選擇器

1， 爲標籤設置id=「ID名稱」，而不是class=「類名稱」

2， Id選擇符的前面是井號（#）號

 

類和id選擇器的區別

相同點：能夠應用到任何元素

不一樣點：

1， id選擇器只能在文檔中使用一次。與類選擇器不一樣，在html文檔中，id選擇器只能使用一次，並且僅一次，而類選擇器可使用屢次

2， 可使用類選擇器詞列表方法爲一個元素同時設置多個樣式

 

子選擇器

例：,food>li{border:1px solid red;}

 

包含（後代）選擇器

包含選擇器，即加入空格，用於選擇指定標籤元素下的後輩元素

例：.first span{color:red;}

子選擇器僅指它的直接後代，或者你能夠做用於子元素的第一個後代，然後代選擇器是做用於全部子後代元素。

總結：>做用於元素的第一代後代，空格做用於元素的全部後代

 

通用選擇器

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的做用是匹配html中全部的元素

*{color：red；}

 

僞類選擇符

它容許給html不存在的標籤（標籤的某種狀態）設置樣式，

例 a:hover{color:red;}

上面一行代碼就是a標籤鼠標滑過的狀態設置字體顏色變紅

 

分組選擇符

,h1,span{color:red;}至關於h1{color：red} span{color：red；}

 

繼承

CSS的某種樣式具備繼承性的

有些樣式不具備繼承性的，如border：1px solid：red

 

特殊性

瀏覽器是根據權值來判斷使用哪一種CSS樣式的，權值高的就使用哪一種css樣式

 

權值的規則：

標籤的權值爲1，類選擇符的權值爲10，id選擇符的權值最高爲100，內聯樣式1000

注意：還有一個權值比較特殊，繼承也有權值但很低，有的文獻提出它只有0

.1，因此能夠理解爲繼承的權值最低

 

疊層

疊層就是在html文件中對於同一個元素能夠有多個css樣式存在，當有相同權重的樣式存在時，會根據這些css樣式的先後順序來決定，處於最後面的css樣式會被應用。

 

重要性

咱們在作網頁代碼的時，有些特殊的狀況須要爲某些樣式設置具備最高權值，怎麼辦？這時候咱們可使用!important來解決。

 

字體

Body{font-family:」Microsoft Yahei」;}

 

字號，顏色

Body{font-size：12px；color：#666}

 

粗體

P span{font-weight:bold;}

 

斜體

Font-style：italic；

 

文字排版—下劃線

P a{text-decoration：underline；}

 

文字排版—刪除線

Text-decoration：line-through；

 

段落排版—縮進

P{text-indent：2em；}

2em的意思時文字的2倍大小

 

段落排版 行高

P{line-height：1.5em；}

 

段落排版—中文字間距，字母間距

例letter-spacing：50px；

 

段落排版—對齊

Text-align：center ；text-align：left； text-align：right；

 

元素分類

三種不一樣的類型：塊狀元素，內聯元素，內聯塊狀元素

 

經常使用的塊狀元素有：

<div> <p><h1>…<h6><ol> <ul><dl><table><address><blockquote><form>

經常使用的內聯元素有：

<a><span><br><i><em><strong><label><q><var><cite><code>

經常使用的內聯塊狀元素有：

<img><input>

在html中<div><p><h1><form><ul>和<li>就是塊級元素，設置display：block就是將元素顯示爲塊級元素。

 

元素分類—塊級元素

，a{display：block}

塊級元素特色：

1， 每一個塊級元素都重新的一行開始，而且其後的元素也另起一行。

2， 元素的高度，寬度，行高以及頂和底邊距均可設置。

3， 元素寬度在不設置的狀況下，是它自己父容器的100%（和父元素的寬度一致），除非設定一個寬度。

 

元素分類—內聯元素

在html中，<span>、<a>、<label>、<strong>和<em>就是典型的內聯元素（行業元素）（inline）元素。固然塊狀元素也能夠經過代碼display：inline將元素設置爲內聯元素。

，div{

        display：inline；

}

內聯元素特色：

1， 和其餘元素都在一行上；

2， 元素的高度、寬度及頂部和底部邊距不可設置；

3， 元素的寬度就是它包含的文字或圖片的寬度，不可改變。

 

 

元素分類—內聯塊狀元素

內聯塊狀元素（inline-block）就是同時具有內聯元素、塊狀元素的特色，代碼display：inline-block就是將元素爲內聯塊狀元素

<img>、<input>標籤就是這種內聯塊狀標籤

 

Inline-block元素特色：

1， 和其餘元素都在一行上；

2， 元素的高度、寬度、行高以及頂和底邊距均可設置。

 

盒模型---邊框（一）

盒子模型的邊框就是圍繞着內容及補白的線，這條線你能夠設置它的粗細、樣式和顏色（邊框三個屬性）。

Div{

       Border:2px solid red;

}

上面時border代碼的縮寫形式

，div{

       Border-width:2px;

       Border-style:solid;

       Border-color:red;

}

注意：

1， border-style（邊框樣式）常見樣式有：

dashed（虛線）dotted（點線）solid（實線）

2， border-color（邊框顏色）中的顏色可設置爲十六進制顏色

3， border-width（邊框寬度）中的寬度也能夠設置爲：

thin|medium|thick，最經常使用的是像素（px）。

 

盒模型—寬度和高度

盒模型寬度和高度和咱們日常所說的物體的寬度和高度理解是不同的，css內定義的寬和高

一個元素實際寬度=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界

 

盒模型—填充

元素內容與邊框是能夠設置距離的，稱之爲「填充」。填充順序：上右下左

 

盒模型—邊界

元素與其餘元素之間的距離可使用邊界（margin）來設置。邊界也是可分爲上右下左

 

佈局模型：

三種佈局模型：流動模型（flow）浮動模型（float）層模型（layer）

 

流動模型

流動是默認的網頁佈局模式

特徵：

第一點，       塊狀元素都會所處的包含元素內自上而下按順序垂直延伸分佈，由於在默認狀態下，塊狀元素的寬度都爲100%

第二點，       在流動模型下，內聯元素都會在所處的包含元素從左到右水平分佈顯示

A span em strong都是內聯元素

 

浮動模型

 ，div p table img 均可以定義爲浮動

Float：left；right；

 

什麼是層模型

層佈局模型就像是圖像軟件photoshop中很是流行的圖層編輯功能同樣，每一個圖層可以精準定位操做

層模型有三種形式：

1， 絕對定位

2， 相對定位

3， 固定定位

 

絕對定位

例：

Position：absolute

Left：100px；

Top：50px；

 

相對定位

Position：relative

 

固定定位

Position：fixed

 

Relative 與absolute組合使用

參照定位的元素必須是相對定位元素的前輩元素

 

參照定位的元素必須加入position：relative

#box1{

       Width：200px；

       Height：200px；

       Position：relative；

}

 

定位元素加入position：absolute，即可以使用top，bottom、left，right來進行偏移定位

 

 

盒模型代碼簡寫

1， 若是top right bottom left的值相同，以下面代碼：

Margin：10px；

2， 若是top bottom值相同，left right值相同

Margin：10px 20px；

3， 若是left和right的值相同

Margin：10px 20px 30px；

 

顏色值縮寫

P{color：#0000000；}—p{color：#000}；

P{color：#336699；}----p{color：#369}

 

 

字體縮寫

body{ font-style:italic;

font-variant:small-caps;

font-weight:bold;

font-size:12px;

line-height:1.5em;

 font-family:"宋體",sans-serif; }

 

body{ font:italic small-caps bold 12px/1.5em "宋體",sans-serif; }

注意：

一、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其餘的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用默認值。

二、在縮寫時 font-size 與 line-height 中間要加入「/」斜扛。

 

顏色值

1， 英文命令顏色

P{color：red；}

2， RGB顏色

P{color：rgb（133，45，200）；}

p{color:rgb(20%,33%,25%);}

3十六進制顏色

p{color:#00ffff;}

 

長度值

1， 像素 （px）

2， ，em 若是font-size=12px 1em=12px

3， 百分比 p{font-size:12px;line-height:130%}

 

水平居中設置-定寬塊狀元素

Margin：20px auto；（自適應）

 

水平居中總結-不定寬塊狀元素方式

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都不少）：

1.      加入 table 標籤

2.      設置 display: inline 方法：與第一種相似，顯示類型設爲 行內元素，進行不定寬元素的屬性設置

3.      設置 position:relative 和 left:50%：利用 相對定位 的方式，將元素向左偏移 50% ，即達到居中的目的

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程