CSS-part1
一. CSS選擇器
1.css引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 嵌入式 -->
<style>
p {
color: #0d93ff;
font-size: 30px;
}
</style>
<!-- 外鏈式: 常用. 符合解耦合 -->
<link rel="stylesheet" href="css/a.css">
<!-- 導入式: 了解 -->
<style>
@import url(css/a.css);
</style>
</head>
<body>
<!--行內式-->
<!--<p style="color:red;font-size: 50px">你好呀</p>-->
<p>來沖啊</p>
</body>
</html>
css樣式後面的樣式會將前面的覆蓋
2.基本選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- id選擇器-->
<style>
#p1 {
color: red;
}
</style>
<!-- 類選擇器 -->
<style>
.p2 {
color: yellow;
font-size: 50px;
text-decoration: underline;
}
</style>
</head>
<body>
<p class="p2">111</p>
<p id="p1">222</p>
<p class="p2">333</p>
</body>
</html>
3.選擇器後代與兄弟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!-- 組合選擇器不一定必須是標籤名. 常配合類屬性使用-->
<style>
/*匹配div子孫後代中含有p標籤的*/
div p {
color: #0d93ff;
}
/* 相鄰兄弟選擇器: 只會向下找相鄰兄弟*/
div+p {
color: red;
font-size: 50px;
}
/* 同級選擇器. 向下*/
div~p {
color: yellow;
}
/* 兒子選擇器: 只找兒子節點*/
div>p {
color: red;
}
/* 藉助類選擇器定位的p標籤 */
.box2 ul p {
color: green;
}
</style>
</head>
<body>
<p>我是你爹</p>
<div>
<p>哈哈啊哈哈哈</p>
<ul>
<li>
<ul>
<li>
<p>孫慶軍</p>
</li>
<li>
<p>給我沖</p>
</li>
<li>
<p>快點</p>
</li>
</ul>
</li>
</ul>
</div>
<hr>
<p>我是兒子</p>
<div class="box2">
<p>hello world</p>
<ul>
<li>
<ul>
<li>
<p>what</p>
</li>
<li>
<p>are you doing</p>
</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
4.交並集選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*一般是標籤名配合類屬性進行使用*/
/*交集選擇器*/
div.box1 {
font-size: 100px;
color: yellow;
}
/*並集選擇器*/
div,h1 {
color: red;
}
</style>
</head>
<body>
<div class="box1">
<ul>
<li>
<p>我是孫慶軍</p>
<h2>我想沖</h2>
<a href="">點我啊</a>
</li>
</ul>
</div>
<h1 class="box1">恩額嗯</h1>
</body>
</html>
5.序列選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/* 同級別中第一個是p標籤 */
p:first-child {
color: red;
}
/* 同級別中最後一個是p標籤 */
p:last-child {
color: yellow;
}
/* 同級別中第三個是p標籤 */
p:nth-child(3) {
color: green;
}
/* 同級別中尋找第一個p標籤 */
p:first-of-type {
color: royalblue;
}
/* 同級別中尋找最後一個p標籤 */
p:last-of-type {
color: #2f0099;
}
/* 同級別中尋找p標籤中的第三個*/
p:nth-of-type(3) {
color: #e700b9;
}
/* 同一級別只有一個p標籤的 */
p:only-child {
color: #9e2633;
}
/* 同一級別同一類型 */
p:only-of-type {
color: red;
}
</style>
</head>
<body>
<h1>what</h1>
<p>我是段落1</p>
<p>我是段落2</p>
<p>我是段落3</p>
<p>我是段落4</p>
<p>我是段落5</p>
<div>
<p>我是段落6</p>
<a href=""></a>
<p>我是段落7</p>
<p>我是段落8</p>
<ul>
<li>
<table></table>
<p>我是菜雞</p>
<a href=""></a>
</li>
</ul>
</div>
</body>
</html>
6.屬性選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
/* 屬性選擇器是完全匹配.如果想多匹配只能加上各種通配符 */
[id] {
color: red;
}
p[id] {
font-size: 30px;
}
p[class="part1"] {
color: green;
}
a[href^="https"] {
font-size: 50px;
}
img[src$="png"] {
width: 100px;
}
[class*="part"] {
text-decoration: line-through;
}
</style>
</head>
<body>
<h1 id="id1">哈哈啊</h1>
<p id="id2">我是段落</p>
<p class="part1">我是段落</p>
<p class="xxx part2 yyy">我是段落</p>
<a href="#">我是我</a>
<a href="//www.baidu.com">//www.baidu.com</a>
<a href="//www.baidu.com">//www.baidu.com</a>
<img src="1.png" alt="">
<img src="2.jpg" alt="">
<p>我是段落</p>
<p>我是段落</p>
</body>
</html>
7.偽類選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*超鏈接樣式*/
a:link {
color: red;
}
/*鼠標在超鏈接上懸浮*/
a:hover {
color: blue;
font-size: 50px;
}
/*超鏈接長按*/
a:active {
color: green;
}
/*超鏈接點擊後*/
a:visited {
color: red;
}
/*標籤點擊*/
input:focus {
background: red;
outline: none;
}
</style>
</head>
<body>
<a href="//www.baidu.com">啥鬼額</a>
<p>
用戶名:<input type="text" >
</p>
</body>
</html>
8.偽元素選擇器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*對首字母進行操作*/
p:first-letter {
font-size: 50px;
}
/*在p標籤前面加東西*/
p:before {
content: '*';
color: red;
}
/*在p標籤後面加東西*/
p:after {
content: '//';
color: green;
}
</style>
</head>
<body>
<p>hello world</p>
</body>
</html>
9.css三大特性
1. 繼承性
定義: 給某一個元素設置一些屬性中. 該元素後代也可以使用. 這個就是繼承性
注意:
1. 只有以color.font-.text-.line-開頭的屬性才可以繼承
2. a標籤的文字顏色和下劃線是不能繼承別人的
3. h標籤的文字大小是不能繼承別人的. 會變大. 但會在原來字體的基礎上變大
應用場景:
通常基於繼承性同一設置網頁的文字顏色. 字體. 文字大小等樣式
2. 層疊性
定義: css: Cascading StyleSheet層疊樣式表.層疊性指的是css處理衝突的一種能力
多個選擇器選中一個標籤會產生覆蓋效果
注意:
1. 層疊性只有在多個選擇器選中了同一個標籤. 然後設置了相同的屬性. 才回發生層疊性
3. 優先級
定義: 當多個選擇器選中同一個標籤.並且給同一個標籤設置相同的屬性時. 如何層疊就由優先級來決定
優先級:
整體優先級從高到低: 行內樣式>嵌套樣式和外部樣式
1. 大前提: 直接選中>間接選中(即繼承而來的)
#1、以下為直接選中
<style type="text/css">
#id1 {
color: red;
}
.ppp {
color: green;
}
p {
color: blue;
}
</style>
#2、以下為間接選中
<style type="text/css">
ul {
color: yellow;
}
</style>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
2. 如果都是直接選中. 那麼誰離目標標籤比較近. 就聽誰的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
/*離目標近*/
li {
color: red;
}
/*離目標遠*/
ul {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
3. 如果都是直接選中. 並且都是同類型的選擇器. 那麼就是誰寫的後面就聽誰的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>後代選擇器</title>
<style type="text/css">
p {
color: red;
}
/*同樣都是標籤選擇器，誰寫在後面誰生效*/
p {
color: yellow;
}
</style>
</head>
<body>
<ul>
<li>
<p id="id1" class="ppp">我是span</p>
</li>
</ul>
</body>
</html>
4. 如果都是直接選中，並且是不同類型的選擇器，那麼就會按照選擇器的優先級來層疊
id > 類 > 標籤 > 通配符(也算直接選中) > 繼承 > 瀏覽器默認（即沒有設置任何屬性）
5. 添加!important可強制修改優先級
* {
color: yellow !important;
}
二. CSS樣式布局
1.文字屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
p {
font-weight: bolder;
font-style: italic;
font-size: 50px;
font-family: "Bitstream Vera Sans Mono", "DejaVu Sans Mono", Monaco, monospace;
/*可直接按照順序寫一行*/
/*font: bolder italic 50px "Bitstream Vera Sans";*/
/*設置顏色 透明度*/
color: rgba(200, 100, 500, 0.5);
}
</style>
</head>
<body>
<p>一行白鷺上青天</p>
</body>
</html>
2.文本屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 200px;
height: 200px;
background: red;
/*文本排列*/
/*text-align: center;*/
/*設置字體高度適配*/
line-height: 200px;
/*text-decoration: underline;*/
text-decoration: line-through;
/*設置縮進*/
text-indent: 20px;
}
</style>
</head>
<body>
<div>
你幹嘛...
</div>
</body>
</html>
3.背景屬性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
/*設置盒子大小*/
width: 500px;
height: 500px;
background-color: red;
/*背景圖片會平鋪整個背景*/
background-image: url(img/dog.jpg);
/*可以設置跟背景一個大小. 設置x軸. y軸也會適配*/
background-size: 100px 100px;
background-repeat: no-repeat;
/*background-repeat: repeat-x;*/
/*background-repeat: repeat-y;*/
/*設置背景圖片的位置*/
/*background-position: 水平方向 垂直方向位置;*/
background-position: left top;
/*可以在當前標籤中固定或隨着頁面滾動而滾動*/
background-attachment: fixed;
}
.box2 {
width: 200px;
height: 200px;
background: #9261ff;
}
</style>
</head>
<body>
<div class="box1">
<!-- 圖片背景只是個背景. 不會佔用位置. 這一串數字會出現在圖片上面-->
<p>12739812379</p>
</div>
<div class="box2">
fasdfasd
</div>
</body>
</html>
背景圖片和插入圖片的區別:
1、
背景圖片僅僅只是一個裝飾，不會佔用位置，
插入圖片會佔用位置
2、
背景圖片有定位屬性，可以很方便地控制圖片的位置，
而插入圖片則不可以
3、
插入圖片語義比背景圖片的語義要強，所以在企業開發中如果你的圖片
想被搜索引擎收錄，那麼推薦使用插入圖片
4.導航條拼接
練習：累計成一個大背景可以減少帶寬，流量
前端優化方式：1.靜態文件壓縮，下載到本地，減少空間
2.使用精靈圖，減少發送網絡io次數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*導航條拼接*/
.box1 {
width: 100%;
height: 50px;
background-image: url(img/dht.png);
background-repeat: repeat-x;
}
</style>
</head>
<body>
<div class="box1">
</div>
</body>
</html>
5.精靈圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*將大圖片的指定位置移動到小div的位置顯示. 實現截取部分圖標*/
.box1 {
width: 86px;
height: 28px;
background-image: url(img/icon.png);
background-position: -425px -100px;
}
</style>
</head>
<body>
<div class="box1"></div>
</body>
</html>
6.盒子邊框
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*設置邊框樣式*/
.box1 {
width: 200px;
height: 200px;
background: red;
/*border: 1px solid black;*/
/*border: 1px dotted black;*/
/*border-width: 1px 2px 3px 4px;*/
/*border-style: solid dotted dashed double;*/
/*border-color: blue darkgreen black #FCFDFA;*/
border: 1px solid black;
/*添加弧度邊框*/
border-radius: 10px;
/*控制文本*/
text-align: center;
/*奇淫技巧*/
line-height: 200px;
}
</style>
</head>
<body>
<div class="box1">
11111
</div>
</body>
</html>
7.內邊距
注意:
1 給標籤設置內邊距後，標籤內容佔有的寬度和高度會發生變化，設置padding之後標籤內容的寬高是在原寬高的基礎上加上padding值。如果不想改變實際大小，那就在用寬高減掉padding對應方向的值
2 padding是添加給父級的，改變的是父級包含的內容的位置
3 內邊距也會有背景顏色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div {
width: 150px;
height: 150px;
border: 1px solid black;
background-color: red;
}
.box1 {
padding-bottom: 50px;
}
.box2 {
padding-top: 50px;
}
.box3 {
padding-left: 50px
}
.box4 {
padding-right: 50px
}
.box5 {
padding: 70px;
}
</style>
</head>
<body>
<div class="box1">我是文字我是文字</div>
<hr>
<div class="box2">我是文字我是文字</div>
<hr>
<div class="box3">我是文字我是文字</div>
<hr>
<div class="box4">我是文字我是文字</div>
<hr>
<div class="box5">我是文字我是文字</div>
</body>
</html>
8.外邊距
一、！！！css顯示模式:塊級、行內、行內塊級
在HTML中HTML將所有標籤分為兩類，分別是容器級和文本級
在CSS中CSS也將所有標籤分為兩類，分別是容器級是塊級元素和行內元素
#1、HTML中容器級與文本級
容器級標籤：可以嵌套其他的所有標籤
div、h、ul>li、ol>li、dl>dt+dd
文本級標籤：只能嵌套文字、圖片、超鏈接
span、p、buis、strong、em、ins、del
#2、CSS中塊級與行內
塊級：塊級元素會獨佔一行，所有的容器類標籤都是塊級，文本標籤中的p標籤也是塊級
div、h、ul、ol、dl、li、dt、dd 還有標籤p
行內：行內元素不會獨佔一行，所有除了p標籤以外的文本標籤都是行內
span、buis、strong、em、ins、del
行內塊級
img
#3、塊級元素與行內元素的區別
1、塊級元素block
獨佔一行
可以設置寬高
若沒有設置寬度，那麼默認和父元素一樣寬（比如下例中的div的父元素是body，默認div的寬就是body的寬）
若沒有設置寬高，那麼就按照設置的來顯示
2、行內元素inline
不會獨佔一行
不可以設置寬高
盒子寬高默認和內容一樣
3、行內塊級元素inline-block
不會獨佔一行
可以設置寬高
二、！！！CSS顯示模式轉換
可以通過標籤的display屬性設置顯示模式
none HTML 文檔中元素存在，但是在瀏覽器中不顯示。一般用於配合JavaScript代碼使用
block 塊級
inline 行內
inline-block 行內塊級
display:"none"與visibility:hidden的區別：
visibility:hidden: 可以隱藏某個元素，但隱藏的元素仍需佔用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
display:none: 可以隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本佔用的空間也會從頁面布局中消失。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*去掉默認外邊距.內邊距*/
* {
padding: 0;
margin: 0;
}
div {
width: 150px;
height: 150px;
}
/*margin設置外邊距*/
.box1 {
border: 1px solid red;
margin-top: 100px;
margin-left: 100px;
margin-bottom: 70px;
/*padding-top: 30px;*/
/*padding-left: 30px;*/
box-sizing: border-box;
}
.box2 {
border: 1px solid green;
margin-top: 60px;
}
/*設置成行內塊級
1、外邊距的那一部分是沒有背景顏色的
2、外邊距合併現象
在默認布局的水平方向上，默認兩個盒子的外邊距會疊加
而在垂直方向上，默認情況下兩個盒子的外邊距是不會疊加的，會出現合併現象，誰的外邊距比較大，就聽誰的*/
.box3 {
border: 1px solid blue;
display: inline-block;
margin-right: 50px;
}
.box4 {
border: 1px solid yellow;
display: inline-block;
margin-left: 100px;
}
.box5 {
border: 1px solid grey;
}
/*位於box1的內容嵌套中*/
.boxx {
width: 20px;
height: 20px;
background-color: red;
/*margin-top: 30px;*/
/*margin-left: 30px;*/
}
</style>
</head>
<body>
<div class="box1">
1111
<div class="boxx"></div>
</div>
<div class="box2">
22222
</div>
<div class="box3">
333
</div>
<div class="box4">
4444
</div>
<div class="box5">
5555
</div>
</body>
</html>
9.盒子居中及內容居中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 600px;
background-color: red;
/*設置行高和內邊距讓文本居中*/
text-align: center;
line-height: 25px;
padding-top: 250px;
padding-bottom: 250px;
/*自動減小padding填充的*/
box-sizing: border-box;
/*盒子相對於父元素水平居中*/
margin: 0 auto;
}
</style>
</head>
<body>
<div class="box1">
你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊你好啊
</div>
</body>
</html>
10.文字溢出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box1 {
width: 200px;
height: 200px;
background: red;
word-break: break-all;
}
.box2 {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="box1">
fadfkadjsfkljdddddddkaldfja;ldsfjdkl;ajfkl;djfkadlksfjdklfjadklfjadslk
</div>
<hr>
<div class="box2">fasdkffadsfasdfasdfasdfdasfadsfddsjf</div>
</body>
</html>
