java-web前端 CSS

CSS介紹

CSS 指的是層疊樣式表* (Cascading Style Sheets), 描述了如何在屏幕、紙張或其他媒體上顯示 HTML 元素,節省了大量工作,并且可以同時控制多張網頁的布局
外部樣式表存儲在 CSS 文件中
CSS:也稱級聯樣式表。

CSS語法

在這里插入圖片描述

選擇器指向您需要設置樣式的 HTML 元素。
聲明塊包含一條或多條用分號分隔的聲明。
每條聲明都包含一個 CSS 屬性名稱和一個值,以冒號分隔。
多條 CSS 聲明用分號分隔,聲明塊用花括號括起來。

示例:
在此例中,所有

元素都將居中對齊,并帶有紅色文本顏色:

p {color: red;text-align: center;
}

idea中建立css樣式

在這里插入圖片描述

優先級

html與css優先規則:內聯樣式 > 外聯樣式
CSS 優先規則 :內聯樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標簽選擇器 = 偽元素選擇器

優先級使用

css外聯樣式:

<link href="css/myCSS.css" rel="stylesheet"/>

html5內聯樣式:

<!--內聯樣式-->
<style>div{border: 4px solid red;width: 300px;height: 300px;background: blue;}
</style>

優先級代碼示例

html5

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<!--css樣式-->
<!--rel="stylesheet"不能省略-->
<link href="css/myCSS.css" rel="stylesheet"/>
<!--內聯樣式-->
<style>div{border: 4px solid red;width: 300px;height: 300px;background: blue;}
</style>
<body>
<div class="d1">DIV1</div>
<div class="d2">DIV2</div>
</body>
</html>

css


.d1{border: 1px solid red;width: 200px;height: 200px;background: blue;
}
.d2{border: 10px solid darkslategrey;width: 200px;height: 200px;background: yellow;
}

CSS常見屬性

內邊距:padding組件中元素到組件的邊距,元素到盒子的距離
外邊距:margin 盒子外面周邊的距離
一個盒子占用大小:盒子大小+外邊距大小
在這里插入圖片描述

在這里插入圖片描述

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

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

相關文章

c++網吧計費系統_云游戲火了,中國14萬家網吧走向何處?

日前微軟與谷歌兩大科技巨頭紛紛宣布其在云游戲布局的最新進展&#xff0c;一時間云游戲成為游戲圈的熱門詞匯。作為云游戲一大落地場景&#xff0c;網吧這一發展了二十余年的產業&#xff0c;又將迎來新的變量。一些觀點認為云游戲將大幅降低網吧的硬件成本&#xff0c;解決網…

