碼上歡樂
相關內容    簡體    繁體

HTML&CSS學習筆記

本文轉載自   查看原文   2021-09-05 21:52   262    web前端開發

目錄

注：將自己學到的記下來，不要嫌少，內容會持續更新。

更新了~~，添加了一些html和css的內容，大家可以多參考。不足的地方可以在評論區call我奧~

web前端基礎的三件套：HTML，CSS，Javascript。

個人理解：HTML就相當於框架，CSS則是裝飾，Javascript是執行動作。

HTML

HTML是什么？

  • HTML 指的是超文本標記語言 (Hyper Text Markup Language)
  • HTML 不是一種編程語言，而是一種標記語言 (markup language)
  • 標記語言是一套標記標簽 (markup tag)
  • HTML 使用標記標簽來描述網頁

CSS

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。

當瀏覽器讀到一個樣式表，它就會按照這個樣式表來對文檔進行格式化（渲染）。

CSS組成：選擇器和聲明。聲明又包括屬性和屬性值。每個聲明之后用分號結束。

HTML基本結構

<!DOCTYPE html>						<!-- 聲明是HTML文檔類型 -->
<html>                             <!-- ----根控制標記 -->
    <head>                           <!--  ---頭控制標記 -->
        <title>這是標題</title>       <!-- ----標題標記 -->
    </head>                           <!-- ----頭控制標記 -->
    <body>
                             <!-- ----- 我是Body！！！ -->
    </body>
</html>                            <!-- ----根控制標記 -->

head部分常用的標簽

<title>、<base>、<link>、<meta>、<script> 以及 <style>

title

  • 定義瀏覽器工具欄中的標題
  • 提供頁面被添加到收藏夾時顯示的標題
  • 顯示在搜索引擎結果中的頁面標題

meta

  • 文檔描述【網站在搜索時，進行描述。】

    • <meta name="description" content="汽車之家為您提供最新汽車報價，汽車圖片，汽車價格大全，最精彩的汽車新聞、行情、評測、導購內容，是提供信息最快最全的中國汽車網站。">

  • 文檔關鍵詞【網站在搜索時，進行關鍵字匹配】

    • <meta name="keywords" content="汽車,汽車之家,汽車網,汽車報價,汽車圖片,新聞,評測,社區,俱樂部">

  • 重定向【頁面重定向】

    • <meta http-equiv="Refresh"content="2;URL=https://www.baidu.com">

link用於導入css

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

script用於導入js

  • <script type="text/javascript">document.write("Hello World!")</script>

style用於定義css

<style>
p {
    background-color:red;
    font-size:15px;
    }
</style>

base:定義頁面上所有鏈接的默認地址或默認目標.

<base href="http://www.w3school.com.cn/i/" />
<img src="eg_smile.gif" /><br /> #引入圖片時，會和base進行拼接后再查找圖片。

body部分常用的標簽

常用標簽:

<h1~h6>:從大到小. 表示標題.
    
<p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白.
    
<b> <strong>: 加粗標簽.
    
<strike>: 為文字加上一條中線.
    
<em>: 文字變成斜體.
    
<sup>和<sub>: 上角標 和 下角表.
    
<br/>:換行. 單標簽
    
<hr>:水平線
    
<div> :塊，主要用於布局
    
<span>：內聯標簽

塊級標簽特點：

① 占一整行，新增元素新起一行；
② 高度，行高以及外邊距和內邊距都可調整；
③ 寬度缺省是它的容器的100%，除非設定一個寬度，一般都是占滿一行。
④ 它可以容納內聯元素和其他塊元素

內聯標簽特點：

① 和其他元素都在一行上；
② 高，行高及外邊距和內邊距不可改變；
③ 寬度就是它的文字或圖片的寬度，不可改變
④ 內聯元素只能容納文本或者其他內聯元素

注：設置寬度無效，高度可以通過line-height來設置，設置margin只有左右margin有效，上下無效。-padding同上，注意元素范圍是增大了，但是對元素周圍的內容是沒影響的。

圖形標簽:<img>

  • src: 要顯示圖片的路徑.
  • alt: 圖片沒有加載成功時的提示.
  • title: 鼠標懸浮時的提示信息.
  • width: 圖片的寬
  • height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

