前端(二)-CSS

来源:https://www.cnblogs.com/xiaoqigui/archive/2022/07/05/16445076.html
-Advertisement-
Play Games

1、樣式 1.1 行內樣式 <h1 style="color:red;">行內樣式</h1> 1.2 內部樣式 CSS代碼寫在 <head> 的 <style> 標簽中 <style> h1{color: green; } </style> 1.3 外部樣式 <link rel="styleshee ...


1、樣式

1.1 行內樣式

<h1 style="color:red;">行內樣式</h1>

1.2 內部樣式

CSS代碼寫在 <head> 的 <style> 標簽中
<style>
	h1{color: green; }
</style>

1.3 外部樣式

<link rel="stylesheet" href="css/style01.css" type="text/css"/>
<!--
外部樣式，引入使用link標簽，寫在head標簽中,是單標簽，但是rel屬性和href屬性是必須的，且rel="stylesheet"是固定的引入外部樣式才可以生效,href屬性指定外部文件的資源路徑，type="text/css"可以省略;
-->

1.4 CSS優先順序

  • 就近原則;

2、選擇器

2.1 基本選擇器

2.1.1 標簽選擇器

<!--
選擇器，基本作用是用於定位網頁中的元素，進行樣式美化，選取的是一組元素，不是一定是單個；
標簽選擇器，語法：標簽名{聲明1：聲明2...}
-->/
h2{
	color: #FF0000;
}

2.1.2 類選擇器

<!--類選擇器，語法：標簽的class屬性值{聲明1：聲明2...} -->
.author{
	color: #00FF00;
}

2.1.3 id選擇器

<!-- id選擇器 語法：標簽的id屬性值{聲明1：聲明2...} -->
#conent{
color: #0000FF;
}

2.1.4 選擇器的優先順序

ID選擇器 > 類選擇器 > 標簽選擇器

2.2 高級選擇器

2.2.1 層次選擇器

選擇器 類型
E F 後代選擇器
E>F 子選擇器
E~F 通用兄弟選擇器
E+F 相鄰兄弟選擇器

2.2.2 結構偽類選擇器

結構偽類選擇器 功能描述
E:first-child 父元素的第一個子元素
E:last-child 父元素的最後一個子元素
E F:nth-child(n) 父元素的第nth的子元素(括弧裡面的n可以是1，2，3 even,odd)
E:first-of-tyope 父元素指定類型的第一個子元素
E:last-of-type 父元素指定類型的最後一個子元素
E F:nth-of-type(n) 父元素指定類型的第nth的子元素

2.2.3 屬性選擇器

屬性選擇器 功能描述
E[attr] 選擇具有屬性attr的元素
E[attr=val] 選擇具有屬性attr的元素，且屬性值為val的元素
E[attr^=val] 選擇具有屬性attr的元素，且屬性值以val開頭的元素
E[attr$=val] 選擇具有屬性attr的元素，且屬性值以val結尾的元素
E[attr*val] 選擇具有屬性attr的元素，且屬性值中包含val的元素

3、美化網頁元素

3.1 dispaly 行內元素與塊元素的切換

屬性 說明
display:block 將元素顯示為塊元素，前後有換行符
display:inline 將元素顯示為內聯(行內)元素，前後沒有換行符
display:inlineblock 將元素顯示為行內塊元素
display:none 將元素隱藏

3.2 字體樣式

屬性 說明
font-family 設置字體類型(字體)
font-size 設置字體大小
font-style 設置字體風格
font-weight 設置字體粗細
font 設置字體的所有屬性（字體風格→字體粗細→字體大小→字體類型）

字體的粗細

值 說明
normal 預設值，定義標準的字體
bold 粗體字體
bolder 更粗體字體
lighter 更細體字體
100,200,300,400,500,600,700,800,900 定義由細到粗的字體400等於normal,700等於bold

3.3 文本樣式

屬性 說明
color 文本顏色
text-align 元素水平對其方式
text-indent 首行文本的縮進
line-heighr 文本的行高
text-decoration 文本的裝飾

3.3.1 color

  • RGB
  • RGBA

3.3.2 text-align

元素水平對其方式

值 說明
left 把文本排列到左邊
right 把文本排列到右邊
center 把文本排列到中間
justify 實現兩端對齊文本效果

3.3.3 text-indent

  • 首行縮進：text-indent：em或px；

3.3.4 line-heighr

  • 行高：line-height：px；

3.3.5 text-decoration

值 說明
none 去除預設樣式
underline 下劃線
overline 上劃線
line-through 刪除線

3.3.6 vertical-align 垂直對其方式

常用圖片與文字垂直對其；

image-20220630165214398

值 說明
middle 垂直居中
top 頂部
bottom 底部 
<!-- 圖片與文字居中 -->
img,span{
	vertical-align: middle;
}

3.4 文本陰影

