前端學習系列之CSS

目錄

CSS

簡介

發展史

優勢

基本語法

引用方式

內部樣式

行內樣式

外部樣式

選擇器

id選擇器

class選擇器

標簽選擇器

子代選擇器

后代選擇器

相鄰兄弟選擇器

后續兄弟選擇器

交集選擇器

并集選擇器

通配符選擇器

偽類選擇器

屬性選擇器

CSS基本屬性

優點

字體屬性

文本屬性

背景屬性

邊框屬性

列表屬性

鼠標屬性

盒子

概念

格式

邊框

外邊距

圓角邊框

陰影

浮動

標準文檔流

display

float

overflow

定位

相對定位

絕對定位

z-index


CSS

簡介

??????? css:層疊樣式表,是種格式化網頁的標準方式,用于控制設置網頁的樣式,并且允許css樣式信息與網頁內容分離的一種技術

發展史

優勢

1.格式和結構分離:有利于格式的重用以及網頁的修改與維護

2.精確控制頁面布局:對網頁實現更加精確地控制,如網頁的布局、字體、顏色、背景等,樣式豐富

3.網頁結構表現統一,可以實現復用,實現多個網頁同事更新

基本語法

格式:

h1{

??????? color:blue;

}

CSS的定義是由三部分組成的,包括選擇符、屬性、屬性值

選擇符:要修飾的對象

屬性:修飾對象的哪一個屬性(樣式)

屬性值:樣式的取值

引用方式

css共有三種引用方式:內部樣式、行內樣式、外部樣式;

優先級:采取就近原則:行內樣式>內部樣式>外部樣式

內部樣式

也稱為內嵌樣式,在頁面頭部通過style標簽定義。對當前頁面中所有符合樣式選擇器的標簽都起作用

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>導入方式</title><!-- 內部樣式 --><style>h1 {color: black;}</style></head><body><h1>標簽</h1></body>
</html>

行內樣式

也稱為嵌入樣式,使用HTML標簽的style屬性定義。只對設置style屬性的標簽起作用。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>導入方式</title></head><body><!-- 行內樣式:在標簽元素中,編寫一個style屬性,編寫樣式即可 --><h1 style="color: aqua">標簽</h1></body>
</html>

外部樣式

使用單獨的 .css文件定義,然后在頁面中使用 link標簽 或 @import指令 引入

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>導入方式</title><!-- 外部樣式 --><link rel="stylesheet" href="css/style.css"><!-- 導入式 --><style>@import url("css/style.css");<style></head><body><h1>標簽</h1></body>
</html>

選擇器

作用:選擇頁面上的某一個或某一類元素

id選擇器

????????id 選擇器可以為標有特定 id 的 HTML 元素指定特定的樣式,一般來說,一個頁面中標簽的id的名稱,必須唯一且不能重復。

<p id="part">段落</p>

#part{

??????? color: red;

}

class選擇器

class 選擇器可以為標有特定 class 的 HTML 元素指定特定的樣式,一般來說,一個頁面中標簽的class的名稱,可以不唯一且可以重復。

<p class="part">段落1</p>

<p class="part">段落2</p>

.part{

??????? color: red;

}

標簽選擇器

除了使用id選擇器和class選擇器,我們也可以直接使用標簽選擇器。

<p>段落</p>

<p>段落</p>

p{

??????? color: red;

}

子代選擇器

子代選擇器可以選擇當前元素的所有子元素。定義的時候用 “> ”隔開。

<div>

????????<p>段落</p>

</div>

div>p{

??????? color: red;

}

后代選擇器

????????標簽元素除了并列書寫還可以嵌套書寫,后代選擇器就是用于選擇嵌套標簽元素的一種選擇器。定義的時候用“空格 ”隔開。

<p class="part">

??????? <a href=""></a>

</p>

.part a{

??????? color: red;

}

相鄰兄弟選擇器

相鄰兄弟選擇器可選擇緊接在另一元素后的元素,且二者有相同父元素。定義的時候用 “+ ”隔開。

<div>

????????<p></p>

</div>

<p></p>

div + p{

??????? color: red;

}

