前端学习之day02-CSS基础
生活随笔
收集整理的這篇文章主要介紹了
前端学习之day02-CSS基础
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
上午筆記
Day02 css屬性組成和作用：預習1、css屬性和屬性值的定義 2、css文本屬性 font-size9pt = 12px; 1em=16px 0.75em=12px=9ptfont-weightbolder(更粗的)bold(加粗)normal(常規)/100-900 9個等級font-styleitalic/oblique/normal italic傾斜字體/oblique字體沒有傾斜屬性的傾斜文字text-alignvertical-aligntop/bottom/middle/baselineline-height normal/valuetext-decoration:none/underline/overline/line-thoughtext-indent可以取負值、只對第一行起作用text-transformnone/capitalize/uppercase/lowercaseletter-spacingvalue 字母或漢字之間間距word-spacingvalue 單詞詞距font-variantnormal常規字體/samll-caps小型大寫字母字體layout-flowforizontal自左向右/vertical-ideographic自上而下font:bolder italic 12px/1.5em "宋體" 3、css列表屬性list-style-type:disc/circle/square/nonelist-style-image:url()list-style-position:outline外邊/inside里面 定義列表符號位置list-style去掉列表符號 4、css背景屬性background-color:redbackground-image:url()background-repeat:no-repeat/repeat/repeat-x/repeat-ybackground-position:left/center/right/數值 top/center/bottom/數值background-attachement:fixed固定/scroll滾動 5、css邊框屬性border: 5px solid #ff0000;border-widthborder-colorborder-style:solid實/dashed虛/dotted點/double/noneborder-bottom/left/right/topborder-left-color 6、css浮動屬性floatclear清除浮動none/left/right/both==================================================================================================================================================================== css基礎css基本語法:選擇器{屬性: 屬性值;屬性: 屬性值;屬性: 屬性值;}選擇器:查找頁面元素的一種方式方法{} 樣式規則,規定了使用選擇器查找的元素實現何種樣式男生{發型: 3mm;}注意事項: 1\屬性和屬性值使用:鏈接2\每一組屬性和屬性值結束后需要帶封號;3\如果你的屬性和屬性值是最后一組出線的,可以不用帶封號屬性:對元素的描述屬性值:描述的取值css樣式表分類:1\行內樣式表:含義: 將所有的css語法放置在標簽里基本語法: <div style="屬性:屬性值;屬性:屬性值;"></div>弊端:結構(HTML)和樣式(CSS)沒有分開使用行內樣式表只會對獨立的一個標簽進行修飾,代碼重復率比較高,結構比較亂2\內部樣式表含義: 將對應的css語法和結構分開,所有的css語法需要放在一個style標簽里面,推薦放在頭部里面基本語法: <head><style>選擇器{屬性:屬性值;}</style></head>弊端: 結構和樣式還沒有做到完全分離,你的css還在html中如果代碼較多的話,上下滾屏比較麻煩容易產生頭重腳的效果3\外部樣式表含義: 所有的央視修飾都放在獨立的以.css為后綴名的文件中需要使用link標簽進行引入優點: 結構樣式完全分離所有的樣式表都對樣式進行修飾的話,實現的是什么樣式?======>樣式表的優先級!important>行內>內部>外部(前提是內部再外部的下面)下午筆記
選擇器：標簽選擇器：通過標簽的名字去查找頁面中的元素1、標簽名字當作選擇器基本語法p{樣式規則}匹配范圍太廣泛2、類選擇器通過給元素起class類名，然后css里面通過類名查找頁面中的元素基本語法 HTML:<div class="box"></div>CSS : .box{樣式規則}只要角對應的類名都能查找到并且進行修飾，不區分元素類型弊端 匹配范圍有縮小，但是還比較廣3、id選擇器基本語法HTML：<div id="bobo"></div>CSS : #bobo{樣式規則}注意，每一個元素都能帶id號，但是id的取值不能一致ID具有唯一性優點：精確度比較高，問題：如果使用不同的選擇器修飾同一個元素，實現那個效果。======>>>>權重，優先級跟代碼書順序無關和權重有關，id>類>標簽——————————————————————————————————————— | | | || 選擇器 | 符號 | 權重值 || 通配符 | * | 0000 || id | # | 0001 || 類 | . | 0100 || 行內樣式 | | 1000 || !important | | 10000 |———————————————————————————————————————4、通配符選擇器 能夠查找到頁面中所有的元素，只實現一個一個效果取消所有元素自帶的內邊距和外邊距*{margin:0;padding:0;}問題 如何給元素起倆個類名，并且倆個類名都對元素進行修飾，實現的是哪一個效果語法<div class="box1 box2"></div>如果倆個類對同一個元素進行修飾的話，實現的效果是后者，與代碼順序有關系。寫在后面的會執行8、群組選擇器作用：能夠將公共的樣式提取出來一起設置，做到節約代碼作用。9、關系選擇器、層級選擇器后代子代選擇器后代選擇器 使用符號 空格子代選擇器 使用符號 >關系選擇器匹配當前元素的后一個兄弟 +匹配當前元素的后面所有兄弟 ~注意：只向后匹配10、偽類選擇器: 原本元素沒有對應的樣式修改，我需要通過偽類選擇器進行修改對應的樣式四個偽類選擇器一般經常在a標簽里面===:link ===================>>訪問前:visited ===================>>訪問后的樣式:hover ===================>>鼠標懸停，懸浮，劃過:active ===================>>鼠標點擊時，點擊瞬間，鼠標落點單純的四個偽類，里面的hover可以單獨拎出來使用11、屬性選擇器： 通過元素的屬性（HTML，標簽）查找頁面的元素基本語法：[屬性] ======>查找頁面中所有帶有該屬性的元素[屬性="屬性值"] =======>匹配也年終所有帶該屬性并且有屬性值的元素E[屬性] =======>匹配頁面中某一類元素中帶有該屬性元素E[屬性="屬性值"] =======>匹配頁面中某一類元素中帶有該屬性，并且屬性值的元素屬性選擇器經常使用在表單元素中12： ：checked選中狀態偽類修改單復選的默認樣式css基本語法選擇器{屬性：屬性值屬性：屬性值} 選擇器：頁面元素的查找方法{}：樣式規則：規定了選擇器查找到的元素實現何種樣式css里面核心的屬性和屬性值1、文本屬性2、邊框屬性3、列表屬性4、背景屬性5、浮動屬性6、盒子模型屬性7、元素類型屬性8、溢出屬性9、定位屬性核心屬性：css文本屬性 font-size9pt = 12px; 1em=16px 0.75em=12px=9ptfont-family瀏覽器默認為宋體，但是在谷歌瀏覽器里面默認字體是微軟雅黑font-weightbolder(更粗的)bold(加粗)normal(常規)lighter（細體）/100-900 9個等級 100 細體 400 正常（取消加粗和標題標簽的效果） 700加粗 900更粗font-styleitalic/oblique/normal italic傾斜字體/oblique字體沒有傾斜屬性的傾斜文字text-alignvertical-aligntop/bottom/middle/baselineline-height normal/valuetext-decoration:none/underline/overline/line-thoughtext-indent可以取負值、只對第一行起作用text-transformnone/capitalize/uppercase/lowercaseletter-spacingvalue 字母或漢字之間間距word-spacingvalue 單詞詞距font-variantnormal常規字體/samll-caps小型大寫字母字體layout-flowforizontal自左向右/vertical-ideographic自上而下font:bolder italic 12px/1.5em "宋體"總結
以上是生活随笔為你收集整理的前端学习之day02-CSS基础的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 红米Redmi 12 4G价格曝光！约9
- 下一篇： OPPO K11将带来三大旗舰同款、同档