超鏈接標簽:<a>

  • href:要連接的資源路徑 格式如下: href="http://www.baidu.com"
  • target: _blank : 在新的窗口打開超鏈接. _self：在當前窗口打開
  • name: 定義一個頁面的書簽.
  • 錨點跳轉 href : #love就會跳轉到id="love"的地方
  • href設置成javascript: 時，不會進行任何操作

注意：target設置為_blank時，會打開一個新頁簽。設置為#時，在本頁，相當於刷新頁面。

超鏈接標簽默認是有下划線的，可以用a{ text-decoration:none; }去掉下划線。

列表標簽:<ul><ol><dl>

  • <ul>: 無序列表

  • <ol>:有序列表

  • <li>:列表中的每一項.

  • 定義列表

  • <dt> 列表標題

  • <dd> 列表項

注意：

ul：type 有：circle 空心圓，disc 實心圓，square 實心正方形， none ：前面無符號;
ol：type 有：1 ：表示有序的1,2,3； a ：表示有序的a，b，c；i ：羅馬數字i,ii,iii；雖然還可以定義為：circle、disc、square、none但現實都為1,2,3等序列；

等等，太多了寫不完的，大家在需要用到的時候可以查一查順手給記下！

表格標簽

在table中使用 tr 表示表格中的一行，在 tr 中使用 td 表示一個單元格

rowspan表示縱向的合並單元格

colspan表示橫向的合並單元格

注：rowspan和colspan只能在創建表格的時候一起設置，不能在css里面設置。

<body>
		<table border="" cellspacing="" cellpadding="">
			<tr>
                <th>標題1</th>
				<th>標題2</th>
			</tr>
			<tr>
                <td>Data</td>			
				<td>Data</td>
            </tr>

		</table>
<body>

th表示頭部的單元格，td一般用於主體和底部的單元格

<style type="text/css">
		table{
			border-collapse:collapse ;
		}
</style>

設置collapse之前是

設置之后的效果：

注：設置collapse是將表格合並，沒有空隙。

行內樣式

標記的style屬性中設定css樣式，不推薦大規模使用。

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

內部樣式

將css樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。

<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;
}

組合選擇器

交集選擇器

/*由兩個選擇器組合，其中一個為標簽選擇器，另一個為類選擇器或ID選擇器。兩個選擇器之間不能有空格*/
標簽選擇器.類選擇器|ID選擇器 
{
  屬性1：屬性值1；
  ....
}

后代選擇器

/*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;
}

/*注：比較少用！*/

分組和嵌套

分組

當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。

例如：

div, p {
  color: red;
}

上面的代碼為div標簽和p標簽統一設置字體為紅色。

通常，我們會分兩行來寫，更清晰:

div,
p {
  color: red;
}

嵌套

多種選擇器可以混合起來使用，比如：.c1類內部所有p標簽設置字體顏色為紅色。

.c1 p {
  color: red;
}

偽類選擇器

偽類可以在目標元素出現某種特殊的狀態時應用樣式，例如：狀態可以是鼠標指針停留在某個標簽上，或者訪問一個超鏈接。

/* 未訪問的鏈接 */
a:link {
  color: #FF0000
}

/* 已訪問的鏈接 */
a:visited {
  color: #00FF00
} 

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

/* 選定的鏈接 */ 
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;}
  • ：first-child 第一個子元素
u1>li:first-child{ 
    color:red;
}

  • ：last-child 最后一個子元素

  • ：nth-child（n） 選中第n個子元素

    • 特殊值：

      n 第n個元素
      2n 或 even 選中偶數位的元素
      2n+1 或 odd 選中奇數位的元素

  • :first-of-type和:last-of-type以及:nth-of-type()，這幾個偽類的功能和上述的類似，不同點是他們是在同類型元素中進行排序

  • :not（） 將符合條件的元素從選擇器中去除

偽元素

偽元素，表示頁面中的一些特殊的並不真實的存在的元素（特殊的位置），以：：開頭

：：first-letter 對第一個字母做樣式
：：first-line 對第一行做樣式
：：selection 對鼠標選中的內容做樣式
：：before 對元素的開始做樣式
：：after 對元素的最后做樣式
  • before 和 after 必須和 content 屬性結合來使用，他們的內容都是無法選中的
<style>
	p：：first-letter{
		font-size：50px；
	}
	p：：first-line{
		background-color：yellow；
	}
	p：：selection{
		background-color：greenyellow；
	}
	div：：before{
		content：‘abc’；
		color：red；
	}
</style>

選擇器的優先級

CSS繼承

