2.CSS

時間 2019-12-11

標籤 2.css css 欄目 CSS 简体版

原文原文鏈接

什麼是 CSS?

CSS 指層疊樣式表 (Cascading Style Sheets)
樣式定義如何顯示 HTML 元素，如顏色，大小，粗細，字體，邊框，佈局編排等等

CSS樣式有哪幾種?具體是怎樣表現的？

內聯樣式（inline-style），位於 HTML元素標籤內部。
內部樣式表（internal style sheet），位於 <head> 標籤內部。
外部樣式表（External style sheet），以.css文件形式單獨存在。

<--!內聯樣式-->
<p style="color:sienna;margin-left:20px">這是一個段落。</p>


<--!內部樣式表-->
<style>    
  選擇器 {屬性名稱: 屬性值;}    
  h2 {color: red;}    
</style>


<--!外部樣式表，HTML引用聲明-->
<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

/* .css文件 */
h {color:sienna;}           
p {margin-left:20px;}            
body {background-image:url(/images/back40.gif);}

CSS樣式優先級別

內聯樣式（inline-style）> 內部樣式表（internal style sheet）> 外部樣式表（External style sheet）> 瀏覽器默認樣式
同同樣式同一選擇器的重複渲染，後者會覆蓋前者
同同樣式不一樣選擇器，Id選擇器的優先級大於class選擇器
若是樣式被後者覆蓋，如還想使用初始樣式。能夠加上！important強制使用當前樣式

<style>
body {
color: green;
}
<--!以下樣式會覆蓋上面body樣式-->
.pink-text{
    color:pink; 
}
</style>
<body>
    <h1 class="pink-text">Hello World!</h1>
</body>



.pink-text {
color: pink;
}
<--!一樣下面的會覆蓋前面的，而不會取決class在元素中的前後-->
.blue-text{
    color:blue;   
}
</style>
<body>
<h1 class="blue-text pink-text ">Hello World!</h1>
</body>



<--!  id優先級>class優先級 -->
#orange-text{
    color:orange;
}
.pink-text {
color: pink;
}
.blue-text {
color: blue;
}
</style>
<body>
<h1 class="pink-text blue-text" id='orange-text'>Hello World!</h1>
</body>



#orange-text {
color: orange ;
}
<--!尚方寶劍在手，此時又是他生效了哦-->
.pink-text {
color: pink !important;
}
.blue-text {
color: blue;
}
</style>
<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>

CSS選擇器

1.標籤選擇器

p  選擇全部<p>元素
{ 
    background-color:yellow;
}


h1,p  選擇全部<h1>元素和<p>元素
{ 
background-color:yellow;
}

div p  選擇<div>元素內的全部<p>元素
{ 
background-color:yellow;
}

div>p   選擇全部父級是 <div> 元素的 <p> 元素
{ 
background-color:yellow;
}

div+p   選擇全部緊接着<div>元素以後的<p>元素
{ 
background-color:yellow;
}

2.id選擇器

#firstname  選擇全部id="firstname"的元素
{ 
background-color:yellow;
}
<--! 注意同一個ID只能在一個HTML文件中出現一次，可聯想爲ID card  -->

3.class選擇器

.intro  選擇全部class="intro"的元素
{ 
background-color:yellow;
}

<--! 注意同一個class在一個HTML文件中可屢次使用 -->

4.屬性選擇器

a[target]      選擇全部帶有target屬性元素
{ 
background-color:yellow;
}


a[target=_blank]  選擇全部使用target="-blank"的元素
{ 
background-color:yellow;
}


[title~=flower]  選擇標題屬性包含單詞"flower"的全部元素
{ 
background-color:yellow;
}

[lang|=en]  選擇一個lang屬性的起始值="EN"的全部元素
{ 
background-color:yellow;
}

5.僞元素和僞類

僞元素：控制的內容和元素是沒有差異的，可是它自己只是基於元素的抽象，並不存在於文檔中，因此稱爲僞元素。如first-letter，first-line等。css

僞類：因爲狀態的變化是非靜態的，因此元素達到一個特定狀態時，它可能獲得一個僞類的樣式；當狀態改變時，它又會失去這個樣式。由此能夠看出，它的功能和class有些相似，但它是基於文檔以外的抽象，因此叫僞類。如anchor，first-child等。html

<--! 僞元素使用方法 -->
selector:pseudo-element {property:value;}

selector.class:pseudo-element {property:value;}

p:first-letter 
{
color:#ff0000;
font-size:xx-large;
}

<--! 僞類使用方法 -->

selector:pseudo-class {property:value;}

selector.class:pseudo-class {property:value;}

