CSS(JavaEE初階系列14)

目錄

前言:

1.CSS是什么

1.1CSS基本語法

2.引入樣式

2.1內部樣式表

2.2行內樣式表

2.3外部樣式

3.選擇器

3.1選擇器的種類

3.1.1基礎選擇器

3.1.2復合選擇器

4.常用元素屬性

4.1字體屬性

4.2文本屬性

4.3背景屬性

4.4圓角矩形

4.5元素的顯示模式

4.6盒模型

4.7內邊距

4.8外邊距

4.9彈性布局

結束語:


前言:

在上一節中小編與大家分享了有關于JavaScript的一些基礎知識,以及給大家演示了幾個案例,接下來小編帶著大家一起來看一下有關于前端中的另一個技術CSS,想要讓界面好看,那么就離不開CSS的渲染。話不多說我們一起來看吧。

1.CSS是什么

CSS是層疊樣式表,所謂“層疊”就是針對html的元素/標簽,可以同時應用多組CSS樣式,將多組樣式疊加在一起。“樣式”就是大小、位置、間距、顏色、字體、邊框、背景....統稱為“樣式”,它描述了一個網頁張啥樣。

CSS能夠對網頁元素的位置的排版進行像素精確控制,實現美化頁面的效果,能夠做到頁面的樣式和結構分離。

1.1CSS基本語法

選擇器 + {一條/N條聲明}

  • 選擇器決定針對誰修改。
  • 聲明決定修改啥。
  • 聲明的屬性是鍵值對,使用;區分鍵值對,使用:區分鍵和值。

<body>

? ? <style>

? ? ? ? p{

? ? ? ? ? ? /* 設置字體顏色 */

? ? ? ? ? ? color: red;

? ? ? ? ? ? /* 設置字體大小 */

? ? ? ? ? ? font-size: 30px;

? ? ? ? }

? ? </style>

? ? <p>hello</p>

</body>

注意:

  • CSS要寫到style標簽中(后面還會介紹其他寫法)。
  • style標簽可以放到頁面任意位置,一般是放置在head標簽中。
  • CSS使用/**/作為注釋。

2.引入樣式

2.1內部樣式表

內部樣式是直接把CSS嵌入到HTML中,放到style標簽里。

? ? <!-- 在style標簽中寫的是css代碼,他可以放置在head中也可以放置在body中 -->

? ? <style>

? ? ? ? div{

? ? ? ? ? ? font-size: 50px;

? ? ? ? ? ? color: red;

? ? ? ? }

? ? </style>

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><!-- 在style標簽中寫的是css代碼,他可以放置在head中也可以放置在body中 --><style>div{font-size: 50px;color: greenyellow;}</style><div>hello world!</div>
</body>
</html>


結果展示:

2.2行內樣式表

行內樣式是將CSS寫到一個單獨的.css文件中,有html通過link標簽來引進來。

首先我們先來創建一個.css文件。

代碼展示:

html代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 通過link標簽將css文件引入進來 --><link rel="stylesheet" href="style.css">
</head>
<body><div>hello world!</div>
</body>
</html>


css文件代碼展示:

div {font-size: 50px;color: blue;
}


結果展示:

2.3外部樣式

內部樣式也叫內聯樣式,他是直接把CSS屬性寫到元素的style屬性內。

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div style="color: blueviolet; font-size: 60px;"> hello world!</div>
</body>
</html>


結果展示:

3.選擇器

選擇器就是要我們選中頁面中的元素然后再進行操作。只有先選中元素才能生效。下面我們來分別來看一下四種選擇器。

3.1選擇器的種類

3.1.1基礎選擇器

  • 標簽選擇器

標簽選擇器是用來選中頁面中的所有同名標簽的元素,它的缺點也很顯而易見就是很難針對某個元素進行個性化制定。

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>標簽選擇器</title>
</head>
<body><style>p {color: red;font-size: 30px;}div {color: burlywood;font-size: 20px;}</style><p>hello</p><p>world</p><div>css</div><div>JavaScript</div>
</body>
</html>


結果展示:

  • 類選擇器

在css中創建一個“類名”,這個類名對應一組css屬性,制定讓html元素應用這樣的類名即可。

代碼展示:

css文件代碼:

.one {color: rosybrown;font-size: 50px;
}
.tow {color: blueviolet;font-size: 30px;
}