繼承是CSS的一個主要特征，它是依賴於祖先-后代的關系的。繼承是一種機制，它允許樣式不僅可以應用於某個特定的元素，還可以應用於它的后代。例如一個body定義了的字體顏色值也會應用到段落的文本中。

body {
  color: red;
}

此時頁面上所有標簽都會繼承body的字體顏色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

我們只要給對應的標簽設置字體顏色就可覆蓋掉它繼承的樣式。

p {
  color: green;
}

此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什么能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

選擇器的優先級

我們上面學了很多的選擇器，也就是說在一個HTML頁面中有很多種方式找到一個元素並且為其設置樣式，那瀏覽器根據什么來決定應該應用哪個樣式呢？

其實是按照不同選擇器的權重來決定的，具體的選擇器權重計算方式如下圖：

除此之外還可以通過添加 !important方式來強制讓樣式生效，但並不推薦使用。因為如果過多的使用!important會使樣式文件混亂不易維護。

萬不得已可以使用!important

盒子模型

CSS將頁面中的所有元素都設置為了一個矩形的盒子，每個盒子由以下幾個部分組成：

  • 內容區（content） 邊框（border） 內邊距（padding） 外邊距（margin）

一、邊框：

  1. 邊框寬度：

    • border-width可以用來指定四個方向的邊框的寬度

      • 值的情況：

        四個值 上 右 下 左
        三個值 上 左右 下
        兩個值 上下 左右
        一個值 上下左右

  2. 邊框顏色：

    • border-color的用法和border-width一樣，如果不想讓某一邊施加顏色，可以使用none

二、內邊距的規則和邊框一樣

三、外邊距的規則和邊框一樣

  1. 外邊距不會影響盒子可見框的大小，但會影響盒子的位置，會影響到盒子實際占用空間
  2. margin也可以設置負值

四、水平布局：

  1. 元素在父元素中水平方向的位置有如下等式：

    margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=父元素內容區寬度

    • 七個值中有三個值width、margin-leift、margin-right的情況

      某個值為auto 自動調整auto那個值
      將一個寬度和一個外邊距設置成auto 寬度會調整到最大
      將三個值都設置為auto 外邊距都是0，寬度最大
      將兩個外邊距設置為auto，寬度固定值 兩個外邊距取平均值

五、垂直布局

  1. 如果子元素的大小超過了父元素，則子元素會從父元素中溢出，使用overflow屬性來設置父元素如何處理

    • 可選值：

      visible 默認值 子元素會從父元素中溢出，在父元素外部顯示
      hidden 溢出的內容將會被裁剪
      scrool 生成兩個滾動條，通過滾動條查看內容
      auto 根據需要生成滾動條

六、display用來設置元素顯示的類型

inline 設置為行內元素
block 設置為塊元素
inline-block 行內塊元素既可以設置寬度和高度有不會獨占一行
table 設置為一個表格
none 元素不在頁面中顯示
flex 設置彈性盒子 
visibility 用來設置元素的顯示狀態
hidden 元素在頁面中隱藏不顯示，但依然占據頁面的位置
visible 默認值，元素在頁面中正常顯示

輪廓、陰影、圓角

  1. 輪廓

    outline用來設置元素的輪廓線，用法和border一樣

    輪廓和邊框類似，但不同點是，輪廓不會影響可見框的大小

    .box1{
	outline:10px red solid;
}
復制代碼

  2. 陰影(box-shadow)

    .box1{
	box-shadow:20px 20px 20px red;
}
復制代碼
    第一個值 水平偏移量，正值向右偏移
    第二個值 垂直偏移量，正值向下偏移
    第三個值 陰影的模糊半徑
    第四個值 陰影的顏色

  3. 圓角（border-radius，單位：px）

    四個值 左上 右上 右下 左下
    三個值 左上 右上左下 右下
    兩個值 左上右下 右上左下

浮動（float）

  1. 通過浮動可以使一個元素向其父元素的左側或右側移動

    • 可選值：

      none 默認值，元素不浮動
      left 元素向左浮動
      right 元素向右浮動

    • 元素浮動以后，會完全從文檔流中脫離，不再占用文檔流的位置，所以元素下邊的還在文檔流中的元素會自動向上移動

  2. 脫離文檔流的特點：

    塊元素 不再獨占頁面一行，寬度和高度都默認被內容撐開
    行內元素 變成塊元素，特點和塊元素一樣