<html> 
<head> 
<style> 
<--! p標籤第一行變藍 -->
p:first-child 
{ 
color:blue; 
} 
</style> 
</head> 

<body> 
<p>I am a strong man.</p>  
<p>I am a strong man.</p> 
</body> 
</html>

CSS 盒子模型(Box Model)

全部HTML元素能夠看做盒子，在CSS中，"box model"這一術語是用來設計和佈局時使用。CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。segmentfault

盒模型容許咱們在其它元素和周圍元素邊框之間的空間放置元素。下面的圖片說明了盒子模型(Box Model)：瀏覽器

Margin（外邊距） - 清除邊框區域。Margin沒有背景顏色，它是徹底透明
Border（邊框） - 邊框周圍的填充和內容。邊框是受到盒子的背景顏色影響
Padding（內邊距） - 清除內容周圍的區域。會受到框中填充的背景顏色影響
Content（內容） - 盒子的內容，顯示文本和圖像

重要: 當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，徹底大小的元素，你還必須添加填充，邊框和邊距。

下面的例子中的元素的總寬度爲300px：佈局

width:250px;        
padding:10px;        
border:5px solid gray;        
margin:10px;

CSS Positioning(定位)

CSS定位屬性容許你爲一個元素定位。它也能夠將一個元素放在另外一個元素後面，並指定一個元素的內容太大時，應該發生什麼。post

元素可使用的頂部，底部，左側和右側屬性定位。然而，這些屬性沒法工做，除非事先設定position屬性。他們也有不一樣的工做方式，這取決於定位方法.字體

有四種不一樣的定位方法。url

1.Static 定位

HTML元素的默認值，即沒有定位，元素出如今正常的流中。spa

靜態定位的元素不會受到top, bottom, left, right影響。設計

2.Fixed 定位

元素的位置相對於瀏覽器窗口是固定位置。

即便窗口是滾動的它也不會移動：

p.pos_fixed 
{ 
position:fixed; 
top:30px; 
right:5px; 
}

3.Relative 定位

相對定位元素的定位是相對其正常位置。能夠移動的相對定位元素的內容和相互重疊的元素，它本來所佔的空間不會改變。

h2.pos_left 
{ 
position:relative; 
left:-20px; 
} 
h2.pos_right 
{ 
position:relative; 
left:20px; 
}

4.Absolute 定位

絕對定位的元素的位置相對於最近的已定位父元素，若是元素沒有已定位的父元素，那麼它的位置相對於<html>:

h2 
{ 
position:absolute; 
left:100px; 
top:150px; 
}

Absolutely定位使元素的位置與文檔流無關，所以不佔據空間。Absolutely定位的元素和其餘元素重疊。

5.重疊的元素

元素的定位與文檔流無關，因此它們能夠覆蓋頁面上的其它元素。z-index屬性指定了一個元素的堆疊順序（哪一個元素應該放在前面，或後面）

一個元素能夠有正數或負數的堆疊順序：

img 
{ 
position:absolute; 
left:0px; 
top:0px; 
z-index:-1; 
}

具備更高堆疊順序的元素老是在較低的堆疊順序元素的前面。

注意： 若是兩個定位元素重疊，沒有指定z - index，最後定位在HTML代碼中的元素將被顯示在最前面。

CSS Float(浮動)

CSS float 屬性定義元素在哪一個方向浮動，浮動元素會生成一個塊級框，直到該塊級框的外邊緣碰到包含框或者其餘的浮動框爲止。默認塊級標籤會獨佔一行，用float可讓塊級標籤浮動在一塊兒。

元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。一個浮動元素會盡可能向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。

浮動元素以後的元素將圍繞它。浮動元素以前的元素將不會受到影響。

<--! 右浮動 -->
img 
{ 
float:right; 
}

<--! 並列浮動 -->
.thumbnail 
{ 
float:left; 
width:110px; 
height:90px; 
margin:5px; 
}

<--! 清除浮動 -->
.text_line 
{ 
clear:both; 
}

最後，關於僞類和僞元素的區別，能夠參考以下連接：

1.CSS3僞類和僞元素的特性和區別：http://www.javashuo.com/article/p-hpvzweoj-g.html

2.詳解 CSS 屬性 - 僞類和僞元素的區別：http://www.javashuo.com/article/p-diaxzxtr-gu.html

1. css(2)
2. CSS-2
3. CSS - 2
4. css 2
5. CSS基礎知識(2 css)
6. css-2(css選擇器)
7. 重學CSS（2）
8. 2、$CSS部分
9. css學習 -- 2
10. 2九、CSS
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• 適用於PHP初學者的學習線路和建議

相關標籤/搜索

每日一句

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