html文件代碼:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>類選擇器</title><link rel="stylesheet" href="Test3.css">
</head>
<body><div class="one">hello</div><div class="tow">hello</div>
</body>
</html>


結果展示:

  • id選擇器

一個html標簽中可以有一個id屬性,這個屬性的值會被作為身份標識的唯一值。所以通過id選擇器就可以給制定元素設置樣式了。

代碼展示:

css代碼展示:

#test {color: brown;font-size: 50px;
}


html代碼展示:
?

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>id選擇器</title><link rel="stylesheet" href="Test4.css">
</head>
<body><div id="test">hello world</div>
</body>
</html>

結果展示:

  • 通配符選擇器

通配符選擇器就是給所有的都設置樣式。

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>通配符選擇器</title>
</head>
<body><style>* {color: aquamarine;font-size: 40px;}</style><div>hello</div><p>world</p>
</body>
</html>


結果展示:

3.1.2復合選擇器

上述都是css中最基礎的選擇器,其實在css中海油很多復雜的“復合選擇器”,下面我們只給大家介紹一種后代選擇器。

  • 后代選擇器
    <!DOCTYPE html>
    <html lang="en">
    <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代選擇器</title>
    </head>
    <body><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
    </body>
    </html>

后代選擇器的效果就是把上述三種基礎選擇器進行組合,同時能夠體現出“標簽的層次結構”。

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>后代選擇器</title>
</head>
<body><div class="one"><h3>hello</h3></div><div class="tow"><h3>world</h3></div><style>.one {color: chocolate;}.tow {color: cadetblue;}</style>
</body>
</html>


結果展示:

除了后代選擇器之外還有以下這些,小編這里就不給大家一一介紹了。

  • 子選擇器
  • 并集選擇器
  • 偽類選擇器

4.常用元素屬性

4.1字體屬性

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>字體屬性</title>
</head>
<body><div class="one">hello</div><style>.one {font-family: '微軟雅黑';font-size: 100px;font-weight: 900;font-style: italic;}</style>
</body>
</html>


結果展示:

我們也可以在控制臺中通過勾選下面的條件來看到效果。

4.2文本屬性

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>文本屬性</title>
</head>
<body><div class="one">hello world</div><style>.one {font-size: 100px;/* 文本顏色 */color: brown;/* 文本對齊,左對齊(left),右對齊(right),居中對齊(center) */text-align: center;/* 文本裝飾,加一個下劃線... */text-decoration: underline;/* 文本縮進 */text-indent: 20px;/* 行高(行間距) */line-height: 100px;}</style>
</body>
</html>


結果展示:

注意:

這里顏色的寫法有很多中,其中可以直接寫表示顏色的單詞,也可使用rgb的方式來表示,還可以使用十六進制的方式來表示。

?

4.3背景屬性

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景設置</title>
</head>
<body><div class="background">1</div><style>.background {font-size: 100px;width: 200px;height: 160px;color: blueviolet;background-color: gold;/* 導入背景圖 */border-image: url(cat.jpg);/* 禁止平鋪 */background-repeat: no-repeat;/* 設置背景圖的位置 */background-position: center center;/* 設置背景圖的大小 */background-size: 2000px 1600px;}      </style>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景設置</title>
</head>
<body><div class="one"></div><style>.one {background-image: url(cat.jpg);height: 300px;background-repeat: no-repeat;background-position: center center;}</style>
</body>
</html>


結果展示:

4.4圓角矩形

我們之前生成的邊框都是矩形的,但是如果我們想要讓他變成圓邊的該怎么弄呢?如下代碼所示:

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圓角矩形</title>
</head>
<body><div>111</div><style>div {width: 200px;height: 100px;border: 2px solid green;border-radius: 10px;}</style>
</body>
</html>


結果展示:

4.5元素的顯示模式

在CSS中,HTML的標簽的顯示模式有很多,此處只重點介紹兩個:

塊級元素和行內元素。

塊級元素:

????????像我們之前學習的h1-h6、p、div、ul、ol...都是塊級元素。

它的特點:

  • 獨占一行。
  • 高度、寬度、內外邊距、行高都可以控制。
  • 寬度默認是父級元素寬度的100%(和父級元素一樣框寬)。
  • 是一個容器(盒子),里面可以放行內和塊級元素。

