CSS泣鬼神

時間  2019-12-14
標籤 css 鬼神 欄目 CSS 简体版
原文   原文鏈接

1、CSS介紹和語法  

CSS（Cascading Style Sheet，層疊樣式表)定義如何顯示HTML元素。css

每一個CSS樣式由兩個組成部分：選擇器和聲明。聲明又包括屬性和屬性值。每一個聲明以後用分號結束。html

 

/*這是註釋*/

2、CSS的幾種引入方式  

 行內樣式css3

<p style="color: red">Hello world.</p>

 

內部樣式瀏覽器

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。 ide

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
</head>

 

 外部樣式佈局

外部樣式就是將css寫在一個單獨的文件中，而後在頁面進行引入便可。推薦使用。字體

<link href="mystyle.css" rel="stylesheet" type="text/css"/>

 

3、CSS選擇器  

 一、基本選擇器

標籤選擇器：網站

p {color: "red";}

ID選擇器:ui

#i1 {
  background-color: red;
}

類選擇器:url

.c1 {
  color: red;
}

　　注意：

　　　　樣式類名不要用數字開頭。

　　　　標籤中的class屬性若是有多個，要用空格分隔。

通用選擇器:

* {
  color: white;
}

 

二、組合選擇器

 後代選擇器：使用空格表示後代選擇器。

.container p{
color: red; 
}
.container .item p{
color: yellow;
}

兒子選擇器：使用>表示子代選擇器。

/*選擇全部父級是 <div> 元素的 <p> 元素*/
div>p {
  font-family: "Arial Black", arial-black, cursive;
}

毗鄰選擇器

/*選擇全部緊接着<div>元素以後的<p>元素*/
div+p {
  margin: 5px;
}

弟弟選擇器

/*i1後面全部的兄弟p標籤*/
#i1~p {
  border: 2px solid royalblue;
}

 三、屬性選擇器

屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。

 1 /*用於選取帶有指定屬性的元素。*/
 2 p[title] {
 3   color: red;
 4 }
 5 /*用於選取帶有指定屬性和值的元素。*/
 6 p[title="213"] {
 7   color: green;
 8 }
 9 
10 
11 /*找到全部title屬性以hello開頭的元素*/
12 [title^="hello"] {
13   color: red;
14 }
15 
16 /*找到全部title屬性以hello結尾的元素*/
17 [title$="hello"] {
18   color: yellow;
19 }
20 
21 /*找到全部title屬性中包含（字符串包含）hello的元素*/
22 [title*="hello"] {
23   color: red;
24 }
25 
26 /*找到全部title屬性(有多個值或值以空格分割)中有一個值爲hello的元素：*/
27 [title~="hello"] {
28   color: green;
29 }
30 
31 不怎麼經常使用的屬性選擇器
屬性選擇器

 

四、並集選擇器和嵌套

並集選擇器：多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可使用並集選擇器

/*並集選擇器*/
h3,a{
    color: #008000;
    text-decoration: none;
                
}

嵌套：多種選擇器能夠混合起來使用，好比：.c1類內部全部p標籤設置字體顏色爲紅色。

.c1 p {
  color: red;
}

五、僞類選擇器

/* 沒有被訪問的a標籤的樣式 */
a:link {
  color: #FF0000
}

/* 訪問事後的a標籤的樣式 */
a:visited {
  color: #00FF00
} 

/* 鼠標懸停時a標籤的樣式 */
a:hover {
  color: #FF00FF
} 

/* 鼠標摁住的時候a標籤的樣式 */ 
a:active {
  color: #0000FF
}

/*input輸入框獲取焦點時樣式*/
input:focus {
  outline: none;
  background-color: #eee;
}

 1         /*選中第一個元素*/
 2         div ul li:first-child{
 3             font-size: 20px;
 4             color: red;
 5         }
 6         /*選中最後一個元素*/
 7         div ul li:last-child{
 8             font-size: 20px;
 9             color: yellow;
10         }
11         
12         /*選中當前指定的元素  數值從1開始*/
13         div ul li:nth-child(3){
14             font-size: 30px;
15             color: purple;
16         }
17         
18         /*n表示選中全部,這裏面必須是n, 從0開始的  0的時候表示沒有選中*/
19         div ul li:nth-child(n){
20             font-size: 40px;
21             color: red;
22         }
23         
24         /*偶數*/
25         div ul li:nth-child(2n){
26             font-size: 50px;
27             color: gold;
28         }
29         /*奇數*/
30         div ul li:nth-child(2n-1){
31             font-size: 50px;
32             color: yellow;
33         }
34         /*隔幾換色  隔行換色
35              隔4換色 就是5n+1,隔3換色就是4n+1
36             */
37         
38         div ul li:nth-child(5n+1){
39             font-size: 50px;
40             color: red;
41         }
css3的選擇器nth-child()

六、僞元素選擇器

first-letter：經常使用的給首字母設置特殊樣式

p:first-letter {
  font-size: 48px;
  color: red;
}

before

/*在每一個<p>元素以前插入內容*/
p:before {
  content:"*";
  color:red;
}

after