后續兄弟選擇器

后續兄弟選擇器選取所有指定元素之后的相鄰兄弟元素。定義的時候用“~ ”隔開。

<div>

????????<p></p>

</div>

<p></p>

div ~ p{

??????? color: red;

}

交集選擇器

選擇的元素必須同時滿足多個條件才可以被選擇,交集選擇器就是干這個的。定義的時候用標簽名.ID名/類名 。

<p class="part"></p>

<h1 class="part"></h1>

p .part{

??????? color: red;

}

并集選擇器

多種元素共享某種屬性,這時候就可以使用并集選擇器。定義的時候用“逗號”隔開。

<p></p>

<h1></h1>

<a class="like"></a>

p h1 .like{

??????? color: red;

}

通配符選擇器

通配符選擇器可以匹配任何標簽,我們常用于統一頁面樣式。

<p></p>

<h1></h1>

<a class="like"></a>

*{

??????? color: red;

}

偽類選擇器

根據不同的狀態顯示不同的樣式,一般多用于標簽。

有四種狀態:

????????:link 未訪問的鏈接

????????:visited 已訪問的鏈接

????????:hover 鼠標懸浮到連接上,即移動在連接上

????????:active 選定的鏈接,被激活

注:默認超鏈接為:藍色、下劃線

屬性選擇器

屬性選擇器可以根據元素的屬性及屬性值來選擇元素。

<input type="text" value="文本框" />

<input type="button" value="按鈕" />

input[type="text"]{

??????? width: 150px;

}

input[type="button"]{

??????? width: 150px;

}

CSS基本屬性

優點

1.有效的傳遞頁面信息

2.美化網頁

3.凸顯頁面的主題

4.提高用戶體驗

格式:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.title1{font-size: 50px;background: aquamarine;}</style></head>
<body>學習的<span class="title1">人最帥</span></body>
</html>

字體屬性

css字體屬性指的是設置字體相關的樣式。

字體屬性及說明
屬性說明
font簡寫屬性,把所有針對字體的屬性設置在一個聲明中
font-size設置字體的尺寸
font-style設置字體的風格;Normal:正常、italic:斜體、oblique:傾斜
font-weight設置字體的粗細;Normal:正常、lighter:細體、bold:粗體、bolder:特粗體
font-family設置字體;指定多種字體時用逗號分開

文本屬性

文本屬性包括陰影效果、大小寫、文本縮進、對齊方式等等。

文本屬性及說明
屬性說明
color設置文本顏色
direction設置文本方向
letter-spacing設置字符間距
line-height設置行高
text-align設置文本內容的對其方式
text-decoration向文本添加修飾
text-overflow設置對象內溢出的文本處理方式
text-indent設置首行文本的縮進
text-transform控制文本轉換
text-shadow設置文本陰影
unicode-bidi設置文本方向
word-spacing設置字間距
white-space設置元素中空白的處理方式

背景屬性

CSS背景屬性主要用于設置對象的背景顏色、背景圖片、背景圖片的重復性、背景圖片的位置等。

常見的背景屬性及說明
屬性說明
background簡寫屬性
background-attachment設置背景圖像是否固定或者隨著頁面其余部分滾動
background-color設置元素的背景顏色
background-image將圖像設置為背景
background-position設置背景圖像的起始位置
background-repeat設置背景圖像是否重復

background-clip屬性規定背景的繪制區域,該屬性是CSS3的屬性,主要用于設置背景圖像的裁剪區域,其基本語法格式是:

background-clip : border-box|padding-box|content-box;

邊框屬性

CSS邊框屬性可以設置對象邊框的顏色、樣式以及寬度。使用對象的邊框屬性時必須先設定對象的高度及寬度。語法格式如下:

border:邊框寬度 邊框樣式 邊框顏色

邊框樣式的取值及說明
邊框樣式說明邊框樣式說明
none無邊框ridge菱型邊框
double雙線邊框dashed虛線邊框
hidden隱藏邊框solide實線邊框
groove3D凹槽邊框inset3D內嵌邊框
dotted點線邊框outset3D凸邊框

