Web前端 CSS基礎

阿新 • • 發佈：2021-02-18

技術標籤：Web前端 css

一、CSS基礎

1、簡介

CSS 指層疊樣式表 (Cascading Style Sheets)；

樣式定義如何顯示 HTML 元素；

樣式通常儲存在樣式表中；

把樣式新增到 HTML中，是為了解決內容與表現分離的問題；

外部樣式表可以極大提高工作效率；

外部樣式表通常儲存在 .css 檔案中；

多個樣式定義可層疊為一。

2、選擇器

1、元素選擇器

<head>
<style>
    div{
       position:absolute;
    }
</style>
</head>

<body> 

<div> 元素選擇器 </div>
</body>

2、ID選擇器

<head>
<style>
div{
		position: absolute;
        color: aqua;
    }
#div{
		position: relative;
  		color: red;
	}
</style>
</head>
<body>
	<div> 元素選擇器 </div>
	<div id="div">ID選擇器</div>
</ 
body>

3、類選擇器

<head>
<style>
        .d1{
            position: absolute;
            color: aquamarine;
        }
</style>
</head>

<body>
	<div class="d1">A</div>
	<span class="d1">B</span>
</body>

3、註釋

/* 註釋內容 */

4、長寬

< 
head>
 <style>
        #d1{
            color: aquamarine;
            width: 100px;
            border: aquamarine 2px;
        }
        #s1{
            position: absolute;
            left: 10px;
            width: 30px;
            border: chartreuse 2px;

        }
</head>
<body>
<div id="d1">A</div>
<span id="s1">B</span>
</body>

這裡需要注意一般情況下，這種設定長寬的方式，只有塊級元素生效，內聯元素，例如< span >則不會生效。

5、背景

屬性名	功能
background-colo	背景顏色
background-image:url(imagepath);	圖片做背景
url(background.jpg)	本地測試
background-repeat	背景重複
background-size: contain	背景平鋪

背景重複：
屬性：background-repeat
屬性值：
repeat 水平垂直方向都重複
repeat-x 只有水平方向重複
repeat-y 只有垂直方向重複
no-repeat 無重複

背景平鋪：
屬性：background-size
屬性值：contain

6、文字

屬性	功能
color	文字顏色
text-align	文字對齊
text-decoration	文字修飾
line-height	文字行間距
letter-spacing	字元間距
word-spacing	單詞間距
text-indent	首行縮排
text-transform	大小寫
white-space	空白格

文字對齊：

屬性: text-align
值：left、right、center
div是塊級元素，其預設寬度是100%，所以文字有對齊的空間前提；
span是內聯元素其預設寬度就是其文字內容的寬度，所以看不出對齊效果。

<style>
div,span{
    border: 1px gray solid;
  	margin:10px;
}
div#left{
	text-align:left;
}
div#right{
    text-align:right;
}
div#center{
    text-align:center;
}
span#right{
    text-align:right;
}
</style>

<div id="left">左對齊</div>
<div id="right">右對齊</div>
<div id="center">居中</div>
<span id="right">span看不出右對齊效果</span>

文字修飾：

屬性：text-decoration
值： overline、line-through、underline、blink、none

<style>
h1 {text-decoration: overline}
h2 {text-decoration: line-through}
h3 {text-decoration: underline}
h4 {text-decoration:blink}
.a {text-decoration: none}
</style>
<body>
<h1>上劃線</h1>
<h2>刪除效果</h2>
<h3>下劃線</h3>
<h4>閃爍效果</h4>
<a href="https://baidu.com/">預設超鏈</a>
<a class="a" href="https://baidu.com/">去掉下劃線的超鏈</a>
</body>

這裡需要注意 text-decoration ：none 常用於修飾超連結。

文字大小寫：

屬性：text-transform
屬性值：
uppercase 全部大寫
capitalize 首字母大寫
lowercase 全部小寫

<head>
<style>
#A {text-transform:uppercase}
#B {text-transform:capitalize}
#C {text-transform:lowercase}
</style>
</head>

<body>
<div id="A">abcd</div>
<div id="B">aBCD</div>
<div id="C">ABCD</div>
</body>

文字空白格：