行內元素/內聯元素:
????????常見的元素有:a、strong、b、em、i、del、s、ins...

特點:

  • 不獨占一行,一行可以顯示多個。
  • 設置高度、寬度、行高無效。
  • 左右外邊距有效(上下無效),內邊距有效。
  • 默認寬度就是本身的內容。
  • 行內元素只能容納文本和其他行內元素,不能放塊級元素。

行內元素和塊級元素的區別:

  • 塊級元素獨占一行,行內元素不獨占一行。
  • 塊級元素可以設置寬高,行內元素不能設置寬高。
  • 塊級元素四個方向都能設置內外邊距,行內元素垂直方向不能設置。

使用display屬性可以修改元素的顯示模式:

  • display:block;(修改成塊級元素)。
  • display:inline;(修改成行內元素)。

一般都是修改成塊級元素,不會說是把塊級元素修改成行內元素,也可以使用display:none實現元素隱身的效果。

4.6盒模型

每一個HTML元素就相當于是一個矩形的“盒子”,這個盒子是由這幾個部分組成的。

  • 邊框:border
  • 內容:content
  • 內邊距:padding
  • 外邊距:margin

如下圖所示:

4.7內邊距

padding是設置內容和邊框之間的距離的。

基礎寫法:
默認內容是頂著邊框來放置的,用padding來控制這個距離可以給四個方向都加上邊距。

  • padding-top?上
  • padding-bottom?下
  • padding-left?左
  • padding-right?右

復合寫法:

可以把多個方向的padding合并到一起。

  • padding:5px;?表示四個方向都是5px。
  • padding:5px 10px;?表示上下內邊距是5px,左右內邊距是10px。
  • padding:5px 10px 20px;?表示上內邊距是5px,左右內邊距是10px,下內邊距是20px。
  • padding:5px 10px 20px 30px;?表示上內邊距是5px,右內邊距是10px,下內邊距是20px,左內邊距是30px。(順時針)

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>邊距</title>
</head>
<body><div>設置內邊距</div><style>* {/* 防止撐大盒子 */box-sizing: border-box;}div {padding-top: 20px;padding-bottom: 10px;padding-left: 20px;padding-right: 10px;}</style>
</body>
</html>


結果展示:

4.8外邊距

基礎寫法:

控制盒子和盒子之間的距離。可以給四個方向都加上外邊距。

  • margin-top?上
  • margin-bottom?下
  • margin-left?左
  • margin-right?右

復合寫法:

規則與padding一樣。

  • margin:10px;?四個方向都是10px
  • margin:10px 20px;?上下外邊距為10px,左右外邊距為20px。
  • margin:10px 20px 30px;?上外邊距10px,左右外邊距20px,下外邊距30px。
  • margin:10px 20px 30px 40px;?上外邊距10px,右外邊距20px,下外邊距30px,左外邊距40px。

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>外邊距</title>
</head>
<body><div>test</div><style>* {box-sizing: border-box;}div {margin-top: 10px;margin-bottom: 20px;margin-left: 30px;margin-right: 40px;}</style>
</body>
</html>


結果展示:

?

4.9彈性布局

我們先來看一下下面的這個案例。

代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性布局</title>
</head>
<body><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>


結果展示:

通過結果我們可以看出來里面的元素是垂直方向排列的,那么有的時候我們希望塊級元素是可以水平方向排列。此時我們就可以使用彈性布局了。

如下所示:
代碼展示:

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>彈性布局</title>
</head>
<body><div class="one"><div class="tow">hello1</div><div class="tow">hello2</div><div class="tow">hello3</div><div class="tow">hello4</div></div><style>.one {width: 1000px;height: 300px;background-color: brown;/* 開啟彈性布局 *//* 一旦開啟了彈性布局,此時內部的子元素就會按照水平的方向進行排布,子元素里面的子元素是不受影響的 */display: flex;/* justify-content:設置水平方向的排列規則 */justify-content: space-between;/* align-items:設置垂直方向的排列規則 */align-items: center;}.tow {width: 150px;height: 100px;background-color: blueviolet;}</style>
</body>
</html>


結果展示:

結束語:

