CSS3 基礎

時間 2020-08-17

標籤 css3 css 基礎欄目 CSS 简体版

原文原文鏈接

【僞元素選擇器】css

/* first-line 設置第一行*/
p:first-line
{
color: crimson;
}
/* first-letter 設置第一個字符*/
p:first-letter
{
color: green;
}
/* before 設置列表項以前的樣式*/
li:before
{
content: "--";
font-size: 10px;
color: darkgrey;
}
/* after 設置列表項以後的樣式*/
li:after
{
content: "註釋內容";
font-size: 10px;
color: darkgrey;
}

View Code

【結構性僞類選擇器】html

:root /*設置頁面頂級元素的樣式*/
{
background-color: Gray;
}
body /*若是同時設置了 root 和 body，那麼body只設置內容部分的樣式 */
{
background-color: Black;
}
div *:not(h1) /*除了h1標籤，其餘div下元素都設置藍色*/
{
color: blue;
}
:empty /* 設置沒有內容時的樣式*/
{
color: Green;
}
:target /* 設置頁內超連接所指向區域的樣式*/
{
background-color: Orange;
}

View Code

【子元素選擇器】web

li:first-child /*指定第一個子元素的樣式*/
{
   background-color: Yellow;
}
li:last-child /*指定最後一個子元素的樣式*/
{
   background-color: Blue;
}
li:nth-child(3) /*指定第（3）個子元素的樣式*/
{
    background-color: Red;
}
 li:nth-last-child(2) /*指定倒數第（2）個子元素的樣式*/
{
    background-color: Red;
}
li:nth-child(odd){} /* 指定基數的子元素的樣式*/ 
li:nth-last-child(odd){} /* 指定倒數是基數的子元素的樣式*/ 
li:nth-child(even){} /* 指定偶數的子元素的樣式*/ 
li:nth-last-child(even){} /* 指定倒數是偶數的子元素的樣式*/
p:nth-of-type(odd){} /*指定同類型基數的子元素的樣式，同類型！*/
p:nth-of-type(even){} /*指定同類型偶數的子元素的樣式，同類型！*/
li:only-child{} /* 設置只有一個子元素的樣式*/

/*設置li的樣式每4個循環一次*/
li:nth-child(4n+1){}
li:nth-child(4n+2){}
li:nth-child(4n+3){}
li:nth-child(4n){}

View Code

【CSS3盒子相關樣式】sass

/*display: inline / block / inline-block;
inline內聯顯示；block塊顯示。
inline-block顯示效果上同inline,可是inline設置寬度等樣式無效，使用inline-block則能夠設置寬度等。*/

/*inline-table 能夠設置table的display屬性，讓table左右能夠放置元素。*/

/* list-item 把div元素做爲列表顯示*/
div
{
    display: list-item;
    list-style-type: circle;
    margin-left: 30px;
}


/* overflow 設置對盒子中容納不下的內容的顯示*/
overflow: scroll;
overflow-x: hidden;
overflow-y: scroll; /*設置只能上下滾動*/


/* box-shadow 對盒子設置陰影*/
box-shadow:0px 0px 10px gray;


/* 指定針對元素的寬度和高度的計算方法*/
box-sizing:border-box; /*當前元素的填充間距包括在盒子中*/
box-sizing:content-box; /*當前元素的填充間距不包括在盒子中*/

View Code

【CSS3背景與邊框相關樣式】服務器

background-clip: border-box; /*包括邊框和內邊距*/
background-clip: padding-box; /*包括內邊距，不包括邊框*/
background-clip: content-box; /*不包括邊框或內邊距*/

background-origin: border-box; /*從邊框開始繪製背景圖片*/
background-origin: padding-box; /*從內邊距開始繪製背景圖片*/
background-origin: content-box; /*從內容局域開始繪製背景圖片*/

/*在一個元素中設置多個背景圖片,以逗號分隔設置屬性*/
background-image:url("a.png"),url("b.png");
background-repeat:repeat-x,no-repeat;
background-position:100%,100%,center,center;
width:1000px;
height:800px;

/*圓角邊框的繪製*/
border-radius: 20px 30px 10px 50px;

/*使用圖像邊框*/
-webkit-border-image:url("a.png") 50 50 50 60;
/*九宮格*/
width:200px;

View Code

【CSS3字體相關樣式】框架

/* text-shadow 給文字添加陰影*/
text-shadow: 5px 5px 5px Gray;

/* 使用服務器端字體*/
@font-face 
{
    font-family:MyArial;
    src:local("Arial"),
        url(fontname.ttf)format("truetype");
}

/* 修改文字種類而保持字體尺寸不變 */
font-size-adjust:0.60;
/*計算aspect的值： x-height:58 font-size:100px  aspect:0.58*/
/* c=(a/b) s */

View Code

【CSS3中的變形處理】less

/* transform 旋轉*/
transform:rotate(45deg);/*旋轉45°*/
-webkit-transform:rotate(45deg);

/* transform 縮放*/
transform:scale(3.5);/* 放大3.5倍*/

/* transform 傾斜*/
transform:skew(30deg,30deg); /*水平方向傾斜30°，垂直方向傾斜30°*/

/* transform 移動*/
transform:translate(0，250px,);/* 水平方向不動，垂直方向移動250px */

/*指定變形的基準點*/
transform-origin: right bottom;
transform-origin: top right;