CSS響應式佈局

時間 2019-11-17

標籤 css 響應佈局欄目 CSS 简体版

原文原文鏈接

1、特殊選擇器

一、* 用於匹配任何的標記css

二、> 用於指定父子節點關係css3

三、E + F 毗鄰元素選擇器，匹配全部緊隨E元素以後的同級元素Fweb

四、E ~ F 匹配全部E元素以後的同級元素Fdom

五、名稱[表達式]佈局

5.1 E[att] 匹配全部具備att屬性的E元素（[att]獲取全部的定義了att的標籤；E[att=val] 匹配全部att屬性等於「val」的E元素；字體

5.2 [att=val] 獲取全部定義了att屬性而且屬性值等於val的標籤；動畫

5.3 [att^=val]獲取全部定義了att屬性而且屬性值以val開頭的標籤；url

5.4 [att$=val]獲取全部定義了att屬性而且屬性值以val結尾的標籤；spa

5.5 [att*=val]獲取全部定義了att屬性而且屬性值包含val字符的標籤；code

5.6 [att~=val]獲取全部定義了att屬性而且屬性值包含val單詞的標籤；

5.7 [att|=val]獲取全部定義了att屬性而且屬性值等於val或者以val-開頭的標籤。）

六、僞類/僞元素

6.1 css 僞類用於向某些選擇器添加特殊的效果。css 僞元素用於將特殊的效果添加到某些選擇器。

能夠明確兩點，第一二者都與選擇器相關，第二就是添加一些「特殊」的效果。這裏特殊指的是二者描述了其餘 css 沒法描述的東西。

僞類種類僞元素種類區別

這裏用僞類 :first-child 和僞元素 :first-letter 來進行比較。

p>i:first-child {color: red}

<p><i>first</i><i>second</i></p> //僞類 :first-child 添加樣式到第一個子元素

若是咱們不使用僞類，而但願達到上述效果，能夠這樣作：

.first-child {color: red}<p><i class="first-child">first</i><i>second</i></p>

即咱們給第一個子元素添加一個類，而後定義這個類的樣式。那麼咱們接着看看爲元素：

:p:first-letter {color: red}<p>i am stephen lee.</p> //僞元素 :first-letter 添加樣式到第一個字母

那麼若是咱們不使用僞元素，要達到上述效果，應該怎麼作呢？

.first-letter {color: red}
<p><span class='first-letter'>i</span> am stephen lee.</p>

即咱們給第一個字母添加一個 span，而後給 span 增長樣式。

二者的區別已經出來了。那就是：

僞類的效果能夠經過添加一個實際的類來達到，而僞元素的效果則須要經過添加一個實際的元素才能達到，這也是爲何他們一個稱爲僞類，一個稱爲僞元素的緣由。

總結：

僞元素和僞類之因此這麼容易混淆，是由於他們的效果相似並且寫法相仿，但實際上 css3 爲了區分二者，已經明確規定了僞類用一個冒號來表示，而僞元素則用兩個冒號來表示。

:pseudo-classes::pseudo-elements但由於兼容性的問題，因此如今大部分仍是統一的單冒號，可是拋開兼容性的問題，咱們在書寫時應該儘量養成好習慣，區分二者。

簡單的說呢:僞元素的權重比僞類高，好比一個容器的爲元素和僞類都定義了同一屬性，但值不同，那麼將採用僞元素的。從規範的角度僞元素一個頁面只使用一次，而僞類能夠屢次使用。僞元素產生新對象，在dom中看不到，可是能夠操做；僞類是dom中一個元素的不一樣狀態；

6.1 經常使用的僞類

6.1.1 a:hover,a:link,a:active,a:visited,:focus /*動態僞類*/

6.1.2 :disabled,:enabled,:checked,:read-only,:read-write /*UI狀態僞類*/

6.1.2.1 :read-only 只讀狀態

6.1.2.2 :read-write 非只讀狀態

6.1.3 css3僞類

