一個標簽可以有多個css樣式
瀏覽器處理沖突的能力，如果一個屬性通過兩個相同的選擇器設(shè)置到這個元素上，會根據(jù)樣式的層疊規(guī)則
樣式的層疊規(guī)則——按照樣式的聲明順序來層疊的【就近原則】
選擇器必須是同一種
樣式不沖突不會層疊
成都創(chuàng)新互聯(lián)服務(wù)項目包括海豐網(wǎng)站建設(shè)、海豐網(wǎng)站制作、海豐網(wǎng)頁制作以及海豐網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，海豐網(wǎng)站推廣取得了明顯的社會效益與經(jīng)濟效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到海豐省份的部分城市，未來相信會繼續(xù)擴大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！
子標簽會繼承父標簽的某些樣式，比如文本顏色和字號
權(quán)重
繼承的權(quán)重是0——最低
行內(nèi)樣式的權(quán)重是100
權(quán)重相同的——就近原則
！important命令——無限大
css權(quán)重公式——貢獻值
繼承、*——0000
標簽選擇器——0001
類、偽類選擇器——0010
id選擇器——0100
行內(nèi)樣式——1000
！important——無窮大
width，height——大于無窮大
權(quán)重不能被繼承
貢獻值是沒有進位的
如果同時有！important與max-width，max-height
！important是不管用的
??常用單位
px像素：最常用
em：絕對單位，由父類的字號決定，比如父級的字號是16px，可以設(shè)置成2em（32px）
rem：絕對單位，由整個html的字號決定的，頁面的字號也會發(fā)生變化
百分比：相對于父元素的比例
??字體大小
?/* 字體大小 */
重慶分公司
重慶分公司
1
?font-size: 20px;
?/* 字體樣式 /
?font-style: italic;
?/ 字體粗細 /
?font-weight: bold;
?/ 字體修飾 /
?text-decoration:line-through;
?/ 字體 /
?font-family: monospace;
?/ 復(fù)合屬性 */
?font: 130px italic bolder ;
??背景
一般情況下不要既有背景顏色又有背景圖片
?/* 背景顏色 */
?/* background-color: rgba(255,255,0); /
?/ 設(shè)置顏色可以用——英語、十六進制、如果部、rgb、rgba /
?width: 1200px;
?height: 1200px;
?/ 背景圖片 /
?background-image: url(…/…/2022-8-22/morning/img/a.webp);
?/ 背景大小 /
?background-size: 1200px;
?/ 背景圖片不重復(fù) /
?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;
區(qū)塊屬性
盒子模型
?width: 300px;
?height: 300px;
?background: rgb(238, 107, 107);
?/* 外邊距 */
?margin : 100px;
?/* 盒子的邊框線寬度,顏色,邊框線 */
?border: 10px blueviolet solid;
?/* 內(nèi)邊距 */
?padding-top: 10px;
?/* 保證盒子的大小是300*300 盒子的外邊距是 不包括的 */
?box-sizing: border-box;
?/* 保證當(dāng)前div的尺寸是300*300 不包含內(nèi)邊距和邊框線 */
?box-sizing: content-box;
在網(wǎng)頁中將窗體自上到下的分成多行
在每一行從左到右的順序排列元素——即為文檔流
網(wǎng)頁默認的布局方式
定位position
static：文檔流，默認的
absolute：絕對定位
相對于一個父元素的絕對定位
當(dāng)設(shè)置了絕對定位之后，原來的元素脫離了文檔流。會在頁面上浮起來。
relative：相對定位
相對于上一個元素的位置的定位
fixed：固定定位
?/* 居中 */
?margin: center;
?/* 固定定位 */
?position: fixed;
?/* z軸的索引 */
?z-index:1080;
【子絕父相】
子元素是絕對定位
父元素是相對定位
【定位left與盒子模型margin-left有什么區(qū)別】
定位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;
}
/延遲/
div{
/* 針對于火狐瀏覽器 /
/ -moz-transform: ; /
/ 針對于Safari 和Google /
/ -webkit-transform: ; /
/ 針對于Opera /
/ -o-transform: ; */
/* Transition -延遲轉(zhuǎn)換*/
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的區(qū)別
transition只能通過固定的屬性來開始與結(jié)束值
animate可以一幀一幀的去實現(xiàn)效果
?.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;
?}
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
?
網(wǎng)頁題目：2022-8-23 css
地址分享：http://weahome.cn/article/dsojsgo.html
其他資訊