高度塌陷問題以及解決方法

利用clearfix樣式可以同時解決高度塌陷問題和外邊距重疊問題：

.clearfix::before,
.clearfix::after{
	content:'';
	display:table;
	clear:both;
}

定位（position）

可選值：

static 默認值，元素是靜止的沒有開啟定位
relative 開啟元素的相對定位
absolute 開啟元素的絕對定位
fixed 開啟元素的固定定位
sticky 開啟元素的粘滯定位

  1. 相對定位（參照物是相對於沒開啟定位的自身）：

    • 特點：

      • 相對定位是參照元素在文檔流中的位置進行定位的
      • 相對定位會提升元素的層次
      • 相對定位不會使元素脫離文檔流
      • 相對定位不會改變元素的性質（塊還是塊，行內還是行內）
      • 其他沒有設置定位的元素不會隨設置定位的元素位置的改變而改變

    • 設置偏移量

      • 元素開啟相對定位后必須設置偏移量（元素開始位置設置為（0,0），向右向下為正）：

        top 定位元素和定位位置上邊的距離
        bottom 定位元素和定位位置下邊的距離
        left 定位元素和定位位置左側的距離
        right 定位元素和定位位置右側的距離 
    •   .box1{
      position:relative;
      left:200px;
      top:-200px;
  }               //向右向下方向為正
復制代碼

  2. 絕對定位：

    （絕對定位：1.父元素或祖先元素沒有設定 定位，則絕對 對瀏覽器左上角。否則絕對 對離自己最近的有定位的父元素或者祖先元素）

    • 特點：
      • 開啟后，元素會從文檔流中脫離，這樣就不會占用頁面內容
      • 絕對定位會改變元素的性質（行內變成塊，塊的寬高被內容撐開）
      • 使元素提升一個層次
      • 它是相對於其包含塊定位的
    • 包含塊的理解：
      • 通常情況下，包含塊就是離當前元素最近的祖先塊元素
      • 開啟以后，如果設置 left：0 top：0 則定位元素默認在包含塊左上角處
      • 如果所有祖先元素都沒有開啟定位，則 html（根元素）就是它的包含塊（即瀏覽器頁面的左上角）
    • 當開啟以后，
      • 水平方向的布局等式就需要添加left和right兩個值，此時規則和之前內容只是多添加了left和right
      • 當發生過度約束時，如果9個值中沒有auto則自動調整right值以使等式滿足
      • 可設置auto的值： margin width left right
      • 垂直方向的布局的等式也必須滿足

  3. 固定定位：

    • 固定定位的大部分特點和絕對定位一樣
    • 唯一不同的是固定定位永遠參照語瀏覽器的視口（可視區域）來定位,即固定定位的元素不會隨着網頁的滾動條的滾動而變化

  4. 粘滯定位：

    • 粘滯定位和相對定位的特點基本一樣
    • 不同的是粘滯定位可以在元素到達某個位置時將其固定

  5. 元素的層級

    • 對於開啟了定位元素，可以通過

      z-index屬性

      來指定元素的層級

      • z-index需要一個整數作為參數,值越大元素的層級越高
      • 如果元素的層級一樣，則優先顯示靠下的元素
      • 祖先元素的層級再高也不會蓋住后代元素

字體、行高

  1. 字體相關的樣式：

  • font-family 字體族（字體的格式）

    可選值：

    serif 襯線字體
    sans-serif 非襯線字體
    monospace 等寬字體

  • font-face 可以指定字體的名字

    @font-face {
  font-family:'myfont';
  src: url('路徑');
 }
復制代碼

  • font-weight 字重，字體的加粗

    可選值：

    normal 默認值 不加粗的字符
    bold 加粗的字符
    bolder 更粗的字符
    lighter 更細的字符

  1. 引入圖標字體的幾個方法：

    • 第一種：使用圖標，我們可以通過 font-face 的形式來對字體進行引入
    <i class="fab/fas 圖標樣式" style="…"></i>
