文章目錄
- 1、CSS基礎知識
- 2、css樣式
- 2.1、代碼：
- 2.2 測試結果
- 3、CSS的文法
- 3.1 代碼
- 4、塊元素和行内元素
- 4.1 代碼
- 4.2 測試結果
- 5、常用的選擇器
- 5.1 代碼塊
- 5.2 測試結果
- 6、父類和子類選擇器
- 6.1 代碼
- 6.2 測試結果
- 7、清單
- 7.1 代碼
- 7.2 測試結果
- 8、盒子模型
- 8.1 代碼
- 8.2 測試結果
- 9、内邊距
- 9.1 代碼塊
- 9.2 測試結果
- 10、外邊距
- 10.1 代碼塊
- 10.2 測試結果
- 11、塊元素和行内元素、display
- 11、代碼
- 11.2 測試結果
- 12、overflow
- 12.1 、代碼
- 12.2 測試結果
1、CSS基礎知識
2、css樣式
- 内聯樣式
- 寫在head中的style
- 外部引入（使用最多）
2.1、代碼：
外部css樣式
p{
color: green;
font-size: 20px;
} <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css樣式</title>
<!-- 寫在head中的style标簽裡，
将樣式寫在style标簽中，通過css選擇器選擇指定的元素
同時給這些元素設定樣式，複用
<style type="text/css">
p{
color: goldenrod;
font-size: 20px;
}
</style>
-->
<!-- 将樣式寫在外部檔案中，然後通過link标簽一引入外部css檔案 -->
<link rel="stylesheet" type="text/css" href="stylecss/style.css">
</head>
<body>
<p>我是style裡邊的樣式設定</p>
<!-- 内聯樣式:
将樣式直接寫在style樣式中，隻在目前有效果。耦合性大 -->
<span style="color: red; font-size: 24px;">我是内聯樣式</span>
</body>
</html> 2.2 測試結果
3、CSS的文法
3.1 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css文法</title>
<style type="text/css">/*
css的注釋，必須寫在style标簽中，或者是css檔案中
css的文法：
選擇器：聲明塊
選擇器：可以選中頁面中的指定元素，将聲明塊中的樣式應用到選擇器對應的元素上
聲明塊：緊跟在選擇器後，使用{}括起來，名值對結構，一組一組的名值對稱為聲明，聲明
和聲明之前用；隔離
*/
p{
color: goldenrod;
font-size: 20px;
}</style>
</head>
<body>
<p>我是css樣式</p>
</body>
</html> 4、塊元素和行内元素
4.1 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>塊元素和行内元素</title>
</head>
<body>
<!-- 塊元素：
所謂塊元素就是獨占一行的元素：div h1 p
div這個标簽不會給裡邊的元素設定預設樣式，主要對頁面進行布局
行内元素：
隻占自身大小的元素，不會占一行：span iamge a iframe
塊元素進行頁面的布局，内聯元素進行文本的樣式設定。塊元素可以包含行内元素。反之不可以
... -->
<div style="background-color: red; width: 100px; height: 50px;">div1</div>
<div style="color: green;">div2</div>
<hr>
<span>我是塊元素</span><span>我是塊元素</span><span>我是塊元素</span>
</body>
</html> 4.2 測試結果
5、常用的選擇器
5.1 代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>常用選擇器</title>
<style type="text/css">/*
id選擇器：通過元素的id屬性值 選中唯一的元素
文法：
#id屬性值{}
*/
#pid{
color: red;
}
/*
類選擇器：通過元素的class屬性值選中一組元素
文法：
.class屬性值{}
*/
.pid1{
color: green;
}
/*
選擇器分組：可以同時選中多個選擇器對應的元素
文法：選擇器1，選擇器2...選擇器N{}
*/
.pid1,#pid{
background-color: yellow;
}
/*
通配選擇器：可以選中頁面中的所有元素
文法：*{}
*/</style>
</head>
<body>
<p>我要學html</p>
<p id="pid">我要學html</p>
<p class="pid1">我要學html</p>
<p class="pid1">我要學html</p>
<p >我要學html</p>
</body>
</html> 5.2 測試結果
6、父類和子類選擇器
6.1 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>父元素和子元素</title>
<style type="text/css">/*
後代元素選擇器：
作用：選中指定後代元素
文法：
祖先元素 後代元素{}
*/
div p span{
color: red;
font-size: 24px;
}</style>
</head>
<body>
<!--
元素之間的關系：
父元素：直接包含子元素
子元素：直接被父元素包含
祖先元素：直接或者間接包含後代元素，父元素也是祖先元素
後代元素：直接或者間接被祖先元素包含的元素，子元素也是後代元素
兄弟元素：擁有相同父元素的元素 -->
<div>
<span>我是div中的span</span>
<p><span>我是div中的p中的span</span></p>
</div>
<span>我是body中的span</span>
</body>
</html> 6.2 測試結果
7、清單
7.1 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标題</title>
<style type="text/css">/*去掉無序清單的符号*/
ul{
list-style: none;
}</style>
</head>
<body>
<!-- 有序清單：
無序清單：
定義清單： -->
<!-- 無序清單 ：
ul：建立無序清單
li:建立清單項
type屬性可以修改項目符号
disc:實心圓點
square：實心方塊
circle：空心圓
-->
<ul type="disc">
<li>我要學全棧</li>
<li>我要學全棧</li>
<li>我要學全棧</li>
</ul>
<hr>
<!-- 有序清單：
ol:建立無序清單
li:建立清單項
type屬性修改項目符号
預設：1、2、3
a/A :A、B、C
i/I :羅馬字元
-->
<ol type="A">
<li>我要學Java</li>
<li>我要學Java</li>
<li>我要學Java</li>
</ol>
<hr>
<!-- 清單之間是可以互相嵌套的 -->
<ul type="disc">
<li>嵌套</li>
<li>
<ol type="A">
<li>我要學Java</li>
<li>我要學Java</li>
<li>我要學Java</li>
</ol>
</li>
<li>我要學全棧</li>
<li>我要學全棧</li>
</ul>
<!-- 定義清單：dl
dt:被定義的内容
dd:定義内容的描述 -->
<dl>
<dt>武松</dt>
<dd>厲害的很</dd>
<dd>打死了老虎</dd>
<dt>武大郎</dt>
<dd>武松他哥</dd>
</dl>
</body>
</html> 7.2 測試結果
8、盒子模型
8.1 代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型</title>
<style type="text/css">.box{
/*
使用width設定盒子内容區的寬度
使用height設定盒子内容區的高度
不是整個盒子的大小。内容區+内邊距+邊框=盒子大小
*/
width:400px;
height: 200px;
/*設定盒子的背景色*/
background-color: thistle;
/*
為盒子設定邊框
border-width:邊框的寬度
上右下左的順序設定和的寬度。（如果設定了盒子的四個邊框）
指定三個值，按照 上，左右，下
指定兩個值：按照 上下，左右
border-color:邊框的顔色
border-style:邊框的樣式;
*/
border-width: 5px 10px 15px 20px;
border-color: red;
border-style: solid;
}
.box1{
/*
簡寫border:同時設定四條邊
border-left border-right border-tom border-bottom
*/
width: 200px;
height: 200px;
background-color: green;
/* border:red 5px solid; */
border-left: red 5px solid;
border-right:greenyellow 10px solid ;
}</style>
</head>
<body>
<div class="box"> </div>
<br><hr>
<div class="box1"></div>
</body>
</html> 8.2 測試結果
9、内邊距
9.1 代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型-内邊距</title>
<style type="text/css">.box{
width:400px;
height: 400px;
background-color: thistle;
border: 5px red solid;
/*
内邊距：
内容區和盒子邊框的距離
*/
padding-top: 40px;
padding-left: 20px;
padding-right: 30px;
padding-bottom: 10px;
}
.box1{
/* 占居内容區域*/
height: 100%;
width: 100%;
background-color: yellow;
}</style>
</head>
<body>
<div class="box">
<div class="box1"></div>
</div>
</body>
</html> 9.2 測試結果
10、外邊距
10.1 代碼塊
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>盒子模型-外邊距</title>
<style type="text/css">.box {
width: 100px;
height: 100px;
background-color: thistle;
/*
如果值為負：代表反向移動的距離
margin-top: 距離上方距離;
margin-left:距離左邊距離
margin-right:距離右邊距離
margin-bottom:距離下邊距離
如果隻是指定margin-left或者margin-right。就自動設定邊距為最大。同時設定則會居中
*/
margin-top: 20px;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
.box1 {
/* 占居内容區域*/
height: 100px;
width: 100px;
background-color: yellow;
}</style>
</head>
<body>
<div class="box">
</div>
<div class="box1"></div>
</body>
</html> 10.2 測試結果
11、塊元素和行内元素、display
11、代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>塊元素和行内元素</title>
<style type="text/css">a{
height: 100px;
width: 100px;
background-color: red;
/*
通過display可以修改元素的類型
可選值：
inline：将一個元素作為行内元素
block:将一個元素作為塊元素
display:none 使用該方式隐藏元素，不會在頁面中顯示，不會占據頁面内容
通過visibility:設定元素的隐藏和顯示
visible:預設值，顯示
hidden:隐藏
*/
display: block;
visibility: hidden;
text-decoration: none;
}</style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<sapn>hello</sapn>
</body>
</html> 11.2 測試結果
12、overflow
12.1 、代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>overflow處理子類溢出</title>
<style type="text/css">.box{
height: 200px;
width: 200px;
background-color: red;
/*
子元素是預設在父元素的内容區，正常情況不應該從内容區域跑出來。父元素會将溢出的内容顯示在外部
可以使用overflow進行處理
可選值：
visible： 不做處理
hidden:溢出的内容會被修改
scroll：内容滾動
auto:自動添加水準或者垂直滾動條
*/
overflow: auto;
}
.box1{
height: 300px;
width: 100px;
background-color: yellow;
}</style>
</head>
<body>
<div class="box">
<div class="box1">
</div>
</div>
</body>
</html>