好了這節的CSS基礎知識小編就給大家講解到這里了,有不會的地方記得給小編留言,希望這節對大家了解CSS有一定幫助,想要學習的同學記得關注小編和小編一起學習吧!如果文章中有任何錯誤也歡迎各位大佬及時為小編指點迷津(在此小編先謝過各位大佬啦!)

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

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

相關文章

?LeetCode解法匯總2682. 找出轉圈游戲輸家

目錄鏈接&#xff1a; 力扣編程題-解法匯總_分享記錄-CSDN博客 GitHub同步刷題項目&#xff1a; https://github.com/September26/java-algorithms 原題鏈接&#xff1a; 力扣&#xff08;LeetCode&#xff09;官網 - 全球極客摯愛的技術成長平臺 描述&#xff1a; n 個朋友…

【Leetcode】84.柱狀圖中最大的矩形(Hard)

一、題目 1、題目描述 給定 n n n 個非負整數,用來表示柱狀圖中各個柱子的高度。每個柱子彼此相鄰,且寬度為 1 。 求在該柱狀圖中,能夠勾勒出來的矩形的最大面積。 示例1: 輸入:heights = [2,1,5,6,2,3] 輸出:10 解釋:最大的矩形為圖中紅色區域,面積為 10示例2:…

學習Vue:Vue Router的集成與基本配置

在Vue.js中&#xff0c;路由與導航是構建單頁應用程序&#xff08;SPA&#xff09;的關鍵概念。Vue Router是Vue.js官方提供的路由管理庫&#xff0c;它允許您輕松地實現頁面之間的切換、嵌套路由和參數傳遞。在本文中&#xff0c;我們將深入了解Vue Router的集成和基本配置。 …

Stephen Wolfram:那么…ChatGPT 在做什么,為什么它有效呢?

So … What Is ChatGPT Doing, and Why Does It Work? 那么…ChatGPT在做什么&#xff0c;為什么它有效呢&#xff1f; The basic concept of ChatGPT is at some level rather simple. Start from a huge sample of human-created text from the web, books, etc. Then train…

IDA遠程調試真機app

IDA遠程調試真機app 第一步&#xff1a;啟動 android_server&#xff0c;并修改端口 # 啟動android_server ./android_server -p31928第二步&#xff1a;端口轉發、掛起程序 # 端口轉發adb forward tcp:31928 tcp:31928# 掛起程序 adb shell am start -D -n com.qianyu.antid…

Hyper-V增加橋接網絡設置(其他方式類同)

點擊連接到的服務器&#xff0c;右單擊或者右邊點擊“虛擬交換機管理器” 選擇網絡種類 配置虛擬交換機信息 外部網絡選擇物理機網卡設備

Linux中UDP服務端和客戶端

1 服務端代碼 #include <stdio.h> #include <head.h> #include <sys/types.h> #include <sys/socket.h> #include <arpa/inet.h>#define PORT 6666 //端口號&#xff1a;1024~49191 #define IP "192.168.1.110"//"192.168.122.1…

中國“諾貝爾獎”未來科學大獎公布2023年獲獎名單

未來科學大獎委員會于8月16日公布2023年獲獎名單。柴繼杰、周儉民因發現抗病小體并闡明其結構和在抗植物病蟲害中的功能做出的開創性工作獲得“生命科學獎”&#xff0c;趙忠賢、陳仙輝因對高溫超導材料的突破性發現和對轉變溫度的系統性提升所做出的開創性貢獻獲得“物質科學獎…

突破網絡編程1024限制的方法(修改配置文件)

文章目錄 概述修改linux配置相關命令步驟1. 打開終端2. 使用sudo權限編輯文件3. 添加資源限制配置4. 保存和退出5. 重啟系統或重新登錄 其他方法1. 使用事件驅動的框架2. 使用連接池3. 負載均衡4. 使用線程池和進程池5. 升級操作系統設置6. 使用專業的高性能服務器7. 分布式架構…

深入源碼分析kubernetes informer機制(三)Resync

[閱讀指南] 這是該系列第三篇 基于kubernetes 1.27 stage版本 為了方便閱讀&#xff0c;后續所有代碼均省略了錯誤處理及與關注邏輯無關的部分。 文章目錄 為什么需要resyncresync做了什么 為什么需要resync 如果看過上一篇&#xff0c;大概能了解&#xff0c;client數據主要通…

1、基于 CentOS 7 構建 LVS-DR 群集。 2、配置nginx負載均衡