<!-- text-shadow:顏色 x軸 y軸 陰影半徑  -->
text-shadow:color x-offset v-offset blur-radlus

3.5 超鏈接偽類

偽類名稱 說明
a:link 未點擊訪問時超鏈接樣式
a:visited 單擊訪問後超鏈接樣式
a:hover 滑鼠懸浮其上的超鏈接樣式
a:avtive 滑鼠單機未釋放的超鏈接樣式
  • 設置偽類的順序：alink->a:visited->a:hover->a:active;

3.6 列表樣式

  • list-style-type
  • list-style-image
  • list-style-position
  • list-style
值 說明
none 清除預設樣式
disc 實心圓
circle 空心圓
square 實行正方形
decimal 數字
  • list-style:none;常用於去除無序列表的小黑點

3.7 背景樣式

2.7.1 常見背景樣式

  • 背景圖片，background-image
  • 背景顏色，background-color

2.7.2 設置背景圖像

2.7.2.1 background-Image屬性
  • background-image:url(圖片路徑);
2.7.3.2 background-repeat屬性
值 說明
repeat 沿水平和垂直兩個方向平鋪
no-repeat 不平鋪，即只顯示一次
repeat-x 只沿水平方向平鋪
repeat-y 只沿垂直方向平鋪
2.7.3.3 background-position屬性
值 說明
Xpos Ypos 單位px
X% Y% 使用百分比
X,Y方向關鍵詞 left,center,right,top,center,bootom
2.7.3.4 簡寫
  • background: 背景顏色 背景圖像 背景定位 背景不重覆顯示；
2.7.4.4 background-size
值 說明
auto 保持原樣
percentage 百分比
cover 放大填充整個元素
contain 保持比例，縮小到正好可以放

3.8 CSS漸變樣式

  • background-image:linear-gradient(position,color1 color2...) posotion:漸變方向(可以時任意角度，向上的0deg)

4、盒子模型

4.1 盒子模型元素

元素 說明
margin 外邊距
border 邊框
padding 內邊距
height 高
width 寬

4.2 邊框

4.2.1 border-color

邊框顏色；

屬性 說明
border-top-color 上邊框
border-right-color 右邊框
border-bottom-color 下邊框
border-left-color 左邊框
border-color 上 右 下 左

4.2.2 border-width

邊框粗細；

  • border-width-上 右 下 左

4.2.3 border-style

邊框樣式；

  • border-style-上 右 下 左
值 說明
none 清除預設樣式
dotted 點線
dashed 破折線
double 雙實線

4.2.4 簡寫

  • border:粗細 樣式 顏色；

4.3 內外邊框

4.3.1 margin 外邊距

  • margin-top
  • margin-right
  • margin-bottom
  • margin-left

4.3.2 外邊距妙用

  • 外邊距妙用，網頁居中對齊：margin:0px auto;

  • 網頁居中對齊條件：1.塊元素 2.固定寬度

4.3.3 padding 內邊距

  • padding-left
  • padding-right
  • padding-top
  • padding-bottom

4.4 圓角邊框

  • border-radius: 左上 右上 右下 左下

4.5 盒子陰影

  • box-shadow:shadowtype x-offset y-offset blur-radus color;

    shadowtypetype:陰影類型(預設外陰影，inset內陰影)；

5、浮動

5.1 display屬性

值 說明
block 塊級元素的預設值，元素會被顯示為塊級元素，該元素前後會帶有換行符
inline 內聯元素的預設值。元素會被顯示為內聯元素，該元素前後沒有換行符
inline-block 行內塊元素，元素既有內聯元素的特性，又有塊元素的特性
none 元素隱藏

5.2 浮動

  • float屬性
值 說明
left 元素向左浮動
right 元素向右浮動
none 不浮動

5.3 清除浮動

  • clear屬性
值 說明
left 在左側不允許浮動元素
right 在右側不允許浮動元素
both 在左右兩側不允許浮動元素
none 允許

5.4 解決父級邊框塌陷的方法

5.4.1 添加空div,並清除兩邊浮動

5.4.2 設置父元素的高度(靈活性差)

5.4.3 添加overflow屬性(溢出處理)

屬性值 說明
visible 預設值，內容不會被修剪，會呈現在盒子之外
hidden 內容會被修剪，並且其餘內容是不可見的
scroll 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其他剩餘內容
auto 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其他剩餘內容

5.4.4 父級添加偽類after

<div id="father" class="clear">
    <div class="layer01"><img src="image/photo-1.jpg" alt="日用品" /></div>
    <div class="layer02"><img src="image/photo-2.jpg" alt="圖書" /></div>
    <div class="layer03"><img src="image/photo-3.jpg" alt="鞋子" /></div>
    <div class="layer04">浮動的盒子……</div>
