前端（三）

時間 2019-11-08

標籤前端简体版

原文原文鏈接

一css基本概念

1.1流

「流」又叫文檔流，是css的一種基本定位和佈局機制。流是html的一種抽象概念，暗喻這種排列布局方式好像水流同樣天然自動。「流體佈局」是html默認的佈局機制，如你寫的html不用css， 默認自上而下（塊級元素如 div ）從左到右（內聯元素如 span ）堆砌的佈局方式。

1.2css寬高樣式

width、height的默認值都是auto。
css

對於塊級元素，流體佈局之下width: auto自適應撐滿父元素寬度。html

對於內聯元素，width: auto則呈現出包裹性，即由子元素的寬度決定。瀏覽器

不管內聯元素仍是塊級元素，height: auto都是呈現包裹性，即高度由子級元素撐開。bash

注意父元素height: auto會致使子元素height: 100%百分比失效。佈局

若是塊級元素的 width是個固定值， margin是 auto，則 margin會撐滿剩下的空間；若是 margin是固定值， width是 auto，則 width會撐滿剩下的空間。

1.3css的單位
字體

html中的單位只有一種，那就是像素px，因此單位是能夠省略的，可是在CSS中不同。 CSS中的單位是必需要寫的，由於它沒有默認單位。經常使用過的是px或者是百分比（相對於父標籤）
ui

1.4css的基本寫法url

選擇器{
	屬性名: 屬性值;
	屬性名: 屬性值;
}複製代碼

選擇器表明頁面上的某類元素，選擇器後必定是大括號。
屬性名後必須用冒號隔開，屬性值後用分號（最後一個屬性能夠不用分號）。
屬性名和冒號之間最好不要有空格（經驗）。
若是一個屬性有多個值的話，那麼多個值用空格隔開

1.5行高line-height樣式spa

行高和塊級仍是行內標籤沒有關係，就是指定的每一行的高度。如code

p {
            width: 400px;
            line-height: 30px;
            font-size: 10px;
        } 複製代碼

<p >你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好你好
    你好你好你好你好你好你好你好你好你好你好你好你好</p> 複製代碼

那麼顯示p的高度就是 = 多少行*30px。

二字體樣式

p{
            font-size:50px; 		/*字體大小*/
            line-height: 30px;      /*行高*/
            font-family:幼圓,黑體; 	/*字體類型：若是沒有幼圓就顯示黑體，沒有黑體就顯示默認*/
            font-style:italic ;		/*italic表示斜體，normal表示不傾斜*/
            font-weight:bold;	/*粗體：屬性值寫成bolder也能夠*/
            font-variant:small-caps;  /*小寫變大寫*/
  }複製代碼

字體屬性說明：

網頁中不是全部字體都能用，由於這個字體要看用戶的電腦裏面裝沒裝。
爲了防止用戶電腦裏，沒有幼圓這個字體。就要用英語的逗號，隔開備選字體。
行高能夠用百分比，表示字號的百分之多少。舉例： font-size:50px; line-height: 200%; 就等同於line-height:100px。

三列表樣式

list-style-image:url(../static/logo.png) ;  /*列表項前設置爲圖片*/複製代碼

四超出範圍樣式

咱們在css中設置寬度和高度都是100px，這個時候咱們在容器中放置一個很長的文本，文本所須要的區域，已經超過了這個寬度和高度的時候咱們須要怎麼樣顯示呢？

使用overflow屬性，能夠定義超出的文本怎麼顯示，樣式值有：

auto：瀏覽器本身解決。在必需時裁切對象多餘的內容或顯示滾動條。通常採用這個屬性值。
visible：默認值。所有顯示出來（溢出）。
hidden：不顯示超過對象尺寸的內容。
scroll：老是顯示滾動條。

五背景樣式

CSS樣式中，常見的背景屬性有如下幾種：（常常用到，要記住）

background-color:#ff99ff; 設置標籤的背景顏色。
background-image:url(images/2.gif); 設置標籤的背景圖片。
background-repeat: no-repeat; 設置背景圖片是否重複及如何重複，默認平鋪滿。（重要）
- no-repeat不要平鋪；
- repeat-x橫向平鋪；
- repeat-y縱向平鋪。
background-position:center top; 設置背景圖片在當前標籤中的位置。
background-attachment:scroll; 設置背景圖片是否跟着滾動條一塊兒移動。屬性值能夠是：scroll（與fixed屬性相反，默認屬性）、fixed（背景就會被固定住，不會被滾動條滾走）。
另外還有一個簡寫屬性叫作background，它的做用是：將上面的多個屬性寫在一個聲明中。

tips：padding也是有背景圖和顏色的。

background-position樣式值能夠是top、left、right、bottom，同時還能夠是具體數值，但是是正數還能夠是負數：

background-position:向右偏移量 向下偏移量;複製代碼

background 綜合屬性

background:red url(1.jpg) no-repeat 100px 100px fixed;複製代碼

等價於：

background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;複製代碼

六css和html結合方式

行內樣式：在某個特定的標籤裏採用style屬性。範圍只針對此標籤。
內嵌樣式：在頁面的head裏採用<style>標籤。範圍針對此頁面。
引入外部樣式css文件的方式。這種方式又分爲兩種：
- 採用<link>標籤。例如：<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
- 採用import，必須寫在<style>標籤中，而且必須是第一句。例如：@import url(a.css) ;

6.1行內樣式

採用style屬性。範圍只針對此標籤適用。

<p style="color:white;background-color:red">之後全部的時光裏</p>複製代碼

6.2內嵌樣式

在head標籤中加入<style>標籤，對多個標籤進行統一修改，範圍針對此頁面。

<style type="text/css">
    p{
        font-weight: bold;
        font-style: italic;
        color: red;
    }

</style>

 <body>
        <p>小哥哥</p>
	<p>洗白白</p>
	<p style="color:blue">你懂得</p>
 </body>複製代碼

6.3引入外部樣式css文件

咱們先在html頁面的同級目錄下新建一個a.css文件，那說明這裏面的代碼全是css代碼，此時就沒有必要再寫<style>標籤了

<link rel = "stylesheet" type = "text/css" href="a.css">複製代碼

這樣咱們就在當前頁面引入了一個外部樣式。

這裏再講一個補充的知識：link標籤的rel屬性 <link>標籤的rel屬性： 其屬性值有如下兩種：

stylesheet：定義的樣式表
alternate stylesheet：候選的樣式表

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。