前端day1—CSS

時間 2019-11-10
標籤前端 day1 day css 欄目 CSS 简体版
原文原文鏈接
class能夠重複一對html標籤中的id屬性是惟一的，不能夠重複class選擇器優先級高於標籤選擇器優先級：id>class>標籤display:none    隱藏屬性--------------------------------------------------------------------------------css 選擇器 <!--樣式標籤--><style>如下例子都是在head裏的<style></style>內填寫--------------------------------------------------------------------------------id選擇器例子，#代指idhead裏寫#div1{    }/*div1與下方id裏的名稱對應*/大括號裏寫完一條後有分號， background-color: red;body裏寫<div id="div1">我是我的</div>--------------------------------------------------------------------------------class選擇器英文字符的點代指.c1{    background-color: black;}<div class="c1">11</div>--------------------------------------------------------------------------------標籤選擇器div{    }由於沒有定義是哪一個標籤，因此全部div標籤都應用這個css樣式<div>jnz</div><div>jnz</div><div>jnz</div><div>jnz</div><div>jnz</div><div>jnz</div>--------------------------------------------------------------------------------css style: 裏面的寫的就叫作css 每個樣式的間隔用； 所有相同的時候引用classstyle="height: 48px;background-color: #6699CC"--------------------------------------------------------------------------------標籤層級選擇器，按照層級順序查找，經過空格分隔div span{    background-color: red;}<div>    <span>123</span></div>--------------------------------------------------------------------------------id組合選擇器，經過逗號分隔#i1,#i2{    }id組合選擇器 id屬性在一個html標籤中不容許出現兩個相同的<div id="i1">123</div><div id="i2">123</div>--------------------------------------------------------------------------------通常前端都是經過class來定義css樣式，通常不會用id或者標籤class組合選擇器.c1,.c2{    }class組合器 class在一個html中能夠同時出現多個<div class="c1">123</div><div class="c2">123</div>也能夠以下寫法，div裏同時引用兩個class樣式.c1{    }.c2{   width: 100px;    height: 100px;}<div class="c1 c2">123</div><div class="c1 c2">123</div>也能夠以下寫法，兩個div都是c1，head裏只寫一個就能夠了.c1{    }<div class="c1">123</div><div class="c1">123</div>--------------------------------------------------------------------------------屬性選擇器，自定義一個屬性，而後用中括號查找div[jnz="金牛座"]{    }<div jnz="金牛座">32</div>--------------------------------------------------------------------------------CSS優先級標籤中style優先級最高，其次在代碼中就近找，也就是從下往上找<!--head中style標籤是第一處寫css樣式的地方--><style>    .c1{            }</style><!--第二種經過屬性的方式對標籤增長css樣式--><div class="c1" style="1</div><!--第三種引入css樣式表-->，在樣式表中的寫法和在style中同樣，就新建一個s.css，寫  .c1{        background-color: red;    }而後heaad裏寫，而不是在標籤style裏寫<link rel="stylesheet" href="s.css"><!--優先級--><!--按照裏body裏所要引用class的標籤開始，由內而外 由近到遠--> <style>        #i1 {                    }    </style></head><body><div id='i1' class="c1">1</div></body>若是同一標籤中含有id和class，以誰最能精準定位以誰優先級最高。id>class>標籤--------------------------------------------------------------------------------.c1{    /*寬度*/    width: 100px;    /*高度*/    height: 100px;    /*背景色*/    }.c1{    width: 100px;    height: 100px;    /*外邊框 1像素 紅色 實線*/    border: 1px red solid;    /*水平居中*/    text-align: center;    /*垂直居中*/寫設定的高度就好，會自動居中    line-height: 100px;}.f1{    width: 100px;    height: 48px;        float: left;   使下面三個塊級標籤向左成一行對齊，而不是每個塊級一行}<div class="c1"></div>font-size font-weightfont-size:字體大小 px font-weight:字體加粗font-weight:字體加粗 bold:粗體 700 bolder:更粗字體 lighter:更細字體 normal:默認值 400 inherit:從父類繼承字體粗細font-size 字體大小 font-weight 字體粗細 若是一個標籤中含有多個樣式，用分號隔開<div style="font-size: xx-large;font-weight: bolder">金牛座</div><div class="c1">1</div>浮動<div class="f1"></div><div class="f1" style="</div><div class="f1" style="float: right"></div>寬度可使用百分比的方式 高度 不能夠 寫百分比<div style="width: 30%;height: 48px;</div><!--display 可讓標籤在行內 和 塊級之間 自由轉換塊轉行內display: inline;行內轉塊display: block;既是塊 又是 行內display:inline-block;--><div style="display: inline;">金牛座</div><span style="display: block;">金牛座</span><span style="display:inline-block;width: 100px;height: 100px;"></span>行內標籤不能夠應用 寬、高 外邊距 內邊距的樣式，以下這行代碼沒有做用<span style="width: 100px;height: 100px">123</span>display:none爲隱藏屬性，有了它就不顯示後面的樣式<div style="display:none;border:1px red solid;width:100px;height: 100px;"></div>好比下面這行屬性，常常會加上display:none，遮住原生樣式，而後再罩上一層div顯示漂亮的樣式<input type="file"><!--外邊距不改變自身，針對外側進行像素移動，自己大小不變--><div style="width: 100%;height: 100px;border: 1px red solid">    <div style="margin-top:1px;width: 100%;height: 48px;</div></div><!--內邊距<!--改變自身，自身大小會隨之變化-->--><div style="width: 100%;height: 100px;border: 1px red solid">    <div style="padding-top:1px;width: 100%;height: 48px;</div></div>分層.html<input type="button" value="登陸" style="cursor: pointer">    就是鼠標移動按鈕上呈小手狀<!--overflow滾動條overflow: hidden 當圖片或內容大於外層div時，自動 截取左上角圖片overflow: auto 當內容或圖片小於外層div則自動隱藏滾動條overflow: scroll 不管大小 都在增長滾動條--><div style="overflow: scroll;border: 1px black solid;width: 200px;height: 200px">    <img src="http://ui.imdsx.cn/static/image/dsx_Small.jpg"></div>backgroundbackground 是針對背景一些樣式設置， background-image：背景圖片，圖片大小若是小於div的大小。則無限堆疊 水平垂直都堆疊。可經過background-repeat屬性對是否堆疊進行設置 no-repeat(不堆疊) repeat-y(縱向堆疊) repeat-x(橫向堆疊)。 background-position 針對div設置圖片展現的位置。background-position-y: 10px 縱向移動圖片 background-position-x: 10px 橫向移動圖片。也能夠不寫x或y，默認第一個爲x的值 第二個位y的值，background-position:10px 10px。能夠經過background直接簡寫，background 簡寫 參數分別爲 顏色 背景圖 postion橫向 縱向 是否堆疊<div style="background-image: url('http://ui.imdsx.cn/static/image/dsx_Small.jpg');background-repeat:repeat-y;width: 200px;height: 200px;border: 1px black solid"></div><div style="background-position: 1px 1px;background-repeat: no-repeat;background-image: url('http://ui.imdsx.cn/static/image/icon.png');width: 20px;height: 20px;border: 1px black solid;"></div>--------------------------------------------------------------------------------分層：<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        .c1{            height: 48px;                        position: fixed;   有了這行width: 100%就不須要了，就能夠刪了            top:0;  下面這三個就是配合position這個屬性使用的，這個div就會固定在頂部，滾動頁面也凍結顯示            left: 0;            right: 0;        }    </style></head><!--postion 分層 fixed 絕對定位--><body style="margin: 0">  0的話就不用加px了，這樣整個樣式都會貼合，沒有默認的8px的邊距    <div class="c1"></div>    <div style="height: 48px;width: 48px;position: fixed;right: 0;bottom: 0;"></div>  這行是右下角加個固定的    <div style="margin-top:48px;height: 1000px;width: 100%;border: 1px red solid;        金牛座 真厲害    </div>  加了margin-top:48px  ，金牛座 真厲害  這行就能顯示出來了，就不會被上行凍結的那行擋住了    postion 相對定位    <div style="position: relative;width:500px;height:500px;border:1px black solid;">        <div style="position: absolute;width: 100px;height: 100px;</div>        <div style="left: 0;bottom:0;position: absolute;width: 100px;height: 100px;background-color: black"></div>左下角        <div style="right: 0;top:0;position: absolute;width: 100px;height: 100px;</div>右上角        <div style="right: 0;bottom:0;position: absolute;width: 100px;height: 100px;background-color: pink"></div>  此行是相對於外邊框，固定到右下角    </div>    z-index 誰的值大，誰的層級優先級顯示的就高，就優先顯示。最大值爲999    <div style="position: relative;width: 200px;height: 200px;border: 1px red solid">        <div style="z-index: 10;position: absolute;width: 200px;height: 200px;</div>        <div style="z-index: 9;position: absolute;width: 200px;height: 200px;background-color: blue"></div>    </div></body></html>
1. 前端之路 day1 html和css
2. web前端day1
3. 前端學習day1
4. Day1 瞭解web前端
5. 前端學習--Vue.js Day1
6. 前端工做日記day1
7. css day2 js 前端編程語言 day1 # 47
8. 前端之CSS
9. Web前端-CSS
10. 前端css position
更多相關文章...
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• CSS 指南 - 網站建設指南
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源
• Docker容器實戰(一) - 封神Server端技術
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。