溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
行內式是在標記的style屬性中設定CSS樣式。不推薦大規模使用。
<p >Hello world.</p>嵌入式是將CSS樣式集中寫在網頁的<head></head>標簽對的<style></style>標簽對中。格式如下：
<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"/>p {color: "red";}#i1 {
background-color: red;
}.c1 {
font-size: 14px;
}
p.c1 {
color: red;
}標簽中的class屬性如果有多個，要用空格分隔
* {
color: white;
}/*li內部的a標簽設置字體顏色*/
li a {
color: green;
}/*選擇所有父級是 <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;
}/*用于選取帶有指定屬性的元素。*/
p[title] {
color: red;
}
/*用于選取帶有指定屬性和值的元素。*/
p[title="213"] {
color: green;
}分組
當多個元素的樣式相同的時候，我們沒有必要重復地為每個元素都設置樣式，我們可以通過在多個選擇器之間使用逗號分隔的分組選擇器來統一設置元素樣式。
例如：
div, p {
color: red;
}.c1 p {
color: red;
}同等選擇器，越靠近標簽的優先級越高（就近原則）
/* 鼠標移動到鏈接上 */
a:hover {
color: #FF00FF
}
/*input輸入框獲取焦點時樣式*/
input:focus {
outline: none;
background-color: #eee;
}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多用于清除浮動。
width屬性可以為元素設置寬度。
height屬性可以為元素設置高度。
塊級標簽才能設置寬度，內聯標簽的寬度由內容來決定。
文字字體、字體大小
body {
font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif
}
p {
font-size: 14px;
}如果設置成inherit表示繼承父元素的字體大小值
字重（粗細）
font-weight用來設置字體的字重（粗細）。
| 值 | 描述 |
|---|---|
| bold | 粗體 |
文本顏色
顏色屬性被用來設置文字的顏色。
顏色是通過CSS最經常的指定：
還有rgba(255,0,0,0.3)，第四個值為alpha, 指定了色彩的透明度/不透明度，它的范圍為0.0到1.0之間。
文字對齊
text-align 屬性規定元素中的文本的水平對齊方式。
| 值 | 描述 |
|---|---|
| left | 左邊對齊 默認值 |
| right | 右對齊 |
| center | 居中對齊 |
文字裝飾
text-decoration 屬性用來給文字添加特殊效果
常用的為去掉a標簽默認的自劃線：
a {
text-decoration: none;
}首行縮進
將段落的第一行縮進 32像素：
p {
text-indent: 32px;
}兩倍于font-size的設置就是縮進兩個字體
https://www.cnblogs.com/liwenzhou/p/7999532.html
用這個屬性能實現圓角邊框的效果。
將border-radius設置為長或高的一半即可得到一個圓形。
.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}推薦使用簡寫：
.margin-test {
margin: 5px 10px 15px 20px;
}順序：上右下左
常見居中：
.mycenter {
margin: 0 auto;
}示例：設置一個列表
效果：
<style>
/*取消ul標簽前面的標志*/
ul {
list-style-type: none;
}
/*把li標簽轉成行級標簽*/
li {
display: inline;
}
/*把a標簽下劃線取消，右邊框設置1px實線紅色，padding上下設置0，左右設置15px*/
li>a {
text-decoration: none;
border-right: 1px solid red;
padding: 0 15px;
}
/*不顯示最后一個li標簽的右邊框*/
li.last>a {
border-right: none;
}
</style><ul>
<li><a href="">大米商城</a></li>
<li><a href="">小魅商城</a></li>
<li><a href="">錘科商城</a></li>
<li class="last"><a href="">華為商城</a></li>
</ul>在 CSS 中，任何元素都可以浮動。
浮動元素會生成一個塊級框，而不論它本身是何種元素。
關于浮動的兩個特點：
三種取值
left：向左浮動
right：向右浮動
none：默認值，不浮動
.c2 {
float: left;
height: 100px;
width: 100px;
}clear屬性規定元素的哪一側不允許其他浮動元素。
| 值 | 描述 |
|---|---|
| left | 在左側不允許浮動元素。 |
| right | 在右側不允許浮動元素。 |
| both | 在左右兩側均不允許浮動元素。 |
clear屬性只會對自身起作用，而不會影響其他元素。
舉例：解決父標簽塌陷，清除浮動
因為c1和c2都是浮動元素，所以撐不起父標簽，此時利用偽元素添加一個元素，同事設置清除左側浮動可以把父標簽撐起來，這個偽元素本身不需要有高度
<div id="d1" class="clearfix">
<div class="c1">c1</div>
<div class="c2">c2</div>
</div>.clearfix:after {
content: "";
clear: left;
display: block;
}| 值 | 描述 |
|---|---|
| visible | 默認值。內容不會被修剪，會呈現在元素框之外。 |
| hidden | 內容會被修剪，并且其余內容是不可見的。 |
| scroll | 內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。 |
| auto | 如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。 |
| inherit | 規定應該從父元素繼承 overflow 屬性的值。 |
圓形頭像示例：
<style>
.header-img {
width: 120px;
height: 120px;
border: 2px solid silver;
/*設置為原型*/
border-radius: 100%;
/*如果溢出則隱藏*/
overflow: hidden;
}
.header-img>img {
max-width: 100%;
}
</style><div class="header-img">
<img src="https://s4.51cto.com//oss/201901/03/d4ad6e4650cfe4f35e18a5c76d2af13f.jpg" alt="">
</div>效果：
左 右 上 下
left right top bottom
示例：
返回頂部按鈕樣式示例
<div class="scrollTop">返回頂部</div><style>
* {
margin: 0;
}
.fixed-test {
/*固定位置*/
position: fixed;
/*用右和下定位*/
right: 20px;
bottom: 20px;
background-color: olivedrab;
}
</style>脫離文檔流的三種方式
float
absolute 絕對定位
fixed 固定定位
示例：自定義的模態框
<div class="c1"></div>
<div class="c2"></div>.c1 {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: rgba(0,0,0,0.5);
z-index: 999;
}
.c2 {
height: 400px;
width: 600px;
position: fixed;
background-color: white;
top: 50%;
left: 50%;
margin-top: -200px;
margin-left: -300px;
z-index: 1000;
}取值0~1
和rgba()的區別:
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