6.1.3.1 :nth-child(n)其父元素的第n個元素（如：p:nth-child(2){color:red;} p元素是其父元素的第2個元素的話字體顏色就是紅色）

6.1.3.2 nth-last-child(n) 其父元素的倒數第n個元素

6.1.3.3 :nth-of-type(n) （如：p:nth-of-type(2){color:red;} p元素是其父元素的第2個p元素的話字體顏色就是紅色）

6.1.3.4 :first-child 其父元素的第一個元素

6.1.3.5 :last-child 其父元素的最後一個元素

6.1.3.6 nth-last-of-type(n) （如：p:nth-last-of-type(2){color:red;} p元素是其父元素的倒數2個p元素的話字體顏色就是紅色）

6.1.3.7 :first-of-type 其父元素的第一個p元素

6.1.3.8 :last-of-type 其父元素的最後一個p元素

6.1.4 :not() /*否認僞類選擇器*/ (如：p:not(.a){color:red;})

6.2 經常使用的僞元素

6.2.1 :before,::after

<style type="text/css">
p::before
{
content:"臺詞：";
}
</style>
</head>
<body>
<p>我是唐老鴨。</p>
<p>我住在 Duckburg。</p>
<p><b>註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。</p>
</body>

6.2.2 ::first-letter

<style type="text/css">
p::first-letter
{
color:red;
}
</style>
</head>
<body>
<p>我是唐老鴨。</p>
<p>我住在 Duckburg。</p>
<p><b>註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。</p>
</body>

6.2.3 ::first-line

<style type="text/css">
p::first-line
{
color:red;
}
</style>
</head>
<body>
<p>我是唐老鴨。</p>
<p>我住在 Duckburg。</p>
<p><b>註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。</p>
</body>

6.2.4 ::selection

<style type="text/css">
::selection
{
color:red;
background-color:#00F;
}
</style>
</head>
<body>
<p>我是唐老鴨。</p>
<p>我住在 Duckburg。</p>
<p><b>註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。註釋：</b>對於在 IE8 中工做的 :before，必須聲明 DOCTYPE。</p>
</body>

2、CSS權重

一、權重列表

