當(dāng)前位置：首頁 > 前端技术 > HTML >内容正文

HTML

java-web前端 CSS

發(fā)布時間：2023/12/13 HTML 47 豆豆

生活随笔收集整理的這篇文章主要介紹了 java-web前端 CSS 小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

CSS介紹

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

CSS語法

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

示例：
在此例中，所有

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

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

idea中建立css樣式

優(yōu)先級

html與css優(yōu)先規(guī)則：內(nèi)聯(lián)樣式 > 外聯(lián)樣式
CSS 優(yōu)先規(guī)則：內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器

優(yōu)先級使用

css外聯(lián)樣式：

html5內(nèi)聯(lián)樣式：

<style>div{border: 4px solid red;width: 300px;height: 300px;background: blue;} </style>

優(yōu)先級代碼示例

html5

<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head>   <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常見屬性

內(nèi)邊距：padding組件中元素到組件的邊距，元素到盒子的距離
外邊距：margin 盒子外面周邊的距離
一個盒子占用大小：盒子大小+外邊距大小

總結(jié)

以上是生活随笔為你收集整理的java-web前端 CSS的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。