2. 程式人生 > >4.28 css樣式

4.28 css樣式

阿新 • • 發佈：2018-05-13
class shee 圖片尺寸 oct doc echo top sheet width

一、CSS樣式表
引入的三種方式
1、內聯樣式：標簽內部 style
2、內嵌樣式：<head></head>標簽內部（<style></style>）
3、外聯樣式：<link rel="stylesheet（樣式表）" type="text/css" href="css文件路徑"/>
二、選擇器（在容器中查找相關）
1、id 唯一、通過 # 查找
2、lass 可以重名、通過 . （點） 查找
3、<標簽名> 通過 <標簽名> 查找（<div>/<span>：控制所有div/span標簽）
4、並列選擇 通過 ， 查找（可並列控制不同類型：id，class，<div>，<span>）
5、後代選擇 通過 空格 查找(只控制後代的樣式)
三、樣式
1、大小 ： width:寬度 height 高度
2:、背景： background-color 顏色
3、背景圖片：①、background-image:url("") 圖片路徑
②、background-size: 圖片尺寸
③、background-repeat:no-repeat 刪除默認平鋪
四、字體（font 文字）
1、字體的樣式： font-family(微軟雅黑、宋體、楷體等)
2、字體的大小： font-size
3、字體的格式： font-style
4、字體的粗細： font-weight
5、字體的顏色： color
6、給字體加線：text-decration：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    
        
        
        
        
    </head>
    <body>
<!--外聯樣式（link：聯系）-->
<link rel="stylesheet" type="text/css" href=""/>
<!--內嵌（style:風格、樣式）-->
<style type="text/css">
<!--內聯-->
<div style=""></div>
/*
 
井號#代表id*/
#weiyi{}/*選擇id="weiyi"的元素*/
/*.代表class*/
.kechongming{}/*選擇所有class="kechongming"的元素*/
/*通過標簽名直接控制*/
div{}/*選擇所有div*/
span{}/*選擇所有span*/
/*並列選擇,元素之間加 , */
#weiyi,.kechongming,div,class,span{}
/*空格 選擇後代*/
#houdai div{}/*選擇id="houdai"的元素中的所有div*/
.houdai_ span{}/*選擇所有class="houdai_"的元素中的所有span*/
<!--選擇器-->
<div id="weiyi"></div>
<div class="kechongming"></div>
<div class="kechongming"></div>
<div class="kechongming"></div>
<div id="houdai">
　　<div></div>
　　<div></div>
　　<span></span>
　　<span></span>
</div>
/*
 
樣式 大小與背景*/
#beijingtupian{
　　margin-top:10px ;
　　width: 200px;
　　height: 200px;
　　border: 1px solid red;
　　background-image: url(../../xiaomi/disanhanggundong.png);
　　background-size: 150px,100px;/*背景尺寸*/
　　background-repeat:no-repeat ;/*背景平鋪方式*/
}
<!--樣式-->
<!--大小與背景-->
<div style="width: 200px; height: 200px; background-color: green;"></div>
<div id="beijingtupian"></div>
/*字體樣式*/
span{
　　font-family: "微軟雅黑";
　　font-size:16px;
　　font-style: italic;/*字體傾斜*/
　　font-weight: bolder;/*字體加粗*/
　　text-decoration: line-through;/*刪除線（through：穿過）*/
　　color: orange;
}
<!--字體的樣式-->
<span>字體的樣式</span>

        
        
    </body>
</html>

4.28 css樣式

相關推薦

4.28 css樣式

class shee 圖片尺寸 oct doc echo top sheet width 一、CSS樣式表 引入的三種方式1、內聯樣式：標簽內部 style2、內嵌樣式：<head></head>標簽內部（<style>

jQuery原始碼解析（4）—— css樣式、定位屬性

閒話 原計劃是沒有這篇博文的，研究animation原始碼的時候遇到了css樣式這個攔路虎。比如jQuery支援“+=10”、“+=10px”定義一個屬性的增量，但是有的屬性設定時可以支援數字，有的必須有單位；在對屬性當前值讀取時，不同的瀏覽器可能返回不同的單

【2018-01-28】HTML-css樣式表分類、選擇器

set html span ima meta class選擇器 優先 sheet har 樣式表，css:層疊式樣式表style後綴名：css 分類：內聯：寫在標記的屬性位置，優先級最高，重用性最差內嵌：寫在頁面的head中，優先級第二，重用性一般外部：寫在一個以css結尾