<style>
/*A>B>C>D>0*/
.main-content{color:#666;}/*0*/
h3{color:#f00;}/*D*/
.h3{color:#0f0;}/*C*/
.main-content h3{color:#00f;}/*CD*/
.main-content .h3{color:#0ff;}/*CC*/
#h3{color:#ff0;}/*B*/
</style>
</head>
<body>
<div class="main-content">
   <h3 class="h3" id="h3">你好</h3>
</div>
</body>

3、CSS3新增屬性

一、定義文本樣式

1.1 文字陰影text-shadow

<style>
p
{
    font-size:60px;
    font-weight:900;
    color:#999;
    text-shadow:5px 5px 5px #333,/*水平位移、垂直位移、模糊半徑、顏色*/
    -15px 15px 5px #333,
    -15px -15px 5px #333;
}
</style>
</head>
<body>
<p>HTML5+CSS3</p>
</body>

1.2 文字縮進text-indent

1.3 文本換行

<style>
p
{
    width:100px;
    border:solid 1px red;
    word-wrap:break-word;/*斷單詞*/
    word-break:break-all;/*斷字符*/
    white-space:nowrap;/*強制在一行內顯示全部文本*/
}
</style>
</head>
<body>
 <p>中英混對薩排的時候English English English English English</p>
</body>

1.4 文本溢出

<style type="text/css">
div
{
    width:200px;
    white-space:nowrap;
    border:solid 1px red;
    text-overflow:clip;/*不顯示省略標記，而是簡單的裁切掉*/
    text-overflow:ellipsis;/*當對象內文本溢出時顯示省略標記*/
    overflow:hidden;
}
</style>
</head>

<body>
<div>的撒打算打算打算大神大神大神大神大神</div>
</body>

1.5 圓角 border-radius

1.6 陰影 box-shadow

1.7 背景圖片鋪滿 background-size:cover

1.8 transform

<style type="text/css">
#d1
{
    width:100px;
    height:100px;
    background-color:#00F;
}
#d1:hover
{
    transform:rotate(40deg) scale(1.2);/*順時針旋轉40度，放大1.2倍*/
    transform:translate(40px,40px);/*水平偏移40px,垂直偏移40px*/
    transform:skew(30deg,-10deg);/*水平傾斜30度，垂直傾斜10度*/
}
</style>
</head>

<body>
<div id="d1"></div>
</body>

1.9 平滑過渡 transition

<style type="text/css">
#d1
{
    width:100px;
    height:100px;
    background-color:#00F;
}
#d1:hover
{
    background-color:#F00;
    transition:background-color 1s ease-in;/*過渡的屬性，若是是全部的則是all，經歷的時間，過渡效果*/
}
</style>
</head>
<body>
<div id="d1"></div>
</body>

2.0 更復雜的動畫 animation

<style type="text/css">
#d1
{
    magin:0px auto;
    width:959px;
    height:613px;
    background-image:url("11.jpg");
    animation:x-spin 20s infinite linear;/*動畫名稱，經歷時間，播放次數(爲infinite則一直播放)，播放方式*/
}
@-webkit-keyframes x-spin
{
    0%{
        transform:rotateX(0deg);/*沿x軸開始旋轉*/
    }
    50%{
        transform:rotateX(180deg);/*沿x軸旋轉180*/
    }
    10%{
        transform:rotateX(360deg);/*沿x軸旋轉360*/
    }
}
</style>
</head>
<body>
<div id="d1"></div>
</body>

<style type="text/css">
#d1
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
}

@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<div id="d1"></div>
</body>

2.1 漸變

<style type="text/css">
#d1
{
    height:200px;
    width:400px;
    border:solid 1px red;
    /*線性漸變，開始位置，結束位置，開始的顏色，結束的顏色，色標（色標位置，色標顏色，能夠有多個色標，色標便是顏色過渡點）*/
    //background:-webkit-gradient(linear,left top,left bottom,from(blue),to(red),color-stop(0.4,#fff),color-stop(0.6,#fff));
    /*徑向漸變，內圓圓心位置，內圓半徑，外圓圓心半徑，外圓半徑，開始顏色，結束顏色，色標*/
    background:-webkit-gradient(radial, center center, 0, center center, 460, from(blue), to(red),color-stop(0.6,#fff));
}

</style>
</head>
<body>
<div id="d1"></div>
</body>

2.2 響應式佈局

<style type="text/css">
/*屏幕寬度大於900的時候*/
*
{
    padding:0px;
    margin:0px;
    font-family:"微軟雅黑";
}
#header
{
    height:100px;
    border:solid 1px red;
    margin:0px auto;
}
#main
{
    margin:10px auto;
    height:400px;
}
#footer
{
    margin:0px auto;
    height:100px;
    border:solid 1px red;
}
@media screen and (min-width:900px)
{
    #header,#footer
    {
        width:800px;
    }
    #main
    {
        width:800px;
        height:400px;;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-center
    {
        width:394px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
}
@media screen and (min-width:600px) and (max-width:900px)
{
    #header,#footer
    {
        width:600px;
    }
    #main
    {
        width:600px;
        height:400px;;
    }
    #main-left
    {
        width:200px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-center
    {
        width:396px;
        height:400px;
        border:solid 1px red;
        float:left;
    }
    #main-right
    {
        display:none;
    }
}
@media screen and (max-width:600px)
{
    #header,#footer
    {
        width:300px;
    }
    #main
    {
        width:300px;
        height:400px;;
    }
    #main-left
    {
        display:none;
    }
    #main-center
    {
        width:300px;
        height:400px;
        border:solid 1px red;
    }
    #main-right
    {
        display:none;
    }
}
</style>
</head>
<body>
<div id="header">頭部</div>
<div id="main">
  <div id="main-left">主題-左邊</div>
  <div id="main-center">主題-中間</div>
  <div id="main-right">主題-右邊</div>
</div>
<div id="footer"></div>
</body>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。