前端_CSS復習

文章目錄

- CSS復習
- - 1. css三種引入方式
  - - 1.1 行內樣式
    - - 常用樣式：
    - 1.2頁內樣式
    - - 常見選擇器：
      - 1. 標記選擇器
        2. id選擇器
        3. 類選擇器（最常用）
        4. 星號選擇器，頻率很低
        5. 復合選擇器
        6. 偽類選擇器：
        7. 子元素偽類
    - 1.3引入外部樣式表文件
  - 盒模型 Box-Model
  - - 浮動
    - 打破默認規則：
    - 清除浮動：
    - position 定位：
  - 布局
  - - 圣杯布局
    - - 等分布局

CSS復習

前端三大件：無競品，極簡
html：框架結構
css：負責樣式修飾
js:行為交互，動畫效果

CSS:層疊樣式表 Cascade Style Sheet

1. css三種引入方式

1.1 行內樣式

寫在標記之中，使用style屬性
樣式之間無順序

常用樣式：

color:前景色顏色：
1.1英文單詞
1.2RGB表示法
1.3.RGB表示法的16進制寫法。#ab00c3
1.4.簡寫的十六進制表示法如果每兩位相同則可簡寫為一位#000

font - weight：字重

font-size: 30px 字號

weight寬 400px

height高 400px

font-family 字體如"宋體"

text-decoration,文字周圍各種線，比如underline下劃線

text-align: ;文本位置，如center居中

缺點：僅能修飾行內標記

px：像素是邏輯像素不同電腦1px不一定一樣大
物理像素：真實發光點一共多少個
邏輯像素：類似縮放，把幾個物理像素合成一個

1.2頁內樣式

選擇器。用來選擇修飾的目標元素
缺點：僅能修飾當前頁

常見選擇器：

1. 標記選擇器

h1{
}

就是選擇頁面中所有h1標記

2. id選擇器

<h1 id="ni">你</h1> 賦予一個id，
在style里：

  #ni{background-color: blue;}

得到id為ni的標記被設置背景色為藍色
在這里插入圖片描述

3. 類選擇器（最常用）

  <h1 class="f32">你你</h1>

  <p class="f32">這是段落</p>

class表示同一類
在style里寫

 .f32{font-size: 32px;}

在這里插入圖片描述

4. 星號選擇器，頻率很低

全局選中：

  *{background-color: pink;}

5. 復合選擇器

  高級選擇器，將基礎選擇器組合使用

子代選擇器 a>b 只能選擇直接子代，比如h1嵌套p,p嵌套a，則h1和p是子代關系，h1不能選擇a
2. 后代選擇器 a b，依照上例，h1可以嵌套a
3. 兄弟選擇器 a+b緊鄰弟或者 a~b 所有弟，注意：該選擇器修改的不包括a自己
4. 交集選擇器 ab 注意書寫不要讓瀏覽器產生歧義，修改的是b的屬性
5. 并集選擇器 a，b，修改的是a和b的屬性

6. 偽類選擇器：

    1. 超鏈接偽類愛恨準則:hover對一切標記有效其他三個只對超鏈接有效：:link  超鏈接默認狀態下:visited   訪問過后:active    激活態

在這里插入圖片描述

7. 子元素偽類

       :first-child:last-childnth-child(3)/* 第一個兒子前加一個元素 */

    ul::before{content: "A";}

在這里插入圖片描述

偽元素選擇器

1.3引入外部樣式表文件

目前企業開發最常用
在這里插入圖片描述

盒模型 Box-Model

在css中，將任意一個元素，都視作一個盒子。

margin 外邊距
padding 內邊距
border 邊框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>盒模型</title><style>.outer{width: 400px;height: 200px;background-color: pink;border: 10px solid green;/* 外邊距 *//* margin: 30px; *//* 四個單獨寫，外邊距上下左右 */margin-left: 30px;margin-right: 30px;margin-top: 30px;margin-bottom: 30px;/*寫四個 順時針方向  上右下左 *//* margin: 10px 20px 30px 40px; *//* 寫三個 ：上 左 右 *//* margin: 10px 20px 30px; *//* 寫兩個 上下 左右 *//* 內邊距 */padding: 20px;/* padding-left: 10px;padding-right: 20px;padding-top: 30px;padding-bottom: 40px; *//* 左邊框 *//* border-left: 10px solid green;/* 右邊框 *//* border-right: 20px dotted green; */ /* 邊框 */border: 30px solid green;border-width: 30px 30px 30px 30px;border-style: solid solid solid solid;border-color: green;}</style>
</head>
<body><div class="outer">1111</div>
</body>
</html>

在這里插入圖片描述

