css簡介
-
什么是css
層疊樣式表，css是對html進行樣式修飾的語言 層疊:是每一層的覆蓋疊加，如果不同的css樣式對同一個html標簽進行修飾 樣式有沖突的部分應用優先級高的，不沖突的部分共同作用。 樣式表:是css屬性樣式的集合 -
css的作用
- 修飾html，使html樣式更加好看
- 提高樣式代碼的復用性
- html的內容與樣式相分離，便于后期的維護
-
css的引入方式和書寫規范
(1)內嵌樣式 內嵌樣式是把css的代碼嵌入到html標簽中 <div style="color:red;font-size:25px">內嵌樣式</div> 語法: 1>使用style熟悉，將樣式嵌入到html標簽中 2>屬性的寫法:屬性:屬性值 3>多個屬性之前使用分號;隔開 不建議使用 (2)內部樣式 在head標簽中使用style標簽進行css的引入 <style type="text/css"> div{ color:green; font-size:25px } </style> 語法: 1>使用style標簽進行引入 <style type="text/css"> 屬性:type 告知瀏覽器使用css的解析器解析代碼 2>屬性的寫法:屬性:屬性值 3>多個屬性之前使用分號;隔開 (3)外部樣式 將css樣式抽取成一個單獨的css文件，使用時引用。 <link rel="stylesheet" type="text/css" href="../../css/css.css"> 語法: 1>創建一個css文件。將css屬性寫在css文件中 2>在head中使用link標簽進行引入 <link rel="stylesheet" type="text/css" href="../../css/css.css"> 3>屬性的寫法:屬性:屬性值 4>多個屬性之前使用分號;隔開 (4)@import方式 <style type="text/css"> @import url("css地址"); </style> link與@import方式的區別: a. link所有瀏覽器都支持，@import部分低版本的IE不支持 b. import方式是等待html加載完畢之后再加載 c. import方式不支持js的動態修改
css選擇器
-
基本選擇器
(1)元素選擇器 語法：html的標簽名{css屬性} 示例: <style type="text/css"> span{color:red;font-size:100px;} </style> <span> 元素選擇器 </span> (2)id選擇器 id唯一性 語法：#id的值{css屬性} 示例: <style type="text/css"> #div1{ background-color:red; } #div2{ background-color:pink; } </style> <div id="div1">hello,css1</div> <div id="div2">hello,css2</div> (3)class選擇器 語法:.class的值{css屬性} 示例： <style type="text/css"> .div_class1{ color: aqua; font-size: 30px; } .div_class3{ background-color: blanchedalmond; font-size: 20px; } </style> <div class="div_class1">css1,class</div> <div class="div_class1">css2,class</div> <div class="div_class3">css3,class</div> 選擇器優先級:id > class > 元素 -
屬性選擇器
語法:基本選擇器[屬性='屬性值']{css屬性} 示例: <style type="text/css"> input[type='text']{ background-color: yellow; } input[type='password']{ background-color: pink; } </style> <form> username:<input type="text"/><br/> password:<input type="password"/><br/> </form> -
偽元素選擇器
a標簽的偽元素選擇器 語法: 靜止狀態 a:link{css屬性} 懸浮狀態 a:hover{css屬性} 觸發狀態 a:active{css屬性} 完成狀態 a:visited{css屬性} 示例: <style type="text/css"> a:link{color: black} a:hover{color: blue} a:active{color: green} a:visited{color: yellow} </style> <a href="#">偽元素選擇器</a> -
層級選擇器
語法:父級選擇器 子級選擇器 ..... 示例: <style type="text/css"> #d1 .dd2 span{ color: red; } </style> <div id="d1"> <div class="dd1"> <span>span1-1</span> </div> <div class="dd2"> <span>span1-2</span> </div> </div> <div id="d2"> <div class="dd1"> <span>span1-1</span> </div> <div class="dd2"> <span>span1-2</span> </div> </div>
css屬性
-
文字屬性
font-size:大小 font-family:字體類型 -
文本屬性
color:顏色 text-decoration:下劃線 屬性值:none underline text-align:對齊方式 屬性值:left center right -
背景屬性
background-color:背景顏色 background-image:背景圖片 屬性值:url("圖片地址") background-repeat:平鋪方式 屬性值:默認橫縱向平鋪 repeat:橫縱向平鋪 no-repeat:不平鋪 repeat-x:橫向平鋪 repeat-y:縱向平鋪 -
列表屬性
list-style-type:列表項前的小標志 list-style-image:列表前的小圖片 屬性值:url("圖片地址") <ul> <li>程序員</li> <li>程序員</li> <li>程序員</li> <li>程序員</li> </ul> <style type="text/css"> ul{list-style-image: url("images/forward.gif");} </style> -
尺寸屬性
width:寬度 height:高度 <div id="d1">div1</div> <style type="text/css"> #d1{background-color: red;width: 200px;height: 200px;} </style> -
顯示屬性
display表示顯示屬性 block 塊級顯示 none 隱藏 inline 行級顯示 -
浮動屬性
float: 屬性值: left right clear:清除浮動 left right both 缺點：(1)影響相鄰元素不能正常顯示 (2)影響父元素不能正常顯示
css盒子模型
盒子模型
border:10px solid green (簡寫)
border-width:邊框寬度
border-style:邊框的線型
border-color:邊框的顏色
border-top:上邊框
border-bottom:下邊框
border-left:左邊框
border-right:右邊框
padding:
代表邊框內壁與內部元素之間的距離
padding:10px; 距離上下左右10px
padding:1px 2px 3px 4px; 距離上1px 右2px 下3px 左4px
padding:1px 2px; 距離上下1px 左右2px
padding:1px 2px 3px; 上1px 下3px 左右2px
margin:
代表邊框外壁與其他元素之間的距離
margin:10px; 距離上下左右10px
margin:1px 2px 3px 4px; 距離上1px 右2px 下3px 左4px
margin:1px 2px; 距離上下1px 左右2px
margin:1px 2px 3px; 上1px 下3px 左右2px