屬性：white-space
屬性值：
normal 預設，多個空白格或者換行符會被合併成一個空白格；
pre 有多少空白格，顯示多少空白格，如果長度超出也不會換行；
pre-wrap 有多少空白格，顯示多少空白格，如果長度超出，會換行；
nowrap 一直不換行；

<head>
<style>
#n {white-space:normal}
#p {white-space:pre}
#pw {white-space:pre-wrap}
#nw {white-space:nowrap}
</style>
</head>

<body>
<div id="n">
在預設情況下，多個     空白格或者
換行符
    會被     合併成一個空白格
</div>

<div id="p">
保留所有的    空白格
以及換行符
不會換行
特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字
</div>

<div id="pw">
保留所有的    空白格
以及換行符
會換行
特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字特別長的一段文字
</div>

<div id="nw">
不會換行
不會換行
不會換行
不會換行
不會換行
不會換行
直到br<br/>才換行
</div>
</body>

7、字型

屬性	功能
font-size	字型大小
font-style	風格
font-weight	粗細
font-family	字型檔
font	宣告在一起

風格：
normal 標準字型
italic 斜體

粗細：
normal 標準粗細
bold 粗體

字型檔：
Times New Roman
Arial
宋體 IE預設字型
黑體
楷體
微軟雅黑火狐預設字型

8、滑鼠樣式

屬性：cursor

在這裡插入圖片描述

9、邊框

關鍵字	簡介
border-style	邊框風格
border-color	邊框顏色
border-width	邊框寬度
border	三合一
border-top，border-left	邊框方向

邊框風格：
solid 實線
dotted 點狀
dashed 虛線
double 雙線

邊框方向：

<head>
<style>
   #lefttop{
   width:150px;
   height:150px;
   border-top-style:solid;
   border-top-color:red;
   border-top-width: 50px;
   border-left-style:solid;
   border-left-color:blue;
   border-left-width: 50px;   
   background-color:lightgray;   
  }
  #alldirection{
   width:150px;
   height:150px;
   border-style:solid;
   border-width: 50px;
   border-top-color:red;
   border-left-color:blue;  
   border-bottom-color:green;
   border-right-color:yellow;  
   background-color:lightgray;   
  }
</style>
</head>

<div id="lefttop">左邊和上邊都有邊框</div>
<br>
<div id="alldirection"> 四邊都有邊框</div>

10、邊距

1、內邊距

內邊距：指的是元素裡的內容與邊框之間的距離；
padding-left: 左內邊距
padding-right: 右內邊距
padding-top: 上內邊距
padding-bottom: 下內邊距
padding: 上右下左

如果缺少左內邊距的值，則使用右內邊距的值；
如果缺少下內邊距的值，則使用上內邊距的值；
如果缺少右內邊距的值，則使用上內邊距的值；

2、外邊距

外邊距：指的是元素邊框和元素邊框之間的距離；
margin-left: 左外邊距
margin-right: 右外邊距
margin-top: 上外邊距
margin-bottom: 下外邊距

11、超鏈狀態

超鏈狀態有4種
link 初始狀態，從未被訪問過；
visited 已訪問過；
hover 滑鼠懸停於超鏈的上方；
active 滑鼠左鍵點選下去，但是尚未彈起的時候。