復制代碼
    • 第二種：利用偽類：
    li::before{
    content:'\f1b0';
    font-family:(在css中找到字體的格式)
}
復制代碼

    • 第三種：

      通過實體：  &#x圖標編碼

      ；

      • 例如： class = "fas">&#xfof3;
      • 如果是從阿里雲里面找的圖標，則將 fas 替換成 iconfont

  2. 水平和垂直對齊：

    • text-align 文本的水平對齊

      left 左對齊
      right 右對齊
      center 居中
      justify 兩端對齊

    • vertical-align 文本的垂直對齊

      baseline 默認值 基線對齊
      top 頂部對齊
      bottom 底部對齊
      middle 居中對齊

  3. 其他文本樣式：

    • text-decoration 設置文本修飾

      可選值：

      none 默認值，無
      underline 下划線
      line-through 刪除線
      overline 刪除線

    • white-space 設置網頁如何處理空白

      normal 正常
      mowrap 不換行
      pre 保留空白

  4. 行高：指的是文字占有的實際高度 （line-height）

    • 行高可以直接指定一個大小（px em）

      也可以直接為行高設置一個整數（行高是字體的指定的倍數）

      行間距 = 行高 - 字體大小

    • 設置行高是為了使字體居中

圖片閃爍問題（雪碧圖）

解決圖片閃爍問題：

  • 可以將多個小圖片統一保存到一個大圖片中，然后通過調整background-position來顯示
  • 這個技術被稱為CSS-Sprite，我們稱之為雪碧圖

雪碧圖的使用步驟：

1. 先確定使用的圖標
2. 測量圖標的大小
3. 根據測量的結果創建一個元素
4. 將雪碧圖設置為元素背景圖片
5. 設置一個偏移量（background-position）來顯示正確的圖片
復制代碼

背景、漸變

  1. background-image 設置背景圖片

  • 如果背景圖片小於元素，則背景圖片會自動在元素中鋪滿

  • 如果背景圖片大於元素，則一部分圖片無法顯示

    background-image ： url（“./img/1.png”）;
復制代碼
  1. background-repeat 用來設置背景的重復方式

  • 可選值：

    repeat 默認值，背景沿x軸，y軸雙向重復
    repeat-x 只沿x軸方向重復
    repeat-y 只沿y軸方向重復
    no-repeat 不重復
  1. background-position 用來設置背景圖片的位置

  • 設置方式：

    • 通過top left right bottom center來設置
    • 使用時必須同時設置兩個值，如果只寫一個值則表示第二個值默認是center

  • 也可以通過偏移量來設置位置

    background-position：50px 50px；   //分別表示水平和垂直方向的偏移量（向右、向下為正）
復制代碼
  1. 設置背景范圍

  • backround-clip

    可選值：

    border-box 默認值，背景會出現在邊框的下邊
    padding-box 背景不會出現在邊框，只會出現在內容區和內邊距
    content-box 背景只會出現在內容區

  • background-origin 背景圖片的偏移量計算的原點

    可選值：

    • padding-box 默認值，background-position 從內邊距處開始計算

    • content-box 背景圖片的偏移量從內容區處計算

    • border-box 背景圖片的變量從邊框處開始計算

      padding-box 默認值，background-position 從內邊距處開始計算
      content-box 背景圖片的偏移量從內容區處計算
      border-box 背景圖片的變量從邊框處開始計算
  1. background-size 設置背景圖片的大小

  • 第一個值表示寬度，第二個值表示高度，如果只寫第一個，則第二個值默認為auto

    cover 圖片的比例不變，將元素鋪滿
    contain 圖片比例不變，將圖片在元素中完整顯示
  1. background-attachment

  • 背景圖片是否跟隨元素移動

    scroll 默認值，背景圖片會跟隨元素移動
    fixed 景會固定在頁面中，不會隨元素移動
  1. background背景相關的簡寫屬性，所有背景相關的樣式都可以通過該樣式來設置，並且該樣式沒有順序要求，也沒有必須寫的屬性
    • 注意：
      • background-size 必須寫在background-position的后邊，並且使用 / 隔開
      • background-origin background-clip 兩個樣式，orgin要在clip的前
  2. 線性漸變

  • 通過線性漸變可以設置一些復雜的背景顏色

  • inear-gradient（red yellow）紅色在開頭，黃色結尾，中間是過渡，也可以指定方向

    45deg 表示45度角漸變
    to ……（例：左） 向...漸變（例：左）

  • 重復漸變： repeating-linear-gradient

過渡（transition）

