字型相關調整
注意：只有塊兒級標籤可以設定，行內標籤無法設定
/*寬和高*/
height: 1000px;
width: 50px;
/*字型大小*/
font-size: 99px;
/*粗細*/
font-weight: bolder;
font-weight: lighter;
/*文字顏色（重點）*/
color:red; /*第一種*/
color:#4e4e4e; /*第二種*/
color:rgb(88,88,88) /*第三種*/
rgba(88,88,88,0.2) /*最後一個引數調整透明度(0-1)*/
/*文字對齊*/
text-align: center; /*居中展示，是對於標籤所佔多大，來居中，不是佔瀏覽器中間*/
/*文字裝飾（重點）*/
text-decoration: line-through; /*刪除線*/
text-decoration: none; /*主要用於去除a標籤預設的下劃線*/
/*首行縮排*/
text-indent: 32px; /*預設文字大小是16px*/
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
text-align:center; /*居中展示*/
height: 100px;
width: 500px;
font-size: 15px;
font-weight: bolder;
color: rgb(164, 38, 38,0.8) /*第三種*/
}
p#p1{
text-align: left;
text-indent: 32px;
}
a#a1 {
color: #af2c2c;
text-decoration: none;
}
</style>
</head>
<body>
<p>沒有躺平的命，就站起來跑！</p>
<hr>
<div>
<a href="https://www.cnblogs.com/48xz/p/15831831.html" id="a1">點我有你好看</a>
</div>
<a href="https://www.cnblogs.com/48xz/p/15831831.html" id="a2">HAMMERZE’S BLOGS</a>
<p id="p1">首行縮排，來看看吧！</p>
</body>
</html>
背景相關調整
語法
background-color: orange; /*背景顏色*/
background-image: url('url'); /*背景圖片*/
background-repeat: no-repeat; /*是否鋪滿*/
background-position:上下左右中; /*圖片位置*/
/*多個屬性名字首相同 那麼可以簡寫*/
background:orange url('url') no-repeat; /*一個個編寫即可 不寫就預設*/
控制背景平鋪
background-repeat屬性用於控制影像的平鋪行為。可用的值是:
no-repeat— 不重複。repeat-x—水平重複。repeat-y—垂直重複。repeat— 在兩個方向重複。
調整背景影像的大小
在上面的例子中，我們有一個很大的影像，由於它比作為背景的元素大，所以最後被裁剪掉了。在這種情況下，我們可以使用 background-size屬性，它可以設定長度或百分比值，來調整影像的大小以適應背景。
你也可以使用關鍵字:
cover—瀏覽器將使影像足夠大，使它完全覆蓋了盒子區，同時仍然保持其高寬比。在這種情況下，有些影像可能會跳出盒子外contain— 瀏覽器將使影像的大小適合盒子內。在這種情況下，如果影像的長寬比與盒子的長寬比不同，則可能在影像的任何一邊或頂部和底部出現間隙。
在下面的例子中，我使用了上面例子中的大圖，並使用長度單位來調整方框內的大小。你可以看到這扭曲了影像。
試試下面：
- 改變用於修改背景大小的長度單位。
- 去掉長度單位，看看使用
background-size: coverorbackground-size: contain會發生什麼。 - 如果您的影像小於盒子，您可以更改background-repeat的值來重複影像。
案例
body{
height: 1000px;
width: 1000px;
background-color: orange; /*背景顏色*/
background-image: url('https://tse3-mm.cn.bing.net/th/id/OIP-C.cddoRLFs2JrnF7_Iulob9AAAAA?w=258&h=180&c=7&r=0&o=5&dpr=1.25&pid=1.7'); /*背景圖片*/
background-repeat: repeat-x; /*水平鋪滿*/
background-position:200px,200px; /*圖片位置*/
/*background-position:center; !*圖片位置*!*/
}
邊框屬性
語法：border:
border-left-color: red; /*左邊框紅色*/
border-left-style: solid; /*左邊直線邊框*/
border-left-width: 3px; /*寬度*/
/*多個屬性有相同的字首 一般都可以簡寫*/
border-left: 5px red solid; /*沒有順序*/
border-top:orange 10px dotted;
border-right: black dashed 5px;
border-bottom: deeppink 8px solid;
/*多個屬性有相同的字首 一般都可以簡寫*/
border: 5px red solid; /*上下左右一致調整*/
<!--css-->
<style>
p {
border-left: 5px red solid; /*沒有順序*/
border-top:orange 10px dotted;
border-right: black dashed 5px;
border-bottom: deeppink 8px solid;
}
</style>
<!--html-->
<p>
This is a border
</p>
案例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
background-color: #567895;
border: 5px solid #0b385f;
border-bottom-style: dashed;
color: #fff;
}
h2 {
border-top: 2px dotted rebeccapurple;
border-bottom: 1em double rgb(24, 163, 78);
}
</style>
</head>
<body>
<div class="box">
<h2>Borders</h2>
<p>Try changing the borders.</p>
</div>
</body>
</html>
圓與圓角
通過使用
border-radius屬性和與方框的每個角相關的長邊來實現方框的圓角。可以使用兩個長度或百分比作為值，第一個值定義水平半徑，第二個值定義垂直半徑。在很多情況下，您將只傳遞一個值，這兩個值都將使用；
圓形
/*高寬相等*/
div{
height: 100px;
width: 100px;
border: 5px solid red;
border-radius: 50%;
}
橢圓
/*高寬不相等*/
div{
height: 50px;
width: 100px;
border: 5px solid red;
border-radius: 50%;
}
圓角
.box {
border: 10px solid rebeccapurple;
border-radius: 1em;
border-top-right-radius: 10% 30%;
}
<div class="box">
<h2>Borders</h2>
<p>Try changing the borders.</p>
</div>
盒模型
在 CSS 中，所有的元素都被一個個的“盒子（box）”包圍著，理解這些“盒子”的基本原理，是我們使用CSS實現準確佈局、處理元素排列的關鍵；
塊級盒子（Block box） 和 內聯盒子（Inline box）
在 CSS 中我們廣泛地使用兩種“盒子” —— 塊級****盒子 (block box) 和 內聯盒子 (inline box)。這兩種盒子會在頁面流（page flow）和元素之間的關係方面表現出不同的行為:
一個被定義成塊級的（block）盒子會表現出以下行為:
- 盒子會在內聯的方向上擴充套件並佔據父容器在該方向上的所有可用空間，在絕大數情況下意味著盒子會和父容器一樣寬
- 每個盒子都會換行
width和height屬性可以發揮作用- 內邊距（padding）, 外邊距（margin） 和 邊框（border） 會將其他元素從當前盒子周圍“推開”
除非特殊指定，諸如標題(<h1>等)和段落(<p>)預設情況下都是塊級的盒子。
如果一個盒子對外顯示為 inline，那麼他的行為如下:
- 盒子不會產生換行。
width和height屬性將不起作用。- 垂直方向的內邊距、外邊距以及邊框會被應用但是不會把其他處於
inline狀態的盒子推開。 - 水平方向的內邊距、外邊距以及邊框會被應用且會把其他處於
inline狀態的盒子推開。
用做連結的 <a> 元素、 <span>、 <em> 以及 <strong> 都是預設處於 inline 狀態的。
我們通過對盒子display 屬性的設定，比如 inline 或者 block ，來控制盒子的外部顯示型別；
display屬性
將行內和塊級標籤強行改變
div {
display: inline; /*行內*/
}
span {
display: block; /*塊級*/
display: none;
/*
隱藏標籤 頁面上看不見也不再佔用頁面位置
但是通過瀏覽器查詢標籤是可以看到的
django跨站請求偽造(釣魚網站)
*/
}
p {
display: inline-block;
/*
具備塊級標籤可以修改長寬的特性
也具備行內標標籤文字多大就佔多大的特性
*/
}
盒子模型
完整的 CSS 盒模型應用於塊級盒子，內聯盒子只使用盒模型中定義的部分內容。模型定義了盒的每個部分 —— margin, border, padding, and content —— 合在一起就可以建立我們在頁面上看到的內容。為了增加一些額外的複雜性，有一個標準的和替代（IE）的盒模型；
盒模型的各個部分
CSS中組成一個塊級盒子需要:
- Content box: 這個區域是用來顯示內容，大小可以通過設定
width和height. - Padding box: 包圍在內容區域外部的空白區域； 大小通過
padding相關屬性設定。 - Border box: 邊框盒包裹內容和內邊距。大小通過
border相關屬性設定。 - Margin box: 這是最外面的區域，是盒子和其他元素之間的空白區域。大小通過
margin相關屬性設定；
通俗理解
以快遞盒為例
1.快遞盒與快遞盒之間的距離 外邊距(標籤之間的距離)
2.快遞盒的厚度 邊框
3.內部物品到盒子的距離 內邊距(文字內容到邊框的距離)
4.物品本身的大小 文字大小
body標籤預設自帶8px的外邊距，可以去掉；
body {
margin: 0;
}
外邊距：標籤之間的距離
margin簡寫
margin:0px; /*上下左右都一致*/
margin:10px 10px; /*第一個控制上下 第二個控制左右*/
margin:20px 10px 20px; /*上 左右 下*/
margin:10px 2px 3px 5px; /*上 右 下 左*/
內邊距：文字內容到邊框的距離
padding簡寫
padding:0px; /*上下左右都一致*/
padding:10px 10px; /*第一個控制上下 第二個控制左右*/
padding:20px 10px 20px; /*上 左右 下*/
padding:10px 2px 3px 5px; /* 上 右 下 左*/