css篇

来源:https://www.cnblogs.com/jackw1/archive/2020/03/27/12582669.html
-Advertisement-
Play Games

，層疊樣式表，將網頁內容和顯示樣式分離，提高程式性能。 _它是一種專門描述結構文檔的表現方式的文檔，主要用於網頁風格設計，包括字體大小、顏色、以及元素的精確定位。在傳統的 網頁設計里，使得 能讓單調的 網頁更富表現力。_ 的引入方式 可以控制 文檔的顯示，但是控制文檔顯示之前，首先應在需要顯示的 文 ...


CSS

Cascading Style Sheet，層疊樣式表，將網頁內容和顯示樣式分離，提高程式性能。

它是一種專門描述結構文檔的表現方式的文檔，主要用於網頁風格設計，包括字體大小、顏色、以及元素的精確定位。在傳統的web網頁設計里，使得css能讓單調的html網頁更富表現力。

**`css`的引入方式**

css可以控制html文檔的顯示，但是控制文檔顯示之前，首先應在需要顯示的html文檔中引入css樣式表，html提供了以下四種引入方式：

（1）內聯樣式：將樣式內聯定義到具體的html元素上，利用元素的style屬性實現，通用用於精確控制一個html元素的表現。

<!-- 內聯樣式：將css代碼寫在html具體的元素的style屬性內 -->
<p id="p1" style="color: red; font-size: 16px">內聯樣式</p>

（2）內部樣式：通常在html文檔頭部定義樣式單部分來實現，這種方式下每批css樣式只控制一份html文檔。

<!-- 內部樣式：將css代碼寫在<head>里的<style>標簽內實現 -->
<style type="text/css">
	#p2{
		color: blue;
		font-size: 20px;
	}
</style>

（3）外鏈樣式：樣式文件和html文檔分離，樣式文件需要額外引入，這種方式下每批css樣式能控制多份html文檔（最常用）。

<!-- 外鏈樣式：利用link標簽引入，使用頻率最高 -->
<link rel="stylesheet" type="text/css" href="outer.css" />

（4）導入外部樣式：和第三種方式類似，只是使用@import來引入外部樣式表文件。

<!-- 導入外部樣式：與link方法類似，語法不通，在<style>標簽內使用 -->
<style type="text/css">
	@import "outer.css'";
	@import url("outer.css");
</style>

優先順序：內聯樣式style> 內部樣式 > 導入外部樣式import > 外鏈樣式link

**`css`常用選擇器介紹**

定義css樣式的語法總遵循如下格式：

Selector{
	property1: value1;
	property2: value2;
}

Selector：選擇器，決定該樣式的定義對哪些元素起作用
{property:value...}：屬性定義，決定這些樣式起怎樣的作用（字體、顏色、佈局等）

標簽選擇器：聲明哪種標簽會使用該css樣式

/* E{....}，其中E代表有效的html元素 */
a{
	background-color: blue;
	color: red;
}

class選擇器：聲明特定class值的標簽會使用該css樣式（一個標簽可以設置多個class值）

/* [E].classValue{....}，其中E表示html元素，當E存在時，指定的範圍是標簽為E且屬性class的值為classValue，不存在時，範圍是標簽屬性class的值為classValue */
.p2{
	background-color: yellow;
	color: gray;
}

id選擇器：聲明特定id值的標簽會使用該css樣式（一個標簽只能設置一個id值）

/* [E]#idValue{....}，同class選擇器概念，E可存在或不存在 */
#id1{
	background-color: gray;
	color: white;
}

組合選擇器：將具有相同css樣式的選擇器，一次性聲明（不限於標簽選擇器，class選擇器和id選擇器也可以組合）

/* Selector1, Selector2, Selector3{....}，Selector都是有效的選擇器，可以是標簽選擇器、class選擇器、id選擇器等 */
span, b, #id1{
	color: red;
}

嵌套選擇器：也叫關聯選擇器（不只是標簽選擇器能嵌套，class選擇器和id選擇器也可以）

/* Selector1 Selector2{....}，Selector都是有效的選擇器，表示當前需要設定樣式的範圍是Selector1選擇器下所有的Selector2選擇器*/
div p{
	background-color: green;
	color: white;
}
**常用的`css`屬性介紹**