transition-property 所有屬性都過渡，則用all，沒有屬性過渡用none
transition-duration 指定過渡效果的持續時間（單位： s 和 ms）
transition-timing-function 過渡的時序函數，指定過渡的3、執行方式
transition-delay 過渡效果的延遲，等待一段時間后再執行過渡
transiotion 可以同時設置過渡相關的所有屬性，只有一個要求，如果要寫延遲，則兩個時間中第一個是持續時間，第二個是延遲

  • transition-timing-function的可選值：

    ease 默認值，慢速開始，先加速，再減速
    linear 勻速運動
    ease-in 加速運動
    ease-out 減速運動
    ease-in-out 先加速，后減速
    cubic-bezier() 指定時序函數
    steps 分步執行過渡效果，參數end 在時間結束時執行過渡（默認值），參數start 在時間開始時執行過渡

動畫

動畫和過渡類似，都是可以實現一些動態的效果，不同的是過渡需要在某個屬性發生變化時才會觸發，動畫可以自動觸發

設置動畫效果，必須先要設置一個關鍵幀，關鍵幀設置了動畫執行每一個步驟

@keyframes test{
     from{
		margin-left：0；
	}
     to{
		margin-left：700px；
       }
}

復制代碼

設置動畫：

animation-name 當前元素生效的關鍵幀的名字
animation-duration 動畫執行時間
animation-delay 動畫的延時
animation-timing-function 動畫的時序函數，用法和過渡一樣
animation-iteration-count 動畫執行的次數。可選值：1.次數；2. infinite 無限執行
animation-direction 指定動畫運行的方向
animatio-play-state 設置動畫的執行狀態。可選值:1.running 默認值，動畫執行; 2.paused 動畫暫停
animation-fill-mode 動畫的填充模式

  • animation-fill-mode 的可選值：

    none 默認值，動畫執行完畢元素回到原來位置
    forwards 動畫執行完畢元素會停止在動畫結束的位置
    backwards 動畫延時等待時，元素就會處於開始位置
    both 結合了forwards和backwards

  • animation-direction 的可選值：

    normal 默認值，從 from 向 to 運行
    reverse 從 to 向 from 運行
    alternate 從 from 向 to 運行，重復執行時反向
    alternate-reserve 從 to 向 from 運行，重復執行時反向

變形、平移、旋轉

  1. 變形不會影響到頁面的布局

    • transform： 用來設置元素的變形效果

      • 平移：

        translateX() 沿着x軸平移
        translateY() 沿着y軸平移
        translateZ() 沿着z軸平移

  2. Z軸平移：

    • 正常情況就是調整元素和人眼的距離，距離越大，距離人越近

    • Z軸平移屬於立體效果，默認情況網頁不支持透視，如果需要看到效果必須設置網頁（html）的視距

      html{
	perspective：××px；
}
.box1{
	transform:translateZ(××px)；
}
復制代碼

  3. 旋轉：通過旋轉可以使元素沿着x y或z旋轉指定的角度

    rotateX() 沿x軸旋轉指定的角度
    rotateY() 沿y軸旋轉指定的角度
    rotateZ() 沿z軸旋轉指定的角度
    • 例如：沿y軸旋轉180度：
    transform：rotateY（180deg）；
backface-visibility：hidden；      //設置是否顯示元素的背面
復制代碼

  4. 縮放：

    • 對元素進行縮放的函數：

      scaleX() 水平方向縮放
      scaleY() 垂直方向縮放
      scaleZ() 雙方向的縮放

less用法

  1. less是一門css的預處理語言

    • 它是css的增強版，通過less可以編寫更少的代碼實現更強大的樣式
    • 在less中添加了許多新特性，像對變量的支持，對mixin的支持……
    • less的語法大體上和css語法一致，但是less中增添了許多對css的擴展，所以瀏覽器無法直接執行less代碼，要執行必須先將less轉換為css，然后由瀏覽器執行

  2. 例如：

    html{
	--color:#bfa;
}
.box1{
	color:var(--color);
}         //設置一個關於顏色的函數，方便使用

calc（100px/2）     //設置一個計算函數

div{
	width：200px；
	height：$width；
}        		 //使height和width的值相同
復制代碼

  3. less中的單行注釋 // 不會被解析到css中

  4. 變量：

    • 在變量中可以存儲任意的值，並且我們可以在需要時，任意修改變量中的值
    • 語法： @變量名
    • 例如： @a：200px；
    • 若變量是類名，或者一部分值使用時必須以@{變量名}的形式使用
    • 變量發生重名時，會優先使用比較近的變量（就近原則）

  5. 常用的變量使用：

    • & 表示外層的父元素
    .box1{
	&:hover{}
}                 //表示box1的hover屬性
復制代碼
    • extend（） 對當前的選擇器擴展指定選擇器的樣式（選擇器分組）
    p2:extend(.p1){
	color:red;
}                 //表示p2不僅有p1的所有樣式，而且還有color屬性
復制代碼
    • 復制樣式：
    .p3{
	.p1();
}                     //表示p3復制了p1的所有樣式
                      // mixin 混合