注意:border-width屬性可以單獨設置邊框寬度;border-style屬性可以單獨設邊框樣式;border-color屬性可以單獨設置邊框顏色。

列表屬性

常用的列表屬性是list-style-type 、list-style-image、 list-style-position以及list-style。

屬性含義說明
list-style-type設置列表前的標記
list-style-image將圖像作為列表前的標記
list-style-position設置標記的位置取值:outside(默認)、inside
list-style簡寫

list-style-type屬性用于設置列表項標記的類型,主要有disp (實心圓)、circle (空心圓)、square (實心方塊)、none (不使用項目符號) 。

list-styl-image屬性用于設置使用什么圖像作為列表符號。

list-style-position屬t用來指定列表符號的顯示位置,當值為outside時, 表示將列表符號放在文本塊之外,該值為默認值,當值為inside時,表示將列表符號放在文本塊之內。

鼠標屬性

CSS中可以通過鼠標指針的cursor屬性設置鼠標指針的顯示圖形,語法格式如下:

cursor:鼠標指針樣式

cursor屬性取值說明
crosshair十字準線s-resize向下改變大小
pointer | hand手型e-resize向右改變大小
waitw-resize向左改變大小
help問號ne-resize向上右改變大小
no-drop無法釋放nw-resize向上左改變大小
text文字或編輯se-resize向下右改變大小
move移動sw-resize向下左改變大小
n-resize向上改變大小

盒子

概念

CSS盒子模型是一種在網頁設計中用于描述元素布局的概念模型。在CSS中,每個元素都被視為一個矩形盒子,這個盒子包含了該元素的內容、內邊距(padding)、邊框(border)和外邊距(margin)。

  1. 內容(content):這是盒子里裝的東西,可以是文本、圖像或者其他元素。內容的尺寸可以通過height和width屬性來控制。
  2. 內邊距(padding):這是內容與邊框之間的空間。內邊距的大小可以通過padding屬性來控制。
  3. 邊框(border):這是圍繞內容和內邊距的一條線。邊框的樣式、寬度和顏色可以通過border屬性來控制。
  4. 外邊距(margin):這是盒子與其他元素之間的空間。外邊距的大小可以通過margin屬性來控制。

在CSS中,可以通過設置元素的width和height屬性來控制盒子的尺寸。但是需要注意的是,增加內邊距和邊框的寬度會增加盒子的尺寸,但不會影響內容區域的尺寸。而增加外邊距則會增加盒子與其他元素之間的距離,但不會影響盒子的尺寸。

格式

<div></div>

邊框

格式:

border:粗細 樣式 顏色

外邊距

margin-left/right/top/bottom–>表示四邊,可分別設置,也可以同時設置如下

margin:0 0 0 0/*分別表示上、右、下、左;從上開始順時針*/
/*例1:居中*/
margin:0 auto /*auto表示左右自動*/
/*例2:*/
margin:4px/*表示上、右、下、左都為4px*/
/*例3*/
margin:10px 20px 30px/*表示上為10px,左右為20px,下為30px*/

盒子的計算方式:
margin+border+padding+內容的大小

總結:
body總有一個默認的外邊距 margin:0
常見操作:初始化

圓角邊框

使用:border-radius

<style>
??????? div{
??????????? width: 100px;
??????????? height: 100px;
??????????? border: 10px solid red;
??????????? /*一個border-radius只管一個圓的1/4*/
??????????? border-radius: 50px 20px 20px 30px;/*左上 右上 右下 左下 ,順時針方向*/
??????? }
</style>

陰影

box-shadow: 10px 10px 1px black;

浮動

標準文檔流

塊級元素:獨占一行 h1~h6 、p、div、 列表…
行內元素:不獨占一行 span、a、img、strong

注: 行內元素可以包含在塊級元素中,反之則不可以

display

display屬性定義了一個元素應如何在頁面上顯示