<head>
<style>
a:link {color: #FF0000}
a:visited {color: #00FF00}
a:hover {color: #FF00FF}
a:active {color: #0000FF}
a.no_underline {text-decoration: none}
</style>
</head>
<body>
<a href="http://www.12306.com">超鏈的不同狀態</a>
<br>
<a class="no_underline" href="http://www.12306.com">去除了下劃線的超鏈</a>
</body>

12、隱藏

display:none：隱藏一個元素，這個元素將不再佔有原空間 空間讓出來
visibility:hidden：隱藏一個元素，這個元素繼續佔有原空間，只是“看不見”

<style>
div.d{
  display:none;
}
div.v{
  visibility:hidden;
}
</style>

<div> 可見的div1 </div>
<div class="d">隱藏的div2 </div>
<div> 可見的div3 </div>
<div class="v">隱藏的div4 </div>
<div> 可見的div5 </div>

13、css檔案

<head>
<link rel="stylesheet" type="text/css" href="file://c:/" />
</head>

優先順序：
style.css與style標籤樣式重複，優先使用最後出現的一個；
style標籤內的屬性與標籤內的style屬性衝突，優先使用標籤內的style屬性；
如果樣式上增加了!important，則優先順序最高，甚至高於style屬性。

二、CSS 佈局

1、定位

1、絕對定位

position:absolute
通過指定left、top絕對定位一個元素；
如果有父容器，則位置以父容器為基礎定位；
如果沒有父容器，則以< body >為父容器

<head>
<style>
div{
  position: absolute;
  left: 50px;
  top: 50px;
}
</style>
</head>
<body>
	<div>絕對定位</div>
</body>

2、相對定位

position:relative
與絕對定位不同的是，相對定位不會把該元素原空間刪除掉，而是在原空間的位置的基礎上，移動一定的距離。

<head>
<style>
div{
  position: realtive;
  left: 50px;
  top: 50px;
}
</style>
</head>
<body>
	<div>相對定位</div>
</body>

3、z-index

通過絕對定位可以把一個元素放在另一個元素上，這樣位置會重複。重複就存在一個誰掩蓋誰的問題，這個時候就可以使用z-index屬性，當z-index的值越大，就表示放上面，z-index:越小就表示放下面。

2、浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。

<head>
 <style>
        div{
            width: 100px;
            height: 100px;
            background: aqua ;
        }
        #left{
            float: left;
        }
        #right{
            float:right;
        }
    </style>
</head>
<body>
	<div id="left">左浮動</div>
	<div id="right">右浮動</div>
</body>

文字圍繞圖片：

當圖片不浮動時，文字就會換行出現在下面；

當圖片浮動時，文字圍繞著圖片。

清除浮動：
clear：left、right、both、none

預設< div >佈局是換行的，如果使用 float 就可以實現水平排列的效果，通常會用在選單，導航欄等。如果超出了父容器，還會自動換行。

3、顯示方式

屬性	功能
display:none	隱藏
display:block	塊級元素
display:inline	內聯元素
display:inline-block	內聯-塊級元素

隱藏：

display:none，使得被選擇的元素隱藏，並且不佔用原來的空間。

塊級元素：

display:block，塊級元素會自動在前面和後面加上換行，並且可以自定義長寬，即width and height。
例如：< div >、< h1 >

內聯元素：
display:inline，內聯元素前後沒有換行，並且 width 和 height 無效，其大小由其中的內容決定。
例如：< span>、< input >

內聯-塊級元素：
內聯是不換行，並且不能指定大小；
塊級能換行，能指定大小；
所以內聯-塊級元素即 display：inline-block，可以實現不換行、指定大小
這一特性。

<head>
    <style>
        div{
            width: 50px;
            height: 50px;
            background-color: aqua;
            display: inline-block;
        }
    </style>
</head>

<body>
    <div>一</div>
    <div>二</div>
    <div>三</div>
</body>

4、水平居中

內容居中：

<head>
<style>
div{
  border:1px solid lightgray;
  margin:10px;
}
</style>
</head>

<body>
<div align="center"> 通過設定屬性align="center"實現內容居中</div>
<div  style="text-align:center">通過樣式style="text-align:center"實現內容居中</div>
</body>

元素居中：

<head>
<style>
  div{
     border: solid 1px lightgray;
     margin: 10px;
  }
  span{
     border: solid 1px lightskyblue;
  }
</style>
</head>

<body>
<div>預設情況下< div >會佔用100%的寬度,所以無法觀察元素是否居中</div>
<div style="width:300px;margin:0 auto">設定< div >的寬度，然後再使用樣式 margin: 0 auto來使得元素居中</div>
<span style="width:300px;margin:0 auto">< span >是內聯元素，無法設定寬度，所以不能通過margin:0 auto居中</span>
<div style="text-align:center">
	<span>< span >的居中可以通過放置在div中，然後讓div text-align實現居中</span>
</div>
</body>

5、垂直居中

Line-height方式：

<head>
<style>
#d{
	line-height: 100px;
} 
div{
	border:solid 1px lightskyblue;
}
</style>
</head>
<body>
<div id="d"> line-height 適合單獨一行垂直居中</div>
</body>

內邊距方式：

<head>
<style>
#d {
    /*上下30 左右0*/
	padding: 30 0;
}
div{
 	border:solid 1px lightskyblue;
}
</style>
</head>
<body>
<div id="d">多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容 多行內容  </div>
</body>