/*在每一個<p>元素以後插入內容*/
p:after {
  content:"[?]";
  color:blue;
}

before和after多用於清除浮動。

七、繼承性和選擇器的優先級

繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承。

 

選擇器的優先級

除此以外還能夠經過添加 !important方式來強制讓樣式生效，但並不推薦使用。由於若是過多的使用!important會使樣式文件混亂不易維護。

層疊性： 權重的標籤覆蓋掉了權重小的標籤，說白了 ，就是被幹掉了
權重： 誰的權重大，瀏覽器就會顯示誰的屬性

4、CSS屬性相關  

一、寬和高

width屬性能夠爲元素設置寬度。

height屬性能夠爲元素設置高度。

塊級標籤才能設置寬度，內聯標籤的寬度由內容來決定。

二、字體屬性

文字字體：font-family能夠把多個字體名稱做爲一個「回退」系統來保存。若是瀏覽器不支持第一個字體，則會嘗試下一個。

body {
  font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}

字體大小

p {
  font-size: 14px;
}

字重（粗細） ：font-weight用來設置字體的字重（粗細）。

值 描述
normal 默認值，標準粗細
bold 粗體
bolder 更粗
lighter 更細
100~900 設置具體粗細，400等同於normal，而700等同於bold
inherit 繼承父元素字體的粗細值

文本顏色：color屬性

顏色屬性被用來設置文字的顏色。

顏色是經過CSS最常常的指定：
　　十六進制值 - 如: ＃FF0000
　　一個RGB值 - 如: RGB(255,0,0)
　　顏色的名稱 - 如:  red
還有rgba(255,0,0,0.3)，第四個值爲alpha, 指定了色彩的透明度/不透明度，它的範圍爲0.0到1.0之間

三、文字屬性

文字對齊：text-align 屬性規定元素中的文本的水平對齊方式。

值 描述
left 左邊對齊 默認值
right 右對齊
center 居中對齊
justify 兩端對齊

 

文字裝飾text-decoration 屬性用來給文字添加特殊效果。

值 描述
none 默認。定義標準的文本。
underline 定義文本下的一條線。
overline 定義文本上的一條線。
line-through 定義穿過文本下的一條線。
inherit 繼承父元素的text-decoration屬性的值。

經常使用的爲去掉a標籤默認的下劃線：

a {
  text-decoration: none;
}

 

首行縮進：將段落的第一行縮進 32像素：

p {
  text-indent: 32px;
}

四、背景屬性

/*背景顏色*/
background-color: red;
/*背景圖片*/
background-image: url('1.jpg');
/*
 背景重複
 repeat(默認):背景圖片平鋪排滿整個網頁
 repeat-x：背景圖片只在水平方向上平鋪
 repeat-y：背景圖片只在垂直方向上平鋪
 no-repeat：背景圖片不平鋪
*/
background-repeat: no-repeat; 
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/

簡寫：

background:#ffffff url('1.png') no-repeat right top;

CSS Sprites也叫css精靈，把一些細小的圖片集中放置在一張圖片當中，而後利用css的"background-image","background-repeat","background-position"的組合進行背景定位，其中"background-position"能夠精確地定位出背景圖片的位置。

五、邊框

邊框屬性 

  • border-width
  • border-style
  • border-color
#i1 {
  border-width: 2px;
  border-style: solid;
  border-color: red;
}

簡寫方式

#i1 {
  border: 2px solid red;
}

 

邊框樣式

值 描述
none 無邊框。
dotted 點狀虛線邊框。
dashed 矩形虛線邊框。
solid 實線邊框。

 

除了能夠統一設置邊框外還能夠單獨爲某一個邊框設置樣式：

#i1 {
  border-top-style:dotted;
  border-top-color: red;
  border-right-style:solid;
  border-bottom-style:dotted;
  border-left-style:none;
}

六、border-radius：實現圓角邊框的效果。

將border-radius設置爲長或高的一半或者50%便可獲得一個圓形。

也能夠用來倒圓角。

七、display屬性

值 意義
display:"none" HTML文檔中元素存在，可是在瀏覽器中不顯示。通常用於配合JavaScript代碼使用。
display:"block" 默認佔滿整個頁面寬度，若是設置了指定寬度，則會用margin填充剩下的部分。
display:"inline" 按行內元素顯示，此時再設置元素的width、height、margin-top、margin-bottom和float屬性都不會有什麼影響。
display:"inline-block" 使元素同時具備行內元素和塊級元素的特色。

display:"none"與visibility:hidden的區別：

  • visibility:hidden: 能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。
  • display:none: 能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

八、CSS盒子模型

  • margin:            用於控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到相互隔開的目的。
  • padding:           用於控制內容與邊框之間的距離；   
  • Border(邊框):     圍繞在內邊距和內容外的邊框。
  • Content(內容):   盒子的內容，顯示文本和圖像。

 

margin外邊距：順序：上右下左

.margin-test {
  margin: 5px 10px 15px 20px;
}

常見居中：

.mycenter {
  margin: 0 auto;
}

 

padding內填充：順序：上右下左

.padding-test {
  padding: 5px 10px 15px 20px;
}