一、基于CentOS7和、構建LVS-DR群集 準備四臺虛擬機 ip作用192.168.27.150客戶端192.168.27.151LVS192.168.27.152RS192.168.27.152RS 關閉防火墻 [rootlocalhost ~]# systemctl stop firewalld安裝ifconfig yum install net-tools.x86_64 -y1、DS上 1.1 配置LVS虛擬IP …

uniapp開發微信小程序使用painter將頁面轉換為圖片并保存到本地相冊

引言 我使用到painter的原因是&#xff0c;在uniapp開發微信小程序時&#xff0c;需要將一個頁面的內容轉換成圖片保存到本地相冊。 起初在網上找到很多都是在uniapp中使用 html2canvas 將網頁轉換成圖片再jspdf將圖片轉換為pdf&#xff0c;但是這種方式在小程序環境不支持&am…

opencv進階08-K 均值聚類cv2.kmeans()介紹及示例

K均值聚類是一種常用的無監督學習算法&#xff0c;用于將一組數據點分成不同的簇&#xff08;clusters&#xff09;&#xff0c;以便數據點在同一簇內更相似&#xff0c;而不同簇之間差異較大。K均值聚類的目標是通過最小化數據點與所屬簇中心之間的距離來形成簇。 當我們要預測…

opencv實現以圖搜圖

這里寫目錄標題 1. 步驟1.1 導入OpenCV庫&#xff1a;1.2 加載圖像1.3 提取特征1.4 匹配特征1.5 顯示結果 2. 完整代碼3. 測試圖片及效果 1. 步驟 1.1 導入OpenCV庫&#xff1a; 在您的C代碼中&#xff0c;首先需要導入OpenCV庫。您可以使用以下語句導入核心模塊&#xff1a;…

人工智能算法-SVM, KNN

目錄 SVM, KNN區別 一、KNN算法概述 算法的描述: 二、關于K的取值 K的取法: 三、關于距離的選取 Euclidean Distance 定義: 四、總結 SVM, KNN區別

化繁為簡,使用Hibernate Validator實現參數校驗

前言 在之前的悅享校園的開發中使用了SSM框架&#xff0c;由于當時并沒有使用參數參數校驗工具&#xff0c;方法的入參判斷使用了大量的if else語句&#xff0c;代碼十分臃腫&#xff0c;因此最近在重構代碼時&#xff0c;將框架改為SpringBoot后&#xff0c;引入了Hibernate V…

有一種新型病毒在 3Ds Max 環境中傳播,如何避免?

3ds Max渲染慢&#xff0c;可以使用渲云渲染農場&#xff1a; 渲云渲染農場解決本地渲染慢、電腦配置不足、緊急項目渲染等問題&#xff0c;可批量渲染&#xff0c;批量出結果&#xff0c;速度快&#xff0c;效率高。 此外3dmax支持的CG MAGIC插件專業版正式上線&#xff0c;…

機器學習筆記(1):機器學習入門的概念

導航 一、 人工智能&#xff0c;機器學習&#xff0c;深度學習和傳統學習二、數學基礎三、編程語言 如果你剛剛入門機器學習&#xff0c;會接觸到了非常多的概念。比如人工智能&#xff0c;機器學習&#xff0c;深度學習&#xff0c;神機網絡&#xff0c;強化學習&#xff0c;各…

0基礎學習VR全景平臺篇 第85篇:智慧眼-如何分配角色的權限?

一、功能說明 角色權限&#xff0c;是指給智慧眼的所有角色成員分配具體的操作權限。 二、后臺編輯界面 1、點擊“添加權限”&#xff0c;選擇其可操作的“權限”。注意權限只能逐項選擇&#xff0c;所以如果某個角色擁有多項權限的話&#xff0c;那么需要進行多次添加。“快…

uniapp app 實現右上角回首頁;點homeButton返回上一頁;onNavigationBarButtonTap不生效問題

場景&#xff1a; app&#xff0c;Android移動端 實現點擊右上角圖標&#xff0c;回首頁。 問題&#xff1a;用了官網的 homeButton&#xff0c;圖標正常展示了&#xff0c;也可點擊&#xff0c;但每次點擊后是會返回上一頁而非首頁。 后來查到說&#xff0c;要結合onNavigatio…