深層布局，逐級進去，指向某乙個標籤，叫：關聯選擇器- 設定巢狀標籤的樣式 div p {}
昨天內容回顧
1、html的操作思想
** 使用標籤把要操作的資料報起來，通過修改標籤的屬性值來實現標籤內資料樣式的變化
***
2、影象標籤
** 通過html訪問本地，使用絕對路徑，目前有問題
3、超連結標籤
4、**標籤
** 技巧：數裡面有多少行，每行裡面有多少個單元格
** 5、表單標籤
**- action method enctype
- method: get post
** 輸入項
*** 有name屬性
* 普通輸入項 type="text"
* 密碼： password
* 單選：radio
- name值相同
- value值
* 核取方塊：checkbox
- name值相同
- value值
* 下拉框 select option
* 文字域 textarea
* 隱藏項：type="hidden"
* 檔案： type="file"
* 提交按鈕 type="submit"
* 重置 ： reset
6、div和span
* div: 自動換行
* span：在一行顯示
css1、css的簡介
* css： 層疊樣式表
** 層疊：一層一層的
** 樣式表：
很多的屬性和屬性值
* 是頁面顯示效果更加好
* css將網頁內容和顯示樣式進行分離，提高了顯示功能。
2、css和html的結合方式（四種結合方式）
（1）在每個html標籤上面都有乙個屬性 style，把css和html結合在一起
- （2）使用html的乙個標籤實現*（3）在style標籤裡面 使用語句（在某些瀏覽器下不起作用）
@import url(css檔案的路徑);
- 第一步，建立乙個css檔案（4）使用頭標籤 link，引入外部css檔案
- 第一步 ，建立乙個css檔案
- *** 第三種結合方式，缺點：在某些瀏覽器下不起作用，一般使用第四種方式
*** 優先順序（一般情況）
由上到下，由外到內。優先順序由低到高。
*** 後載入的優先順序高
*** 格式 選擇器名稱 3、css的基本選擇器（三種）
** 要對哪個標籤裡面的資料進行操作
（1）標籤選擇器
* 使用標籤名作為選擇器的名稱
div （2）class選擇器
* 每個html標籤都有乙個屬性 class
- aaaaaaa
- .haha （3）id選擇器
* 每個html標籤上面有乙個屬性 id
- bbbbb
- #hehe *** 優先順序
style > id選擇器 > class選擇器 > 標籤選擇器
4、css的擴充套件選擇器
（1）關聯選擇器
* wwwwwwww
* 設定div標籤裡面p標籤的樣式，巢狀標籤裡面的樣式
* div p （2）組合選擇器
* 1111
* 把div和p標籤設定成相同的樣式，把不同的標籤設定成相同的樣式
* div,p （3）偽元素選擇器(了解，瀏覽器的相容性比較差)
* css裡面提供了一些定義好的樣式，可以拿過來使用
* 比如超連結
** 超連結的狀態
原始狀態 滑鼠放上去狀態 點選 點選之後
:link :hover :active :visited
** 記憶的方法
lv ha
5、css的盒子模型
** 在進行布局前需要把資料封裝到一塊一塊的區域內（div）
（1）邊框
border: 2px solid blue;
border：統一設定
上 border-top
下 border-bottom
左 border-left
右 border-right
（2）內邊距
padding:20px;
使用padding統一設定
也可以分別設定
上下左右四個內邊距
（3）外邊距
margin: 20px;
可以使用margin統一設定
也可以分別設定
上下左右四個外邊距
6、css的布局的漂浮(了解)
float：
** 屬性值
left : 文字流向物件的右邊
right : 文字流向物件的左邊
7、css的布局的定位（了解）
position：
** 屬性值
- absolute ：
*** 將物件從文件流中拖出
*** 可以是top、bottom等屬性進行定位
- relative ：
*** 不會把物件從文件流中拖出
*** 可以使用top、bottom等屬性進行定位
8、案例 **混排案例
** 和文字在一起顯示
9、案例 影象簽名
** 在上面顯示文字
10、上午內容總結
1、css和html的四種結合方式（****）
2、css的基本選擇器（****）
* 標籤選擇器 使用標籤名
* class選擇器 .名稱
* id選擇器 #名稱
** 優先順序
style > id > class > 標籤
3、css的擴充套件選擇器(了解)
* 關聯選擇器
- 設定巢狀標籤的樣式 div p {}* 組合選擇器
- 不同的標籤具有相同的樣式 div,p{}* 偽元素選擇器
* 超連結的狀態
- 原始 :link
- 懸停 :hover
- 點選 :active
- 點選之後 :visited
4、盒子模型(了解)
* 邊框 border:2px solid red;
上下左右 border-top border-bottom border-left border-right
* 內邊距 padding:20px
上下左右
* 外邊距 margin:20px
上下左右
* 對資料進行操作，需要把資料放到乙個區域裡面（div）
5、布局的漂浮(了解)
float
- left: 後面的div到右邊
- right：後面的div到左邊
6、布局的定位(了解)
position
- absolute
** 從文件流中拖出
- relative
** 不會從文件流中拖出
一般在目錄裡面，標出符號
（********）：重點，**看懂，**會寫，**理解
- （****重點中的重點***）
（了解）：**看懂
（理解）：能夠把原理講清楚
css選擇器 CSS選擇器總結
在前不久的專案中，實習小妹妹在乙個全域性的樣式中使用了下面這個css選擇器 content 對應的html結構大致是 實習妹子大致的意思是想要讓content下的子元素div的高度100 但是貌似她沒有真正理解first child的意義，從而導致這個全域性的樣式讓 所有頁面都出現了問題，然後我就只...
CSS選擇器 復合選擇器
選擇器 名稱 說明 css 版本 通用選擇器 選擇所有元素 2元素選擇器 選擇指定型別的元素1 id 選擇器 選擇指定 id 屬性的元素1.class 選擇器 選擇指定 class 屬性的元素 1 attr 系列 屬性選擇器 選擇指定 attr 屬性的元素 2 3 s1,s2,s3 分組選擇器 選擇...
CSS選擇器 屬性選擇器
最近重新學習了css3，發現選擇器還能這麼玩。介紹一下屬性選擇器 我給咱們順著往下縷一縷 資訊量挺大 剛開始是這樣子 如下 doctype html head meta charset utf 8 title 測試網頁 title style h1 m1 style head body div h1...