字體
font-family：規定文本的字體系列，如"serif"、"sans-serif"等
font-size：規定文本的字體尺寸
font-style：規定文本的字體樣式，主要有normal,italic,oblique
font-weight：規定字體的粗細，主要有normal,bold,自定義粗細

文本
color：設置文本顏色
letter-spacing：設置字元間距（每個字母間的間距）
line-height：設置文本行高
text-align：設置文本的對齊方式，只有left, right, center
text-decoration：設置文本的裝飾效果，主要有overline（上劃線）, underline（下劃線）, line-through（刪除線）
text-indent：設置文本看首行縮進
text-transform：設置文本的大小寫，主要有uppercase, lowercase, capitalize
word-spacing：設置單詞間距

邊框
border：在一個聲明中設置所有的邊框屬性
border-color：設置四條邊框的顏色
border-style：設置四條邊框的樣式，只要有dotted, solid, double, dashed等值
border-width：設置四條邊框的寬度
邊框分為：border-left、border-right、border-top、border-bottom
border-left：在一個聲明中設置所有左邊框屬性，對應還有border-right等
border-left-color：設置左邊框顏色
border-lelft-style：設置左邊框樣式
border-left-width：設置左邊框寬度

可以將屬性一次性寫在一起，更方便
border: 10px red solid;

背景
background：在一個聲明中設置所有的背景屬性
background-attachment：設置背景圖像是否固定或者隨著頁面的其餘部分滾動，主要有fixed和scroll兩個值
background-color：設置元素的背景顏色
background-image：設置元素的背景圖片，主要有url和none兩個屬性
background-position：px, % 設置背景圖像的開始位置，可以指定top left等，也可以指定具體的像素位置
background-repeat：設置是否及如何重覆背景圖像，主要有repeat, repeat-x, repeat-y, no-repeat

列表
list-style：在一個聲明中設置所有的列表屬性，設置成none可以去掉ul中的原點等屬性值
list-style-image：將圖像設置為列表項標記，主要有url值
list-style-position：設置列表項標記的放置位置，主要有outside和inside兩個值
list-style-type：設置列表項標記的類型，主要有disc, circle, square, decimal等，不能和list-style-image同時使用

表格
border-collapse：設置是否把表格邊框合併為單一的邊框，值為collapse
border-spacing：設置分割單元格邊框的距離，與border-collapse不能同時使用
caption-side：設置表格標題的位置
empty-cells：設置是否顯示表格中的空單元格，值為hide, show

常用偽類別屬性
<a>超鏈接標簽
a:link 超鏈接的普通樣式
a:visited 被點擊過的超鏈接樣式
a:hover 滑鼠指針經過超鏈接上時的樣式
a:active 在超鏈接上單擊時，既"當前激活"時超鏈接的樣式

塊級標簽->行級標簽：display:inline
行級標簽->塊級標簽：display:block
註：行級標簽是預設情況下是不能設置寬度和高度的，如果要設置，需要把行級標簽變成塊級標簽

**盒子模型**

我們可以把頁面中的元素都可以看作一個盒子，占據著一定的頁面空間，這些占據的空間往往比單純的內容要大，換句話說，我們可以調整盒子的邊框和距離的參數來調整盒子的位置。

盒子寬度：content+padding+border+margin

因此我們可以利用好盒子的這些屬性，就能很好的實現各種各樣的排版效果。

border屬性主要有3個，border-color, border-width, border-style，通常在設置border時常常將3個屬性進行很好的配合，才能達到良好的效果。

padding用於控制content與border之間的距離。
padding：一次性將四個邊距全部設置（上右下左，順時針）
padding-top：上邊距
padding-bottom：下邊距
padding-left：左邊距
padding-right：右邊距

margin指的是元素與元素之間的距離。
margin：一次性將四個邊距全部設置（上右下左，順時針）
margin-top：上邊距
margin-bottom：下邊距
margin-left：左邊距
margin-right：右邊距

註：

  • 兩個行級元素之間的距離是margin-left和margin-right兩者的和，兩個塊級元素之間的距離不是margin-top和margin-bottom的和，而是兩者之中的較大值。
  • 其實margin除了設置正數以外，也可以設置負數，當設置為負數時，會使得塊向反方向移動，甚至覆蓋在另外的塊上。
  • 當塊之間是父子關係，通過設置子塊的margin為負數時，可以使得子塊從父塊中"分離出來"