padding的經常使用簡寫方式：

  • 提供一個，用於四邊；
  • 提供兩個，第一個用於上－下，第二個用於左－右；
  • 若是提供三個，第一個用於上，第二個用於左－右，第三個用於下；
  • 提供四個參數值，將按上－右－下－左的順序做用於四邊；

九、浮動和清除浮動

浮動

float三種取值：

  • left：向左浮動
  • right：向右浮動
  • none：默認值，不浮動

 

clear屬性規定元素的哪一側不容許其餘浮動元素。

注意：clear屬性只會對自身起做用，而不會影響其餘元素。

值 描述
left 在左側不容許浮動元素。
right 在右側不容許浮動元素。
both 在左右兩側均不容許浮動元素。
none 默認值。容許浮動元素出如今兩側。
inherit 規定應該從父元素繼承 clear 屬性的值。

 

清除浮動

主要有三種方式：

  • 固定高度
  • 僞元素清除法
  • overflow:hidden

 

僞元素清除法（使用較多）：

.clearfix:after {
  content: "";
  display: block;
  clear: both;
}

1               content: ".";
2                 display: block;
3                 height: 0;
4                 clear: both;
5                 visibility: hidden
新浪首頁僞元素清楚 

十、 overflow溢出屬性 

值 描述
visible 默認值。內容不會被修剪，會呈如今元素框以外。
hidden 內容會被修剪，而且其他內容是不可見的。
scroll 內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto 若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit 規定應該從父元素繼承 overflow 屬性的值。

 

  • overflow（水平和垂直均設置）
  • overflow-x（設置水平方向）
  • overflow-y（設置垂直方向）

十一、定位（position）

定位有三種：

1.相對定位 2.絕對定位 3.固定定位

 

relative（相對定位）：

  • 相對定位是以本身原始位置爲參照物。
  • 設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。
  • 設置相對定位以後，咱們纔可使用四個方向的屬性： top、bottom、left、right

注意：position：relative的一個主要用法：方便絕對定位元素找到參照物。

 

absolute（絕對定位）：

  • 設置爲絕對定位的元素框從文檔流徹底刪除，並相對於最近的已定位祖先元素定位
  • 若是元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊（即body元素）。
  • 元素原先在正常文檔流中所佔的空間會關閉，就好像該元素原來不存在同樣。

重點：

  • 若是父級設置了position屬性，例如position:relative;，那麼子元素就會以父級的左上角爲原始點進行定位。
  • 這樣能很好的解決自適應網站的標籤偏離問題，即父級爲自適應的
  • 那我子元素就設置position:absolute;父元素設置position:relative;，而後Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。

 

fixed（固定）：

  • fixed：對象脫離正常文檔流
  • 使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。

注意點：

  • 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。
  • 由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。
  • 在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>返回頂部示例</title>
 8   <style>
 9     * {
10       margin: 0;
11     }
12 
13     .d1 {
14       height: 1000px;
15       background-color: #eeee;
16     }
17 
18     .scrollTop {
19       background-color: darkgrey;
20       padding: 10px;
21       text-align: center;
22       position: fixed;
23       right: 10px;
24       bottom: 20px;
25     }
26   </style>
27 </head>
28 <body>
29 <div class="d1">111</div>
30 <div class="scrollTop">返回頂部</div>
31 </body>
32 </html>
返回頂部示例 　　　　 
 1 *{
 2             padding: 0;
 3             margin: 0;
 4         }
 5         .box{
 6             width: 100%;
 7             height: 69px;
 8             background: #000;
 9         }
10         .box .c{
11             width: 960px;
12             height: 69px;
13             background-color: pink;
14             /*margin: 0 auto;*/
15             position: relative;
16             left: 50%;
17             margin-left: -480px;
18 
19             /*設置絕對定位以後，margin:0 auto;不起任何做用，若是想讓絕對定位的盒子居中。當作公式記下來 設置子元素絕對定位，而後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/
20         }
絕對定位盒子居中

 

 z-index

#i2 {
  z-index: 999;
}

設置對象的層疊順序

  1. z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
  2. 只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
  3. z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
  4. 從父現象：父親慫了，兒子再牛逼也沒用

 

十二、opacity

用來定義透明效果。取值範圍是0~1，0是徹底透明，1是徹底不透明。 

 

 1 <!DOCTYPE HTML>
 2 <html>
 3 <head>
 4   <meta charset="UTF-8">
 5   <meta http-equiv="x-ua-compatible" content="IE=edge">
 6   <meta name="viewport" content="width=device-width, initial-scale=1">
 7   <title>圓形的頭像示例</title>
 8   <style>
 9     * {
10       margin: 0;
11       padding: 0;
12       background-color: #eeeeee;
13     }
14     .header-img {
15       width: 150px;
16       height: 150px;
17       border: 3px solid white;
18       border-radius: 50%;
19       overflow: hidden;
20     }
21     .header-img>img {
22       max-width: 100%;
23     }
24   </style>
25 </head>
26 <body>
27 
28 <div class="header-img">
29   <img src="圖片地址" alt="">
30 </div>
31 
32 </body>
33 </html>
34 
35 圓形頭像示例
圓形頭像示例
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程