如何給塊元素添加背景圖片
background-image: url(./imgs/image.png);

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>背景圖片</title><style>.outer{width: 800px;height: 800px;background-color: pink; background-image: url(./imgs/image.png); /* 平鋪模式 *//* 不平鋪 */background-repeat:no-repeat ;/* 橫向平鋪 *//* background-repeat: repeat-x; *//* 縱向平鋪 *//* background-repeat: repeat-y; *//* 大小  寬 高 *//* 背景圖的尺寸 *//* background-size: 30px 30px; *//* background-size: auto 50px; *//* 縮放到背景圖片正好能被包含，確保整個背景圖片都顯示在元素背景中，圖片不會被裁剪，但這可能導致元素中留有空白區域。 *//* background-size: contain; *//* 縮放到正好覆蓋整個元素背景 *//* background-size: cover; *//* 控制位置 *//* background-position: 100px 100px; *//* background-position:  center; *//* background-position: 10% center; *//* 或者 *//* background: pink url(./imgs/image.png) no-repeat center center / cover; */}</style>
</head>
<body><div class="outer"></div>
</body>
</html>

浮動

文檔流的默認規則
1。塊元素從下向上排列，獨占一行
2，行內元素從左右排列

打破默認規則：

1.浮動：float

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>浮動</title><style>.d1{width: 200px;height: 100px;background-color: pink;float: left;}.d2{width: 300px;height: 150px;background-color: green;float: left;}.d3{width: 400px;height: 200px;background-color: yellow;float: left;}/* 浮動順序和.d1,.d2聲明順序無關，和下面定義順序有關 */.d4{width: 40px;height: 30px;background-color: blueviolet;}.clear{clear: both;} </style></head>
<body><div class="d1"></div><div class="d2"></div><div class="d3"></div><div class="clear"></div><div class="d4"></div> 
</body>
</html>

例子：
橫向菜單：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>橫向菜單</title><style>.nav{list-style-type: none;margin: 0;padding: 0;}.nav>li{float: left;background-color: rgba(0, 0, 0, 0.5);padding: 8PX 5px;}.nav>li:hover{background-color:chocolate;}.nav>li>a{/* 下劃線 */text-decoration: none;/* text-decoration: dashed; */color: #fff;}/* .clear{clear: both;} *//* 利用偽元素清除浮動 */.nav::after{content: " ";display: inline-block;clear: both;width: 0;}</style>
</head>
<body><ul class="nav"><li><a href="#">首頁</a></li><li><a href="#">設備列表</a></li><li><a href="#">產品列表</a></li><li><a href="#">公司介紹</a></li><li><a href="#">關于我們</a></li><!-- <div class="clear"></div> --></ul>
</body>
</html>

清除浮動：

1.必須使用塊元素
2。必須在所有浮動元素的后面
3.必須和浮動元素是兄弟

display表示將元素顯示成什么格式
定位：打破默認文檔流的規則

position 定位：

1static:靜態定位
2.absolute絕對定位
3.relative:相對定位
4.fixed:固定定位

定位的參照物：
1.絕對定位：最近的祖先元素中，非static定義的元素。如果沒有，則以body為參照
2.相對定位：以其自身未偏移前的位置為參照物。
3.固定定位：以用戶的視區為參照

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>.outer{width: 140px;height: 140px;background-color: pink;/* 絕對定位 */position: absolute;/* 只生效兩個，當不指定width和height的時候四個都生效 *//* top: 200px; *//* left: 100px; *//* right: 100px;bottom: 100px; */margin-top: 200px;margin-left:100px ;}.inner{width: 100px;height: 100px;background-color: gold;position: fixed;top: 20px;left:300px;}</style>
</head>
<body><div class="outer"><div class="inner"></div></div><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p><p>段落</p>
</body>
</html>

##################################################################

布局

一個html頁面的設計編寫過程，就是布局的過程。

圣杯布局

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>圣杯布局實現</title><style>html,body{height: 100%;/* background-color: pink; */margin: 0;}.layout{height: 100%;     }.header{height: 300px;background-color: pink;}.center{height: calc(100% - 400px);background-color: aquamarine;}.footer{height: 100px;background-color: violet;}.center>div{float: left;}.center::after{content: " ";display: block;clear: both;width: 0;}.center>.left{width: 120px;height: 100%;background-color: aqua;}.center>.rgt{width: 200px;height: 100%;background-color: gold;}.center>.main{width: calc(100% - 320px);height: 100%;background-color: blueviolet;}</style>
</head>
<body><div class="layout"><div class="header"></div><div class="center"><div class="left"></div><div class="main"></div><div class="rgt"></div></div><div class="footer"></div></div>
</body>
</html>

等分布局

在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>等分布局</title><style> .outer{width: 1500px;height: 400px;border: 1px solid #333;margin: 0 auto;}.outer>.item{float: left;background-color: pink;width: calc(20% - 8px);height: 100%;margin-right: 10px;}.outer>.item:last-child{margin-right: 0;}.outer::after{content: " ";display: block;clear: both;width: 0;}</style>
</head>
<body><div class="outer"> <div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>