1.1 選擇器
選擇器:指定某段CSS代碼做用在哪些標籤上css
1.2 元素選擇器
元素選擇器：指定某段CSS代碼做用在 哪些指定名稱的標籤上。html
格式：佈局
元素名{測試
CSS代碼字體
}編碼
<style>
span{
color:red;
}
</style>
</head>
<body>
<span>111111-紅色</span>
<span>222222-紅色</span>
<div>333333</div>
<font>44444</font>
</body>url
適用於：相同的CSS樣式，做用在某一種標籤上。spa
1.3 類選擇器
全部的HTML標籤,都有一個class屬性htm
<標籤名 class=」類名」>對象
類選擇器：指定某段CSS代碼 做用在 指定類名的標籤上
格式：
.類名{
CSS代碼
}
<style>
.redF{
color:red;
}
</style>
</head>
<body>
<span>span1：我是黑色</span>
<span class="redF">span2：我是紅色</span>
<div>div：我是黑色</div>
<div class="redF">div2：我是紅色</div>
</body>
適用於：不一樣標籤做用相一樣式
1.4 ID選擇器
全部標籤都有id屬性
<標籤名 id=」編號」>
儘可能保證：id在當前頁面是不重複、惟一
ID選擇器：指定某段CSS代碼 做用於 某個指定ID的標籤上。
格式：
#ID值{
Css代碼
}
<style>
#d1{
color:red;
}
#d2{
color:blue;
}
</style>
</head>
<body>
<span>span1：我是黑色</span>
<span>span2：我是黑色</span>
<div>div1：我是黑色</div>
<div id="d1">div2：我是紅色</div>
<div id="d2">div3：我是藍色</div>
</body>
適用於：將某同樣式 針對性地做用於 某一標籤上。
1.5 擴展：屬性選擇器
- 格式：
標籤名[屬性名=’屬性值’]{
/*css樣式代碼*/
}
<style> font[size='7']{ color:red; } </style> </head> <body> <font size="3">黑色字體1111</font> <font size="5">黑色字體2222</font> <font size="7">紅色字體</font> </body>
1.6 擴展：包含選擇器
- 格式：
選擇器1 選擇器2 …..{
/*css樣式代碼*/
}
意思爲：搜索選擇器1 下的全部的 選擇器2
<style> div font{ color:red; } </style> </head> <body> <div> <span> <font>變爲紅色字體111</font> </span> <font>變爲紅色字體222</font> 黑色字體111 </div> <font>黑色字體222</font> </body>
1.7 擴展：子對象選擇器
- 格式：
選擇器1>選擇器2 …..{
/*css樣式代碼*/
}
意思爲：搜索選擇器1 下的全部的子標籤 選擇器2
<style> div>font{ color:red; } </style> </head> <body> <div> <span> <font>黑色字體111</font> </span> <font>變爲紅色字體111</font> 黑色字體222 </div> <font>黑色字體333</font> </body>
2.1 CSS樣式
2.2.1 邊框屬性
- border:邊框
- width:寬度
- height:高度
- background-color:背景顏色
<style>
#dd{
/*
border:邊框粗細 邊框線類型 邊框線顏色
*/
border:1px solid blue;
/*
寬度、高度 ： px 百分比
*/
width:300px;
height: 300px;
/*
顏色：顏色單詞
顏色編碼
*/
background-color: bisque;
}
#dl{
width:300px;
height: 300px;
background-image: url("../img/xxx.png");
}
</style>
</head>
<body>
<div id="dd">今天週六了,你要出去走走嗎?</div>
<div id="dl">今天週六了,你要出去走走嗎?</div>
</body>
2.2.2佈局
- 格式
選擇器{float:屬性值;}
經常使用屬性值：
- none：元素不浮動（默認值）
- left：元素向左浮動
- right：元素向右浮動
- 格式：選擇器{
- clear:屬性值;
}
經常使用屬性值：
- left：不容許該元素左側有浮動元素（清除左側浮動的影響）
- right：不容許該元素右側有浮動元素（清除右側浮動的影響）
- both：同時清除左右兩側浮動的影響（通常用both）
<style> #d1{ background-color: red; width: 100px; height: 100px; float: left; } #d2{ background-color: green; width: 110px; height: 110px; float: left; /*clear:both;*/ } #d3{ background-color: blue; width: 120px; height: 120px; float: left; } </style> </head> <body> <div id="d1"></div> <div id="d2"></div> <div id="d3"></div> </body>
2.2.3轉換
- 塊元素：會自動換行
- 行內元素：不會自動換行
- 經常使用的屬性值：
- block：此元素將顯爲塊元素（塊元素默認的display屬性值）
- inline：此元素將顯示爲行內元素（行內元素默認的display屬性值）
- none：此元素將被隱藏，不顯示，也不佔用頁面空間。
2.2.4 字體
<style> span{ font-size:120px; color:red; } </style> </head> <body> <span>xxxxx</span> </body>
2.3 CSS盒子模型【重點】
2.3.1 邊框（border）
<style> div{ width: 300px; height: 300px; border-top:3px double blue; border-right:3px double red; border-bottom:3px double yellow; border-left:3px double green; /* 一次性設置四個邊框 border:3px double green; */ } </style> </head> <body> <div></div> </body>
2.3.2 內邊距(padding)
內邊距: HTML 元素裏的內容體 到 HTML 元素邊框 的距離
<style> div{ width: 300px; height: 300px; border:3px solid red; padding-top: 50px; padding-left: 50px; } </style> </head> <body> <div>這是個人測試內容</div> </body>
2.3.3 外邊距
<style> div{ width: 300px; height: 300px; border:3px solid red; margin-top: 100px; margin-left: 100px; } </style> </head> <body> <div></div> </body>
2.4 引入CSS樣式
2.4.1 內部樣式（寫在某個HTML頁面上）
修改某一個標籤的樣式：
<html標籤 style=」css樣式代碼」 />
修改某個頁面上的標籤樣式
格式:
<style>
css樣式代碼
</style>
2.4.2 外部樣式
1、建立css文件 （.css）
2、爲HTML引入css文件
格式：
<link rel="stylesheet" type="text/css" href="css文件路徑"/>
- rel="stylesheet" ,固定值，表示樣式表
- type="text/css"，固定值，表示css類型
- href ，表示css文件位置
<head> <meta charset="UTF-8"> <title>Title</title> <link rel="stylesheet" type="text/css" href="demo.css"/> </head>