4-基本佈局+CSS樣式屬性+盒子模型

***********************回顧一下***************************** ---行級佈局---- 1. div是塊級元素，獨佔一行空間，寬度預設沾滿父級元素 2. div的高度由子級元素來決定 ---列級佈局--- 1. 浮動元素與兄

html-載入css樣式的4種方法

載入css樣式有4種 1.外部樣式(外聯樣式) 如果css是一個外部檔案，可以在你html檔案的<head></head>裡寫上 <link href="style.css" rel="stylesheet" type="

CSS樣式命名規則

blog 背景 是個 保持 log 類型 小寫字母 模塊 前綴 命名一直是個讓我頭痛的問題，特別是那些看上去差不多的模塊，所以就得想辦法啦，我總結了下面的方法，雖然還在試驗中。希望對大家有幫助。歡迎大家提出改進的意見。具體如下： 要註意的內容： 一，命名所選用的單詞應選擇不

每天一個JavaScript實例-展示設置和獲取CSS樣式設置

width func height nts style scrip meta on() 屬性 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" conte

css 樣式小竅門

blue head 消失 技術 log pad ul li -h img css 樣式小竅門 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF

css樣式總結

images 固定 超出 顯示 總結 ellipsis flow lips inpu 文本較多時，只顯示n行多余的用…代替（以下代碼直接在less中封裝好的） @num---想要顯示的行數 .font-hide(@num){ word-break: break-al

CSS樣式的優先級

多重 使用 判斷 優先 情況 瀏覽器 根據 優先級 原則 當一個標簽擁有多重樣式，根據以下規則渲染： 1、相同權值情況下，CSS樣式的優先級——就近原則（離被設置元素越近優先級別越高）： 內聯樣式>內部樣式>外部樣式 2、權值不同時，瀏覽器是根據權值來判斷使用哪

Vue.js 控制css樣式

bsp script pkg ott bottom cnblogs pre blog span <script src="https://unpkg.com/vue/dist/vue.js"></script> <style type="te

從零開始學習html（十五）css樣式設置小技巧——下

right ron pos 瀏覽器 spl pan esc 插入 ccf 六、垂直居中-父元素高度確定的單行文本 1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta charset="

css樣式重置

單元素 中文 表單元 mat cursor pac sci ural att /* 清除內外邊距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 結構元素 */ dl,

CSS樣式

1.5 -h htm 使用外部 多次 樣式優先級 mce height nbsp CSS的優勢： 　　內容與表現分離 　　網頁的表現統一,容易修改 　　豐富的樣式,使得頁面布局更加靈活 　　減少網頁的代碼量,增加網頁的瀏覽速度,節省網絡帶寬 　　運用獨立於頁面的CSS,有利

CSS樣式表

標題 百分比 比較 對齊方式 nal 表示 滾動條 pad 相關 CSS樣式表的樣式主要可以分為大小，背景，字體，對齊方式，邊界邊框，列表方塊，格式布局等。 元素的大小： #div1{ width:300px; height:100

css樣式的所有屬性

ted 字體 float mod ima left sca mil 圖像 background 一個聲明中設置所有的背景屬性。 background-attachment 設置背景圖像是否固定或者隨著頁面的其余部分滾動。 background-color

HTML引入CSS樣式三種方法及優先級 CSS樣式的寫法

分開 通過 str 相同 gif 標記 sof 偽類 cnblogs HTML引入CSS樣式三種方法及優先級： 方法 css的樣式引用由3種方式。分別為行內樣式、內部樣式（嵌入式）和外部樣式； 行內樣式： 在對象的標記內使用對象的s

JS 對html標簽的屬性的幹預以及JS 對CSS 樣式表屬性的幹預

inpu cti doc tel tex ttext button abcd element -任何標簽的任何屬性都可以修改! -HTML裏是怎麽寫, JS就怎麽寫 以下是一段js 作用於 css 的 href的 代碼 <link id="l1"

js獲取css樣式封裝

padding set body script log center auth compute ctype 封裝 function getStyle(obj , attr){ return obj.currentStyle?obj.currentStyle[att

css樣式屬性

lac ive splay ota div meta text type css css樣式屬性比HTML用標簽來添加方便很多，樣式也比較多樣。不過需要記得東西就更多了。 .d1 { width: 100px; height: 30px; border: 1