</div>
    .clear:after{
    content: ''; <!--在clear類後面添加內容為空-->
    display: block; <!--把添加的內容轉化為塊元素-->
    clear: both; <!--清除這個元素兩邊的浮動-->
}

6、定位 posotion屬性

6.1 relative 相對定位

  • 相對自身原來位置進行偏移，偏移設置：top、left、right、bottom;

  • 相對定位的規律

    1.設置相對定位的盒子會相對它原來的位置，通過指定偏移，到達新的位置 ；

    2.設置相對定位的盒子仍在標準文檔流中，它對父級盒子和相鄰的盒子都沒有任何影響 ；

    3.設置相對定位的盒子原來的位置會被保留下來；

    4.浮動後，相對定位，相對於盒子浮動後的位置，進行定位，盒子原始位置不會保留；

6.2 absolute 絕對定位

  • absolute屬性值：偏移設置： left、right、top、bottom；

  • 絕對定位的規律

    1.使用了絕對定位的元素以它最近的一個“已經定位”的“祖先元素” 為基準進行偏移 ；

    2.如果沒有已經定位的祖先元素，會以瀏覽器視窗為基準進行定位 ；

    3.絕對定位的元素從標準文檔流中脫離，這意味著它們對其他元素的定位不會造成影響 ；

    4.元素位置發生偏移後，它原來的位置不會被保留下來；

    5.一般定位都是相對定位和絕對定位配合使用，父級元素先相對定位，子元素再絕對定位；

  • 使用場景：下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等場景；

6.3 fixed 固定定位

  • 偏移設置： left、right、top、bottom；

  • 類似絕對定位，不過區別在於定位的基準不是祖先元素，而是瀏覽器視窗；

  • 使用場景：在視窗左右兩邊的固定廣告、返回頂部圖標、吸頂導航欄等；

6.4 z-index屬性

  • 調整元素定位時重疊層的上下位置 ；

    1.z-index屬性值：整數，預設值為0 ；

    2.設置了positon屬性時，z-index屬性可以設置各元素之間的重疊高低關係 ；

    3.z-index值大的層位於其值小的層上方；

7、動畫

7.1 變形 transform

函數 說明
translate() 平移函數，基於X、Y坐標重新定位元素的位置
scale() 縮放函數，可以使任意元素對象尺寸發生變化
rotate() 旋轉函數，取值是一個度數值
skew() 傾斜函數，取值是一個度數值

translate（） 平移 px

transform:translate（x,y） 同時向x,y軸偏移
transform:translateX（x） 只向x軸偏移
transform:translateY（y） 只向y軸偏移

scale() 縮放 直接寫倍數

transform:scale(縮放倍數) 同時向x,y軸縮放，中心放大
transform:scaleX(縮放倍數) 只向x軸縮放，水平拉伸
transform:scaleY(縮放倍數) 只向y軸縮放，垂直拉伸

rotate() 旋轉 deg

transform:rotate(旋轉角度deg) 相對原來的位置順時針旋轉
transform:rotateX(旋轉角度deg) 相橫坐標順時針旋轉
transform:rotateY(旋轉角度deg) 相對原來的位置順時針旋轉

skew() 傾斜 deg

transform:skew(傾斜調度deg)
transform:skew(傾斜調度deg) 只設置x軸的傾斜
transform:skew(傾斜調度deg) 只設置y軸的傾斜

7.2 過度 transition

transition:[transition-property transition-duration transition-timing-function transition-delay]
transition-property 過度或動態模擬css屬性
transition-duration 完成過度所需要時間
transition-timing-function 指定過度函數
transition-delay 過度開始出現的延遲時間

7.2.1 過渡屬性（ transition-property ）

  • 定義轉換動畫的CSS屬性名稱

    1.IDENT：指定的CSS屬性（width、height、background-color屬性等） ；

    2.all：指定所有元素支持transition-property屬性的樣式，一般為了方便都會使用al；

7.2.2 過渡所需的時間（ transition-duration ）

定義轉換動畫的時間長度，即從設置舊屬性到換新屬性所花費的時間，單位為秒（s）；

7.2.3 過渡動畫函數（ transition-timing-function ）

指定瀏覽器的過渡速度，以及過渡期間的操作進展情況，通過給過渡添加一個函數來指定動畫 的快慢方式；

  • ease：速度由快到慢（預設值） ；
  • linear：速度恆速（勻速運動） ；
  • ease-in：速度越來越快（漸顯效果） ；
  • ease-out：速度越來越慢（漸隱效果）；
  • ease-in-out：速度先加速再減速（漸顯漸隱效果）；

7.2.4 過渡延遲時間（ transition-delay ）

指定一個動畫開始執行的時間，當改變元素屬性值後多長時間去執行過渡效果 ；

  • 正值：元素過渡效果不會立即觸發，當過了設置的時間值後才會被觸發 ；
  • 負值：元素過渡效果會從該時間點開始顯示，之前的動作被截斷 ；
  • 0：預設值，元素過渡效果立即執行；