常用值:

  1. block:將元素顯示為塊級元素。塊級元素會在其前后創建新行,并且占據整個容器的寬度。例如,<div>、<p>、<h1>等元素的默認display屬性值為block。
  2. inline:將元素顯示為內聯元素。內聯元素不會創建新行,而是在當前行內顯示。例如,<span>、<a>等元素的默認display屬性值為inline。
  3. none:將元素隱藏,不顯示。
  4. inline-block:將元素顯示為內聯塊級元素。內聯塊級元素可以在當前行內顯示,并且可以設置寬度和高度。
  5. flex:將元素顯示為彈性盒模型。彈性盒模型是一種用于創建復雜的布局和對齊元素的CSS技術。
  6. grid:將元素顯示為網格容器。網格容器是一種用于創建二維布局的CSS技術。

這也是一種實現行內元素排列的方式,但是我們很多情況用float

float

在CSS中,float屬性用于將元素放置在其容器的左側或右側,使文本和內聯元素環繞它。這個屬性常用于文字環繞圖片等場景。

float屬性有三個值:

  1. left:將元素向左浮動。
  2. right:將元素向右浮動。
  3. none:默認值,元素不浮動,會停在原處

注意:

??????? 1.浮動元素會脫離正常的文檔流,不會影響到其它元素的布局。

??????? 2.浮動元素之后的元素會環繞浮動元素。

??????? 3.如果容器內只有浮動元素,那么容器將不會顯示,因為浮動元素會脫離文檔流。

overflow

overflow屬性用于指定當內容溢出元素框時該如何處理。

屬性有三個值:

  1. visible:默認值,內容會溢出元素框,并在頁面中顯示出來。
  2. hidden:內容不會溢出元素框,溢出的內容會被裁剪,并且其余內容是不可見的。
  3. auto:瀏覽器會自動判斷是否需要裁剪內容,如果需要,則裁剪內容并顯示滾動條。

格式:

div { overflow: hidden; }

使用overflow屬性可以控制頁面元素的顯示效果,從而實現各種不同的布局效果。

定位

相對定位

????????相對定位是一種布局策略,它相對于元素在正常文檔流中的位置進行定位。使用相對定位屬性可以讓元素相對于其原始位置進行平移、旋轉等操作,而不會影響到其他元素的布局

格式:

//一個元素向右平移100像素

div {

????????position: relative;

????????left: 100px;

}

如:

top:-20px;/*向上偏移20px*/
left:20px;/*向右偏移20px*/
bottom:10px;/*向上偏移10px*/
right:20px;/*向左偏移20px*/

通過設置元素的position屬性為relative來實現的

控制元素位置屬性:

????????top

????????right

????????bottom

????????left

????????相對定位不會改變元素在正常文檔流中的位置,它只是在視覺上移動了元素。因此,使用相對定位不會影響到其他元素的布局。????????

絕對定位

????????絕對定位是一種布局策略,它可以使一個元素脫離正常的文檔流,并相對于其包含塊進行定位。使用絕對定位屬性可以讓元素在頁面中精確定位,并且不會影響到其他元素的布局。

通過設置元素的position屬性為absolute來實現的。

控制元素位置屬性:

????????top

????????right

????????bottom

????????left

格式:

//將一個元素絕對定位到頁面的右下角:

div {

????????position: absolute;

????????bottom: 0;

????????right: 0;

}

????????絕對定位會使元素脫離正常的文檔流,并且會覆蓋其他元素的內容。因此,在使用絕對定位時需要謹慎考慮其布局效果,并與其他布局技術結合使用

z-index

????????z-index屬性在CSS中用于確定元素的堆疊順序。z-index的值是一個整數,表示元素在Z軸上的位置。一個較大的z-index值意味著元素在疊層順序中會更靠近頂部。

????????需要注意的是,z-index屬性只對設置了定位(position:relative/absolute/fixed/sticky)的元素有效。默認值為auto,如果z-index設置為auto,則根據元素的定位類型(static/relative/absolute/fixed/sticky),其層疊順序會受到不同的影響。

????????此外,z-index也支持負值,但要注意的是,如果定位元素有發生嵌套,那么負值的z-index可能不會按照預期工作。在CSS2.1時代,只有定位元素(position:relative/absolute/fixed/sticky)的z-index才有作用。

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/208061.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/208061.shtml
英文地址,請注明出處:http://en.pswp.cn/news/208061.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

