日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問 生活随笔!

生活随笔

當前位置: 首頁 >

java css是什么_Java 之 CSS

發布時間:2025/4/17 56 豆豆
生活随笔 收集整理的這篇文章主要介紹了 java css是什么_Java 之 CSS 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

1.CSS

a.定義:CSS 指層疊樣式表

b.意義:為了解決內容與表現分離的問題

c.特點:多個樣式可層疊為一

2.用法:

a.行內樣式:style

99元

b.內部樣式:(只對當前網頁有效)

選擇器

①標簽選擇器

選擇器(標簽名){

屬性名:屬性值

屬性名:屬性值

p{

color:green;

}

②ID選擇器

#id名字{

屬性名:屬性值

屬性名:屬性值

#textID{

color:orange;

}

③類選擇器:

.類名{

屬性名:屬性值

屬性名:屬性值

.textClass{

color:blue;

c.外部樣式表:(通過link標簽引入)

d.優先級:行內樣式>ID選擇器>類選擇器>標簽選擇器

4.派生選擇器:

a.共享選擇器:

.myDiv,a{

color:red;

}

b.后代選擇器:

.myDiv p{

color:blue

}

c.直接子元素選擇器:

.myDiv> div>p {

color:green;

}

d.相鄰兄弟選擇器

div+p{

font-weight:bold;

}

5.屬性

a.背景屬性——background?(應用于塊級元素中)

background-color:brown;

background-image:url('image/c.jpg');

background-repeat:no-repeat; /*不平鋪*/

background-attachment:fixed; /*背景固定*/

background-position:-400px -700px; /*背景偏移*/

background:url('image/c.jpg') no-repeat center;/*另一種寫法*/

b.字體屬性——font

font-family:sans-serif;

font-style:italic; /*斜體*/

font-size:2em; /*em是基于父級容器的字體大小的倍數*/

font-weight:blod; /*粗細,可取值100-900, inherit為隨父級*/

font:cursive italic 2em 200; /*另一種寫法*/

c.文本屬性——text

text-decoration:none; /*去掉下劃線等修飾*/

text-decoration:underline; /*添加下劃線*/

text-align:center;

direction:rtl; /*對齊方式*/

line-height:30px; /*行高*/

letter-spacing:-0.5em; /*字符間距*/

word-spacing:20px; /*單詞間距*/

text-indent:50px; /*首行縮進*/

text-transform:uppercase; /*也可填lowercase、capital,代表大小寫互換和首字母大寫*/

white-space:pre-line; /*按格式換行*/

d.列表——list-style

list-style-type:decimal /*項目符號:upper-roman、lower-roman、lower-alpha、upper-alpha、disc、square等等*/

list-style-image:url("c.jpg"); /*項目符號為圖片*/

list-style-position:inside; /*有邊距*/

list-style:decimal inside; /*另一種用法*/

e.邊框屬性——border

border-style:solid;

border-width:1px;

border-color:red;

border-top-width:2px;

border:solid 1px red; /*另一種寫法*/

/*特別寫法*/

border-width:1px 3px;

注:當border-width只有一個值時,表示四邊效果一樣

當有兩個值時,表示(上下),(左右)

當有三個值時,表示(上),(左右),(下)

當有四個值時,表示(上),(右),(下),(左) (順時針)

6.偽類:

a.初始化效果

a:link{

color:darkgray;

test-decoration:none;

}

b.當鼠標懸停時的效果

a:hover{

color:green;

font-size:32px;

}

c.點擊不放的效果

a:active{

color:blue;

}

d.訪問過后的效果

a:visited{

color:gold;

}

e.焦點效果

input:focus{

background-color:lightgray;

}

7.溢出處理:

overflow:hidden; /*溢出部分隱藏*/

overflow:scroll; /*溢出部分產生滾動條*/

8.隱藏處理:

display:none; /*隱藏*/

display:block; /*以塊的形式顯示*/

visibility:hidden; /*隱藏*/

visibility:visible; /*顯示*/

9.浮動:

float:left; /*左浮動*/

float:right; /*右浮動*/

clear:both; /*清除浮動帶來的影響*/

10.定位 與 層級

a.定為:

①static:靜態的,默認的

②absolute:絕對定位

在沒有父級標簽的情況下,以瀏覽器左上角為原點

如果父級元素有定位(除了static),以父級左上角為原點,以此類推

③relative:相對定位

自己本身的左上角為原點

④fixed:固定定位

以瀏覽器的左上角為原點,并脫離了文本流

position:relative;

left:100px;/*距離左邊100px*/top:100px;/*距離上邊100px*/

b.層級:(在定位的情況下才能使用,除了static)

z-index:2;

數字越大,層級越高

11.盒子模型

a.基本組成:外邊距(margin),邊框(border),內邊距(padding)

b.只有一個值時,表示四邊效果一樣

當有兩個值時,表示(上下),(左右)

當有三個值時,表示(上),(左右),(下)

當有四個值時,表示(上),(右),(下),(左) (順時針)

margin:10px 20px;

margin-left:200px;

總結

以上是生活随笔為你收集整理的java css是什么_Java 之 CSS的全部內容,希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯,歡迎將生活随笔推薦給好友。