復制代碼
    • 使用類選擇器是可以在選擇器后邊添加一個括號，這是我們實際上就創建了一個mixins
    .p4(){
     width:100px;
     height:100px;
}
.p5{
	.p4;
}
復制代碼
    • average函數可以將兩個color參數取平均值：
    span{
	color：average（red，blue）；
}
復制代碼
    • darken可以將已有顏色加深：
    background-color：darken（#bfa，10%）；
復制代碼
    • 在less中所有的數據可以直接進行運算：
    width：100px + 100px；
復制代碼
    • 可以通過 @import來 將其他的less文件引入到當前的less文件中：
    @import“××.less”;
復制代碼

彈性盒

  1. flex（彈性盒）
    • 是css中的有一種布局手段，它主要用來代替浮動來完成頁面的布局
  • flex可以使元素具有彈性，讓元素可以跟隨頁面的大小的改變而改變

  1. 彈性容器：

    • 要使用彈性盒，必須先將一個元素設置為彈性容器

    • 我們通過 display 來設置彈性容器

      display：flex 設置為塊級彈性容器
      display：inline-flex 設置為行內的彈性容器

  2. 彈性元素：

    • 彈性容器的子元素是彈性元素
    • 一個元素可以同時是彈性容器和彈性元素

  3. flex-direction 指定容器中彈性元素的排列方式

    • 可選值：

      row 默認值，彈性元素在容器中水平排列
      row-reverse 彈性元素在容器中反向水平排列
      column 彈性元素縱向排列
      column-reverse 彈性元素反向縱向排列

  4. 主軸：彈性元素的排列方向稱為主軸

    側軸：與主軸垂直方向的稱為側軸

  5. 彈性元素的屬性：

    flex-grow 指定彈性元素伸展系數，父元素的剩余空間會按照比例進行分配
    flex-shrink 指定彈性元素的收縮系數，當父元素中的空間不足以容納所有的子元素時，會對子元素進行收縮

    例如：

    flex-grow：1；
flex-shrink：0；
復制代碼

  6. flex-wrap：

    設置彈性元素是否在子元素溢出時彈性容器自動換行

    • 可選值：

      nowrap 默認值，元素不會自動換行
      wrap 元素沿着輔軸方向自動換行
      wrap-reverse 元素沿着輔軸反向換行

  7. justify-content 設置主軸上的元素如何排列（如何分配主軸上的空白空間）

    • 可選值：

      flex-start 元素沿着主軸起邊排列
      flex-end 元素沿着主軸終邊排列
      center 元素居中排列
      space-around 空白分布到元素兩側
      space-between 空白均勻分布到元素間
      space-evenly 空白分布到元素的單側

  8. align-items 元素在輔軸上如何對齊

    • 可選值：

      stretch 默認值，將元素的長度設置為相同的值
      flex-start 元素不會拉伸，沿着輔軸起邊對齊
      flex-end 沿着輔軸的終邊對齊
      center 居中對齊
      baseline 基線對齊

  9. align-self 用來覆蓋當前彈性元素上的align-items

    align-self：stretch；
復制代碼

  10. flex 可以設置彈性元素所有的三個樣式：增長 縮減 基礎

    • 可選值：

      initial 增長
      auto 縮減
      none 基礎

  11. order 樣式可以設置幾個相同的元素的排列順序：

    li:nth-child(1){
	order:2;
}
li:nth-child(2){
	order:1;
}
li:nth-child(3){
	order:3;
}                   // 則順序為第二個、第一個、第三個


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 HTML&CSS學習總結（一） HTML&CSS精選筆記_表格與表單 HTML&CSS 案例 HTML&CSS精選筆記_列表與超鏈接 前端學習 -- Html&Css -- 層級和透明度 HTML&CSS基礎-絕對定位 html&css靜態頁面 HTML&CSS實驗(4)---學習CSS選擇器的使用方法 【HTML&CSS】【8】HTML空格占位符 HTML&CSS基礎-框架集
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM