??CSS
??css三大特性
??層疊性
一個標簽可以有多個css樣式
瀏覽器處理沖突的能力，如果一個屬性通過兩個相同的選擇器設定到這個元素上，會根據樣式的層疊規則
樣式的層疊規則——按照樣式的宣告順序來層疊的【就近原則】
選擇器必須是同一種
樣式不沖突不會層疊
??繼承性
子標簽會繼承父標簽的某些樣式，比如文本顏色和字號
??優先級
權重
繼承的權重是0——最低
行內樣式的權重是100
權重相同的——就近原則
！important命令——無限大
css權重公式——貢獻值
繼承、*——0000
標簽選擇器——0001
類、偽類選擇器——0010
id選擇器——0100
行內樣式——1000
！important——無窮大
width，height——大于無窮大
權重不能被繼承
貢獻值是沒有進位的
如果同時有！important與max-width，max-height
！important是不管用的
??常用單位
px像素：最常用
em：絕對單位，由父類的字號決定，比如父級的字號是16px，可以設定成2em（32px）
rem：絕對單位，由整個html的字號決定的，頁面的字號也會發生變化
百分比：相對于父元素的比例
??字體大小
?/* 字體大小 */
1
?font-size: 20px;
?/* 字體樣式 /
?font-style: italic;
?/ 字體粗細 /
?font-weight: bold;
?/ 字體修飾 /
?text-decoration:line-through;
?/ 字體 /
?font-family: monospace;
?/ 復合屬性 */
?font: 130px italic bolder ;
??背景
一般情況下不要既有背景顏色又有背景圖片
?/* 背景顏色 */
?/* background-color: rgba(255,255,0); /
?/ 設定顏色可以用——英語、十六進制、如果部、rgb、rgba /
?width: 1200px;
?height: 1200px;
?/ 背景圖片 /
?background-image: url(…/…/2022-8-22/morning/img/a.webp);
?/ 背景大小 /
?background-size: 1200px;
?/ 背景圖片不重復 /
?background-repeat:no-repeat;
?/ 背景的位置 */
?background-position: center;
??串列
?list-style-type:lower-greek;
?list-style-image: url(../../2022-8-22/morning/img/a.webp);
1
2
??圓角
?width: 200px;
?height: 200px;
?background-color: yellow;
?/* 圓角 */
?border-radius:15px;
?/* 左下圓角 */
?border-bottom-left-radius: 68px;
?/* 虛線 */
?border-style: dashed;
區塊屬性
盒子模型
?width: 300px;
?height: 300px;
?background: rgb(238, 107, 107);
?/* 外邊距 */
?margin : 100px;
?/* 盒子的邊框線寬度,顏色,邊框線 */
?border: 10px blueviolet solid;
?/* 內邊距 */
?padding-top: 10px;
?/* 保證盒子的大小是300*300 盒子的外邊距是 不包括的 */
?box-sizing: border-box;
?/* 保證當前div的尺寸是300*300 不包含內邊距和邊框線 */
?box-sizing: content-box;
定位
??檔案流
在網頁中將表單自上到下的分成多行
在每一行從左到右的順序排列元素——即為檔案流
網頁默認的布局方式
定位position
static：檔案流，默認的
absolute：絕對定位
相對于一個父元素的絕對定位
當設定了絕對定位之后，原來的元素脫離了檔案流，會在頁面上浮起來，
relative：相對定位
相對于上一個元素的位置的定位
fixed：固定定位
?/* 居中 */
?margin: center;
?/* 固定定位 */
?position: fixed;
?/* z軸的索引 */
?z-index:1080;
【子絕父相】
子元素是絕對定位
父元素是相對定位
【定位left與盒子模型margin-left有什么區別】
定位left是相對于父元素的位置，margin是相對于自己的位置
left是定位的屬性
可見性
visibility：
?visibility: hidden; /*隱藏*/
1
? /* 溢位策略 */
?overflow:scroll;
div{
width: 50px;
height: 500px;
overflow: hidden;
display: inline-block;
}
div:hover{
overflow:visible;
width:885px;
}
??影片 css3兼容性的問題
/延遲/
div{
/* 針對于火狐瀏覽器 /
/ -moz-transform: ; /
/ 針對于Safari 和Google /
/ -webkit-transform: ; /
/ 針對于Opera /
/ -o-transform: ; */
/* Transition -延遲轉換*/
width: 100px;
height: 100px;
background-color: orange;
transition: width 1s 3s,height 3s ease-in,background-color ease-out 3s;
}
div:hover{
width: 500px;
height: 500px;
background-color: aqua;
}
transition與animate的區別
transition只能通過固定的屬性來開始與結束值
animate可以一幀一幀的去實作效果
??練習
?.size {
?width: 200px;
?height: 200px;
?border-top-right-radius: 65px;
?border-bottom-left-radius: 65px;
?background-color: green;
?position: relative;
?left: 100px;
?top: 100px;
?}
?.size1 {
?width: 200px;
?height: 200px;
?border-bottom-right-radius: 65px;
?border-top-left-radius: 65px;
?background-color: orange;
?position: relative;
?left: 100px;
?
?}
?.size2 {
?width: 200px;
?height: 200px;
?border-bottom-right-radius: 65px;
?border-top-left-radius: 65px;
?background-color: blue;
?position: relative;
?right: 0px;
?top: 100px;
?}
?.size3 {
?width: 200px;
?height: 200px;
?border-top-right-radius: 65px;
?border-bottom-left-radius: 65px;
?background-color: red;
?}
?.a {
?width: 300px;
?height: 300px;
?background: rgb(5, 230, 5);
?border-top-left-radius: 50px;
?}
?.b {
?width: 300px;
?height: 300px;
?background: rgb(12, 101, 235);
?border-top-right-radius: 50px;
?}
?.c {
?width: 300px;
?height: 300px;
?background: rgb(246, 136, 33);
?border-bottom-left-radius: 50px;
?}
?.d {
?width: 300px;
?height: 300px;
?background: rgb(238, 107, 107);
?border-bottom-right-radius: 50px;
?}
?<table border="0" cellspacing="0px">
?<tr>
?<td>
?<div >
?<div ></div>
?</div>
?</td>
?<td>
?<div >
?<div ></div>
?</div>
?</td>
?</tr>
?<tr>
?<td>
?<div >
?<div ></div>
?</div>
?</td>
?<td>
?<div >
?<div ></div>
?</div>
?</td>
?
本文來自博客園，作者：阿薩德菩提子，轉載請注明原文鏈接：https://www.cnblogs.com/ychptz/p/16618029.html
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502734.html
標籤：Html/Css