HTML/CSS 知識點02 （轉）
阿新 • • 發佈：2017-06-26
標記 內邊距 -m 美化 設置 ng- 兩個 clas 黃色
一個完整的頁面由三部分構成：
- html：超文本標記語言
- 通過語義化標簽，搭建頁面"結構"
- css:層疊樣式表
- 負責頁面"樣式"，美化頁面的
- js:輕量級的腳本語言；交互指的是兩個地方（行為）
- 前端自己在頁面上寫的"動效"
- 前後臺的"數據交互"
結構，樣式，和行為三者相結合
css的引入方式
-
嵌入式；(內嵌式)
<style> body{ height:100%; background-color: red; } </style> -
行內樣式
<body style="height:100%; background: #333333"> -
外鏈式（真正的開發，用的都是外鏈）
<link rel="stylesheet" href="style.css"/>
css的優先級
- 行內>內嵌>外鏈
css常見屬性和樣式
- 當設置錯誤的時候，在chrome的控制臺，會有黃色的嘆號，進行提示
- color：顏色值； 顏色有三種表示方法
快捷鍵：c+tab- 用英文：red
- rgb(255,0,0)
#fff
- font-size:字體大小
- 快捷鍵：fsz30->font-size:30px
font:400 14px/28px "宋體";
- 快捷鍵：fsz30->font-size:30px
- background:添加背景
圖片默認是橫向重復和縱向重復 - 位置：
- 橫向位置：left center right
- 縱向位置：top center bottom
- 綜合寫法：
background: url("images/bg2.png") no-repeat left center red;- background-image:url("圖片地址")
- background-repeat:no-repeat; /repeat-x;/repeat-y
- background-position:0 0
- background-color:red
- 字體是否傾斜
- font-style:italic 傾斜／ normal 正常
- 下劃線和刪除線
- text-decoration: line-through; 刪除線
- text-decoration: none; 去除下劃線
- text-decoration: underline;添加下劃線
css中的選擇器：
- 1.標簽選擇器：div p ul li dt dd em i u del strong b input label from table
- 缺點：只能進行共性的操作，無法個性操作
- 2.class選擇器
- 3.id：
.class名,同一個頁面能有無數個相同的class名#id名，同一個頁面只能有一個ID名；（ID名是不能重復的）-
在真正的開發過程中，class是用來設置樣式的，id是用來獲取元素
<div class="div1 div2 div3" id="div1"></div>
- 4.後代選擇器：div p(把div容器下，子子孫孫的p元素都選擇上了)
- 5.子選擇器：div > p(選擇div容器下的兒子)；兼容IE7+
- 6.交集選擇器: div.div1
- 7.並集選擇器：div,p
- 8.通配符*：代表所有的元素
- 9.序選擇器：兼容IE8+
- div > p:first-child
- div > p:last-child
- 10.下一個兄弟選擇器 ul li+li{} 兼容IE7+
開發常用的瀏覽器
- chrome
- IE7~11
- firefox
CSS的繼承性和層疊性
- 以font開頭的屬性都能夠繼承；line-height
- color可以繼承
- text開頭的也可以繼承，比如text-align
css權重
- !important權重無窮大；（少用為好）
- id的權重大於class的權重
css盒子模型
- css盒子模型由5部分：
- 內容的寬高+padding+border+margin
- 單行文本的居中：height = line-height
- 多行文本的居中，padding和line-height
- padding：
- padding是內邊距
- padding的顏色和內容的顏色一致；background-color填充的是border以內的顏色
-
padding是復合值
如果現設置padding:30px
padding:30px; ->pl30; pt30;pr30;pb30
padding:20px 30px; ->上下為20px 左右30px
padding:10px 20px 30px; -> 上10px 左右20px 下30px
padding:10px 20px 30px 10px; 上 右 下 左
再設置padding-left:10px
請問最後的值各是多少？
左10px; 其他都是30px
- margin：外邊框
- border:
- border:1px solid #000;
- border-width
- border-style：solid（實體）,dashed（虛線）,dotted（點）
- border-color
行內元素和塊級元素
- p標簽雖然是文本標簽，但是它可以當容器來使用，p標簽內一定不能放div; p段落也是塊元素，他獨占一行
- 文本元素：p span a i em u b strong img
- 容器級：div li dt dd h級（不建議）
- 除了p，所有的文本元素，都是行內元素
- 所有容器級別的元素，都是塊元素
- 塊和行內元素的相互轉化
- display：inline; //行內
- display:inline-block;//行內塊
- display：block; //塊
- 關於定位：大部分情況，建議的是:父相子絕（父親：相對定位，兒子：絕對定位）
- 關於脫離文檔流的方法
- 浮動 float:left; float:right;
- 絕對定位 position:absolute;
- 固定定位 position:fixed;
- 重點：1）父相子絕 2）行內元素一點脫離文檔流，就可以設置寬高了；
- 註意：行內元素，一旦脫離文檔流，雖然能設置寬高，但是，如果不設置寬的話，會默認跟內容一樣寬；而塊級元素，如果不設置寬度的話，默認跟父級一樣塊，沒有父級的話，默認跟屏幕一樣寬
- 清除浮動
- 固定高度height:xxxpx;
缺點：如果作為產品列表的容器展示，我們無法知道容器的具體高度 - overflow:hidden
- 溢出隱藏
- 清除浮動
缺點：如果父容器比較小，子容器比較大；父容器如果通過overflow:hidden來清除浮動的話，子容器就看不到了
- clear:both
缺點：可以解決浮動引起的文檔流錯亂問題，但是上面浮動元素的父容器該沒有高度還沒有高度 -
偽類清除浮動
ul::after{ display: block; height:0; content: ‘‘; clear: both; }
- 固定高度height:xxxpx;
- 透明度處理
- rgba() 背景透明，文字不透明；
-
opacity:0 背景透明，文字也透明；
opacity:0.1;/*不兼容IE7瀏覽器*/ filter:alpha(opacity=10);
最基本的開發，首先必須創建的項目結構
- images文件夾：放切好的圖片
- css文件夾：放置css文件：index.css
- index.html文件
關於繼承
- 寬度繼承：如果沒有父級，塊元素的寬度默認跟可視區一樣寬；如果有父級的情況下，默認跟父級寬度一樣寬(寬度可以繼承，但高度無法繼承;)
- font可以繼承
- color可以繼承：當遇到a標簽的時候， color無效；
- line-height可以繼承
當文本超度固定寬度的處理方法：
-
單行文本出超固定寬度出現省略號的寫法：
white-space:nowrap; overflow:hidden; text-overflow:ellipsis -
英文不折行的問題處理：
word-wrap:break-word; -
出現滾動條的寫法
overflow-y:scroll;
區分偽類和偽元素
- 偽元素：用:和::都可以，現在建議用::
- 偽類：給當前選擇器添加動效，只能用:
HTML/CSS 知識點02 （轉）