virtualenv創建虛擬環境

目錄 概念安裝創建虛擬環境激活虛擬環境刪除虛擬環境退出虛擬環境更改虛擬環境路徑概念 virtualenv是一個創建隔離的Python運行環境的工具。它允許用戶為每個Python項目創建一個獨立的虛擬環境,以避免不同項目之間的依賴沖突。 安裝 pip install virtualenv virtualenvwrapper…

JS如何實現豎屏輪播圖

首先是HTML搭建結構 <div class"banner-box"><div class"bannerbox"><div class"banner"><a class"a-img-ban"> <img class"img-ban" src"./img/640 (4).jpg" alt"終于等到你還…

SpringBoot項目訪問resources下的靜態資源

1.新建一個配置文件夾&#xff0c;放配置類 2.編輯 WebMvcConfig.java package com.southwind.configuration;import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry; import or…

openlayers地圖使用---跟隨地圖比例尺動態標繪大小的一種方式3

openlayers地圖使用—跟隨地圖比例尺動態標繪大小的一種方式 預期&#xff1a;隨著地圖比例尺放大縮小&#xff0c;地圖上的標繪隨著變化尺寸 思路&#xff1a;通過VectorImage和動態修改Feature尺寸實現Feature跟隨地圖比例尺尺寸變化 優點&#xff1a;結合第1和第2種方式的…

openlayers地圖使用---跟隨地圖比例尺動態標繪大小的一種方式2

openlayers地圖使用—跟隨地圖比例尺動態標繪大小的一種方式2 預期&#xff1a;隨著地圖比例尺放大縮小&#xff0c;地圖上的標繪隨著變化尺寸 思路&#xff1a;通過不斷添加地圖圖層實現標繪的動態縮放 優點&#xff1a;標繪放大縮小非常流暢 缺點&#xff1a;標繪超過1000…

LangChain 22 LangServe用于一鍵部署LangChain應用程序

LangChain系列文章 LangChain 實現給動物取名字&#xff0c;LangChain 2模塊化prompt template并用streamlit生成網站 實現給動物取名字LangChain 3使用Agent訪問Wikipedia和llm-math計算狗的平均年齡LangChain 4用向量數據庫Faiss存儲&#xff0c;讀取YouTube的視頻文本搜索I…

等待和通知

引入 由于線程是搶占式執行的,因此線程之間的執行的先后順序難以預知 但是實際開發中我們希望合理協調多個線程之間執行的先后順序. 這里的干預線程先后順序,并不是影響系統的調度策略(內核里調度線程,仍然是無序調度). 就是相當于在應用程序代碼中,讓后執行的線程主動放棄被…

3DCAT+上汽奧迪:打造新零售汽車配置器實時云渲染解決方案

在 5G、云計算等技術飛速發展的加持下&#xff0c;云渲染技術迎來了突飛猛進的發展。在這樣的背景下&#xff0c;3DCAT應運而生&#xff0c;成為了業內知名的實時云渲染服務商之一。 交互式3D實時云看車作為云渲染技術的一種使用場景&#xff0c;也逐步成為一種新的看車方式&a…

設備溫度和振動綜合監測:溫振一體式傳感器的優點和應用

隨著工業設備的復雜性和自動化程度的提高&#xff0c;對設備狀態監測的需求也日益增加。溫振一體式傳感器作為一種集振動和溫度監測于一體的傳感器&#xff0c;具備多項優勢&#xff0c;因此在工業設備狀態監測領域得到廣泛應用。 溫振一體式傳感器基于振動傳感器和溫度傳感器的…

1380 一筆畫問題

如果一個無向圖存在一筆畫&#xff0c;則一筆畫的路徑叫做歐拉路&#xff0c;如果最后又回到起點&#xff0c;那這個路徑叫做歐拉回路。 #include<bits/stdc.h> using namespace std; #define N 510 int g[N][N],d[N],c[N],n,m,reckon,oddity_point,lt; void dfs(int i)…