undefined reference to `std::ios_base::Init::Init() 解決

undefined reference to std::ios_base::Init::Init() 解決 &#xff08;一&#xff09;gcc 編譯C程序是提示錯誤undefined reference to std::ios_base::Init::Init() 的解決方法 在linux下編譯c 程序要使用g 編譯器,如果你要是使用gcc編譯器就會有上面的報錯信息,只要在在g…

Python學習10 內置屬性 對象屬性 類屬性 私有屬性 私有方法 對象方法 類方法 靜態方法

內置屬性 創建類時系統自動創建的屬性 # 內置屬性&#xff1a;dir(對象)&#xff0c;列出所有的內置屬性 class Person(object):Person類1# Person類2__slots__ (name, age)def __init__(self, name, age):self.name nameself.age agedef eat(self):print("eat!!!…

fastreport 上一行_創業天下全球總裁袁麗軍一行蒞臨平川區 電商農特產扶貧展館考察指導工作...

6 月12 日&#xff0c;創業天下全球總裁袁麗軍帶領考察組一行來平川區電商農特產扶貧展館指導電商工作。區商務局局長馮月莉、區電子商務服務中心主任李守虎陪同考察。考察中&#xff0c;袁麗軍一行就我區電商農特產扶貧展館工作開展情況、平臺運營情況、物流配送、產品商標注冊…

滴滴筆試準備 項目分配利益最大化

思路&#xff1a;求取每一列的最大數值之和 #include <iostream> #include <vector>int row,column;int main(){std::cin >> row >> column;std::vector<std::vector<int>>input(row, std::vector<int>(column, 0));for (int i 0; …

Java web后端5 JSP技術

JSP概述 HTML代碼與Java代碼共同存在 瀏覽器中顯示 啟動Tomcat 瀏覽器訪問&#xff1a;http://localhost:8083/JSPWeb_war_exploded/hello.jsp <%--Created by IntelliJ IDEA.User: DQDate: 2021/10/20Time: 9:30To change this template use File | Settings | File T…

listview bcb 行的顏色_文明交通安全行手抄報簡單又漂亮

在生活中我們要特別注意交通安全&#xff0c;因為生命是寶貴的。全國交通安全日將至&#xff0c;下面小編給大家準備了文明交通安全行手抄報&#xff0c;一起來學習交通安全知識吧!文明交通安全行手抄報交通安全常識出家門&#xff0c;路邊走&#xff0c;交通法規要遵守;過馬路…

小米C++開發 面試 準備階段和部分真題

真題 C 函數指針和指針函數的區別 o(╥﹏╥)o堆和棧的區別函數重載&#xff1f;為什么返回值不可以區分函數重載&#xff1f;o(╥﹏╥)o封裝、繼承和多態的定義&#xff0c;自己描述一下這三者的區別和聯系。多態的構成(應該是想聽虛函數&#xff0c;當時沒有想到 o(╥﹏╥…

電腦屏保海底世界_水下棲息地:人類能否在海洋中居住?真的有人住在海底嗎?...

慧緣開運講壇&#xff1a;真的有人住在海底嗎&#xff1f;對于這個問題&#xff0c;你肯定首先會想到美人魚&#xff0c;對于未知的事物&#xff0c;我們并沒有證據證明它們的存在。人類如何居住海底呢&#xff1f;那首先需要一個密閉的生態環境供進入海底的人生活。我們可以稱…

中科大 計算機網絡16 P2P應用

P2P架構 每一個節點即是客戶端又是服務器&#xff0c;分布式的&#xff0c;可靠性高 釘釘&#xff0c;QQ打電話采用P2P的方式 文件分發&#xff1a;C/S和P2P 上載&#xff1a;客戶端向服務器發送文件 下載&#xff1a;客戶端從服務器拉取文件 C/S&#xff1a; 所有的客戶端…

密碼學專題 SSL協議

SSL協議為不同的高層協議(http、FTP)提供安全服務SSL握手協議、SSL修改密文協議和SSL告警協議的目的是為了 管理 和SSL相關的密文交換連接&#xff1a;兩臺主機之間提供特定類型的數據傳輸&#xff0c;是點對點的關系&#xff1b;連接是短暫的&#xff0c;每一個連接都會和一個…

1709 ltsb 內存占用_深挖Python的內存管理機制:垃圾回收機制

Python 程序在運行時&#xff0c;需要在內存中開辟出一塊空間&#xff0c;用于存放運行時產生的臨時變量&#xff0c;計算完成后&#xff0c;再將結果輸出到永久性存儲器中。但是當數據量過大&#xff0c;或者內存空間管理不善&#xff0c;就很容易出現內存溢出的情況&#xff…

Python學習11 繼承

面向對象三大特征 繼承 Python多繼承&#xff0c;默認從左到右依次繼承&#xff0c;使用&#xff0c;隔開 默認繼承object類 #繼承了object類&#xff0c;可以省略 class m:def eat(self):print(m)class m2(object):def eat(self):print(m)繼承的注意事項 class A(object):de…

密碼學 專題 DH密鑰交換算法

注意事項&#xff1a; SSL中密鑰交換算法有6種&#xff1a;無效&#xff08;沒有密鑰交換&#xff09;、RSA、匿名Diffie-Hellman、暫時Diffie-Hellman、固定Diffie-Hellman、Fortezza生成對話密鑰一共需要三個隨機數。(客戶端生成隨機數、服務器生成隨機數、客戶端使用服務器…

qq瀏覽器網頁翻譯_iOS 14中直接在Safari瀏覽器中翻譯網頁的方法!

在 iOS 14 中&#xff0c;蘋果推出了「翻譯」的應用程序&#xff0c;可以實時翻譯數種不同的語言。同時&#xff0c;Safari 瀏覽器也新增了翻譯功能。借助新的網頁翻譯功能&#xff0c;Safari 會根據設備的首選語言列表自動檢測書否需要翻譯訪問的網頁內容&#xff0c;以便繼續…

java 輸出三位數和n位數的每一位的數

思路 規律&#xff1a;先除以/10^(n-1)再%10 三位數&#xff1a;n 個位&#xff1a;n/1%10 十位&#xff1a;n/10%100 百位&#xff1a;n/100%10 n位數&#xff1a;n 個位&#xff1a;n/10^0%10 十位&#xff1a;n/10^1%10 百位&#xff1a;n/10^2%10n位&#xff1a;n/10^(n…

密碼學專題 相關概念的解析 對稱算法|算法的安全性|非對稱算法存在的問題|單向散列函數|數字簽名的弊端|密鑰交換

對稱加密算法 對稱加密算法又可以分成流加密算法和塊加密 算法。流加密算法又稱為序列加密算法或序列密碼&#xff0c;它每次只對明文中的單個位或單個字節 進行加密操作。這種算法的優點是能夠實時進行數據傳輸和解密&#xff0c;缺點是抗攻擊能力比 較弱。塊加密算法又稱為分…

java 交換兩個數的值(臨時變量,加減,異或)

臨時變量 開發中一般使用此方式 加減 第二種寫法&#xff1a; //3.使用加減d1d1d2;d2d1-d2;d1d1-d2;System.out.println("d1"d1"\td2"d2);異或&#xff08;位運算符&#xff09; 原理 ^異或:相同為0,不同為1 總代碼 class ExchangeNumber {public st…

ipython安裝-IPython的安裝及問題解決

IPython是python的一個第三方庫&#xff0c;本來使用pip(類似于linux的yum)工具是很容易安裝的&#xff0c;但是因為版本原因有時會出些問題&#xff0c;比如2.7.x版本的不能安裝IPython的最新版本&#xff0c;會報錯&#xff1a; 報錯如下&#xff1a; [rootiZ2ze7qh6q0di3qkv…

51單片機下載完程序后不亮_程序如何下載到單片機中?單片機常用的四種燒寫程序方式介紹...

單片機是一種可編程控制器&#xff0c;搭好硬件電路后&#xff0c;可以利用程序實現很多非常復雜的邏輯功能&#xff0c;與純硬件電路相比&#xff0c;簡化了硬件外圍的設計、方便了邏輯的設計、豐富了邏輯的輸出。不同廠家的單片機需要不同編程IDE來實現編程。在學習單片機之前…