java-web前端 CSS
CSS介紹
CSS 指的是層疊樣式表* (Cascading Style Sheets), 描述了如何在屏幕、紙張或其他媒體上顯示 HTML 元素,節(jié)省了大量工作,并且可以同時(shí)控制多張網(wǎng)頁(yè)的布局
外部樣式表存儲(chǔ)在 CSS 文件中
CSS:也稱級(jí)聯(lián)樣式表。
CSS語(yǔ)法
選擇器指向您需要設(shè)置樣式的 HTML 元素。
聲明塊包含一條或多條用分號(hào)分隔的聲明。
每條聲明都包含一個(gè) CSS 屬性名稱和一個(gè)值,以冒號(hào)分隔。
多條 CSS 聲明用分號(hào)分隔,聲明塊用花括號(hào)括起來(lái)。
示例:
在此例中,所有
元素都將居中對(duì)齊,并帶有紅色文本顏色:
p {color: red;text-align: center; }idea中建立css樣式
優(yōu)先級(jí)
html與css優(yōu)先規(guī)則:內(nèi)聯(lián)樣式 > 外聯(lián)樣式
CSS 優(yōu)先規(guī)則 :內(nèi)聯(lián)樣式 > ID 選擇器 > 類選擇器 = 屬性選擇器 = 偽類選擇器 > 標(biāo)簽選擇器 = 偽元素選擇器
優(yōu)先級(jí)使用
css外聯(lián)樣式:
<link href="css/myCSS.css" rel="stylesheet"/>html5內(nèi)聯(lián)樣式:
<!--內(nèi)聯(lián)樣式--> <style>div{border: 4px solid red;width: 300px;height: 300px;background: blue;} </style>優(yōu)先級(jí)代碼示例
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"/> <!--內(nèi)聯(lián)樣式--> <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 盒子外面周邊的距離
一個(gè)盒子占用大小:盒子大小+外邊距大小
總結(jié)
以上是生活随笔為你收集整理的java-web前端 CSS的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 中银证券是国企吗
- 下一篇: 2017年html5行业报告,云适配发布