7.3 過度的觸發機制

1.偽類觸發

  • ：hover 滑鼠懸停和划過時的顯示效果
  • ：active 控制按鈕被點擊時的顯示效果
  • ：focus 獲得聚焦對象的元素
  • ：checked 選中

2.媒體查詢：通過@media屬性判斷設備的尺寸，方向等 JavaScript觸發：

3.用JavaScript腳本觸發

特殊用法

<!-- 
在進行偽類觸發後還可以對指定標簽操作；點擊li的時候還可以改變span的背景色；
<li><span>1</span>  雅詩蘭黛即時修護眼部精華霜15ml</li>
-->
ul li:hover>span {
    background-color: aqua;
    border-color: aqua;
}

7.3 動畫

8、項目經常使用的幾個屬性

項目新用屬性

width: auto； 寬度自適應,可以決絕視窗縮放展示錯亂(用在頭部導航欄等)
border: 0px none; 剔除邊框(常用去掉input的邊框)
outline: none; 去除選中文本框的樣式(常用去掉，點擊輸入框時的邊框變藍)
cursor: pointer; 游標移入變成手(常用作按鈕的屬性)

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 如何搭建android源代碼repo倉庫
    如何搭建android源代碼repo倉庫 . 版本： v0.3 作者：河東西望 日期：2022-7-5 . 如果你的開發是基於AOSP源碼來建倉，那麼搭建repo伺服器和部署自己的repo倉庫就是非常必要的工作了。 現實中很多公司都是直接把AOSP源代碼放在一個git倉庫中來管理，這樣做沒什麼毛病。 ...
  • 無密碼身份驗證如何保障用戶隱私安全？
    在互聯網世界，驗證用戶身份是一個常見又重要的場景，應用最廣泛的方式當屬帳號密碼驗證。隨著開發者對身份驗證安全性要求不斷提升，加之用戶更加註重過程中的隱私與便捷，身份驗證的方式逐漸多樣化，有動態令牌、簡訊驗證碼、生物特征認證等方式。本文主要從安全性的角度，探討幾種常見身份驗證方式存在的安全漏洞，為開發 ...
  • JS 這次真的可以禁止常量修改了！
    本文簡介 點贊 + 關註 + 收藏 = 學會了 ES6 推出的 const 可以定義常量。在 JS 中，常量是不可改變的。這個 “不可改變” 指的是常量存放的記憶體地址不變。 眾所周知，使用 const 定義的常量，如果是基礎類型的數據，值不能變。但如果是引用類型的數據（比如對象、數組等），是可以修改 ...
  • uni-app 藍牙通信
    本文簡介 點贊 + 關註 + 收藏 = 學會了 這是一次真實的 藍牙收發數據 的全過程講解。 本文使用 uni-app + Vue3 的方式進行開發，以手機app的方式運行（微信小程式同樣可行）。 uni-app 提供了 藍牙 和 低功耗藍牙 的 api ，和微信小程式提供的 api 是一樣的，所以 ...
  • Matery主題自定義(一)黑夜模式
    黑夜模式 作為一個前端學習者，自然懂得黑夜模式的重要性，可惜主題原生未提供，那就自己弄吧 個人博客作為效果參考：https://jieniyou.github.io/ 設置基礎樣式 參考其他優秀產品的黑夜模式，得出共性： 那就是黑夜模式的背景一般不會是純黑（#000）；而是淡黑色，字體也不是純白（# ...
  • 記錄--JS精粹，原型鏈繼承和構造函數繼承的 “毛病”
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 先從面向對象講起，本瓜認為：面向對象編程，它的最大能力就是：復用！ 咱常說，面向對象三大特點，封裝、繼承、多態。 這三個特點，以“繼承”為核心。封裝成類，是為了繼承，繼承之後再各自發展（重寫），可理解為多態。所以，根本目的是為了繼承，即“ ...
  • 這18個網站能讓你的頁面背景炫酷起來
    這18個網站是我在取經路上意外發現的，裡面包括 純CSS 實現的炫酷背景，還有專門製作背景圖的網站。 算是取經路上的大補之物~ 1. CSS3 Patterns Gallery 🎗️ 傳送門：『CSS3 Patterns Gallery』 如果你認識 Lea Verou 的話，大概率知道這個網站， ...
  • 使用純 CSS 實現超酷炫的粘性氣泡效果
    最近，在 CodePen 上看到這樣一個非常有意思的效果： 這個效果的核心難點在於氣泡的一種特殊融合效果。 其源代碼在：CodePen Demo -- Goey footer，作者主要使用的是 SVG 濾鏡完成的該效果，感興趣的可以戳源碼看看。 其中，要想靈活運用 SVG 中的 feGaussian ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類