網絡運維與網絡安全 學習筆記2023.12.1

網絡運維與網絡安全 學習筆記 第三十二天 今日目標 ACL原理與類型、基本ACL配置、高級ACL配置 高級ACL之ICMP、高級ACL之telnet ACL原理與類型 項目背景 為了企業的業務安全&#xff0c;要求不同部門對服務器有不同的權限 PC1不能訪問Server PC2允許訪問Server 允許其他所…

java中用Thead創建線程和用Runnable創建線程的區別是什么?

在 Java 中&#xff0c;創建線程的兩種主要方式是通過繼承 Thread 類和通過實現 Runnable 接口。下面是它們之間的主要區別&#xff1a; 1. 繼承 Thread 類&#xff1a; class MyThread extends Thread {public void run() {// 線程執行的代碼} }// 創建并啟動線程 MyThread …

043:vue項目一直出現 sockjs-node/info?t=XX的解決辦法

第043個 查看專欄目錄: VUE ------ element UI 專欄目標 在vue和element UI聯合技術棧的操控下&#xff0c;本專欄提供行之有效的源代碼示例和信息點介紹&#xff0c;做到靈活運用。 &#xff08;1&#xff09;提供vue2的一些基本操作&#xff1a;安裝、引用&#xff0c;模板使…

Linux文件系統與基礎IO

文章目錄 1 C文件接口1.1 fopen1.2 fwrite、fread、rewind、fclose 2 文件系統調用2.1 open2.1.1 參數2&#xff1a;flags2.1.2 參數3&#xff1a;mode2.1.3 返回值——file descriptor 2.2 write2.3 read2.4 close 3 文件的本質3.1 struct file3.2 一個進程如何與多個文件相關…

數據分析入門語言:選擇SQL還是Python?如何選擇你的第一門編程語言?

【關注微信公眾號&#xff1a;跟強哥學SQL&#xff0c;回復“筆試”免費領取大廠SQL筆試題。】 如今數據爆炸的時代&#xff0c;掌握一門數據分析的編程語言變得愈發重要。 而隨著SQL和Python在數據分析領域的持續火熱&#xff0c;許多初學者面臨著一個共同的問題&#xff1a;…

Python 日志指南

目錄 日志指南 日志基礎教程 什么時候使用日志 一個簡單的例子 記錄日志到文件 從多個模塊記錄日志 記錄變量數據 更改顯示消息的格式 在消息中顯示日期/時間 后續步驟 進階日志教程 記錄流程 記錄器 處理器 格式器 配置日志記錄 如果沒有提供配置會發生什么 …

QLoRA論文概述

QLORA: Efficient Finetuning of Quantized LLMs QLoRA論文概述前言&#xff08;省流版本&#xff09;摘要論文十問實驗實驗1數據集和模型實驗結論 實驗2數據集和模型實驗結論 局限性模型尺度數據集其他微調方法 QLoRA論文概述 前言&#xff08;省流版本&#xff09; 微調需要…

期末速成數據庫極簡版【查詢】(2)

目錄 select數據查詢----表 【1】篩選列 【2】where簡單查詢 【3】top-n/distinct/排序的查詢 【4】常用內置函數 常用日期函數 常用的字符串函數 【5】模糊查詢 【6】表數據操作——增/刪/改 插入 更新 刪除 【7】數據匯總 聚合 分類 ? &#x1f642;&#…

人大金倉(kingbase)數據庫常用sql命令

一. 字段 1. 添加 alter table book add column book_id varchar not null, book_title varchar(10) default ;2. 刪除 alter table book drop book_id, book_title;// 外鍵時 alter table book drop book_id, book_title cascade;3. 修改類型 alter table book alter colu…

分享十幾個適合新手練習的軟件測試項目

說實話&#xff0c;在找項目的過程中&#xff0c;我下載過&#xff08;甚至付費下載過&#xff09;N多個項目、聯系過很多項目的作者&#xff0c;但是絕大部分項目&#xff0c;在我看來&#xff0c;并不適合你拿來練習&#xff0c;它們或多或少都存在著“問題”&#xff0c;比如…