**元素的定位**

網頁中各個元素都必須有自己的位置，從而搭建出整個頁面的結構。
float：值為left, right或者預設值none，當設置了元素向左浮動或向右浮動時，元素會向其父元素的左側或右側靠近
clear：設置塊元素的clear屬性清除對float的影響，值為left, right, both
position：制定塊的位置，即塊相對於其父塊的位置和相對它自身應該在位置，值有absolute, fixed, relative, static
當將子塊的position設置為absolute時，子塊已經不再從屬於父塊，其邊框設置的距離是相對頁面body的距離，而不是父塊的距離
當將塊的position參數設置為relative時，與將其設置為absolute時完全不同，這時子塊時相對於自身在父塊的原先位置來進行定位的。

定位資料參考：http://www.cnblogs.com/dolphinX/archive/2012/10/13/2722501.html


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

-Advertisement-
Play Games
更多相關文章
  • 🎉好消息！Android 模擬器可以運行 ARM 應用了
    作為 Android 11 開發者預覽版的一部分，Google 已經發佈了 "Android 11 系統鏡像" ，它們能夠執行 ARM 二進位文件，性能得到了顯著提升。 以前，依賴於 ARM 庫而無法構建 x86 變體應用程式的開發人員要麼必須使用具有完全 ARM 模擬的系統映像，這比在基於 x86 ...
  • Flutter 使用阿裡巴巴icon庫
    在Flutter預設創建的項目中可以使用系統Material圖標，在 文件中使用圖標設置如下： 系統圖標如下： 如果這裡面沒有我們想要的圖標如何處理呢？這時可以使用第三方圖標庫，下麵以 "阿裡巴巴的圖標" 庫為例。 查找圖標並加入購物車 找到自己想要的圖標後，將滑鼠放置到圖標上，加入購物車，如下圖： ...
  • android中通過kotlin使用WebView（二）
    本文記錄如何讓網頁中的JS代碼和APP進行交互，簡單的說就是如何在網頁中執行APP的代碼。下麵以在網頁中執行代碼打開撥號鍵盤並輸入電話號碼為例介紹如何實現。 一、設置WebView允許它執行js代碼。 二、通過調用WebView的addJavascriptInterface添加一個對象給js使用，添 ...
  • table邊框表頭單元格空間合併等設置
    表格和邊框屬性, 表格表頭單元格，表格標題<caption>，表格高度和寬度，表格背景，表格空間，合併單元格，表格頭部、主體、頁腳,定義表格,定義表格的行,定義表格列的組定義用於表格列的屬性,定義表格的頁眉,定義表格的主體定義表格的頁腳<table><tbody><tr><th>\定義表格的表頭,<... ...
  • HTML連載78-3D播放器下、背景尺寸屬性
    一、繼續完善之前的頁面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D188_3DPlayerXia</title> <style> *{ margin:0px; padding:0px; } body{ ...
  • 前端優化之 -- 使用 require.context 讓項目實現路由自動導入
    最近接手了公司兩個項目，一個PC端後臺管理系統，一個app端項目，當然使用的依然是熟悉“Vue全家桶”那套！但是，當我打開項目時，裡面的代碼是這樣的（路由模塊）： 就是所有路由配置都放到一個index.js中，這多少還是讓我有點驚呆的，顯然，項目會越做越大，模塊會越加越多，那這種不分模塊的架構方式明 ...
  • ES6中class的繼承
    ES6中class的繼承 父類（基類） 子類 extends 關鍵字 //父類 class Human{ //父類的構造函數 constructor(name,age,sex,hobby){ this.name=name this.age=age this.sex=sex this.hobby=ho ...
  • ES6 class -- Class 的方法
    靜態方法與靜態屬性 不會被類的實例所擁有，只有類自身擁有的屬性和方法 只能通過類來調用、 static 關鍵字（靜態方法） 類名.屬性名=屬性值（靜態屬性） //車類 class Car{ //構造函數 constructor(wheel,color,length,width){//接收參數 //給 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類