JavaWeb筆記:CSS總結

目錄

JavaWeb筆記:CSS總結

一、css的簡介

二、css選擇器

三、css屬性

四、css盒子模型

---

一、css的簡介

?

?? ?1、什么是css
?? ??? ?層疊樣式表，css是對html進行樣式修飾語言
?? ??? ?層疊：就是層層覆蓋疊加，如果不同的css樣式對同一html標簽進行修飾，樣式有沖突的部分應用優先級高的，不沖突的部分共同作用
?? ??? ?樣式表：就是css屬性樣式的集合?? ?
?? ?2、css的作用
?? ??? ?(1)修飾html的 使其html樣式更加好看
?? ??? ?(2)提高樣式代碼的復用性
?? ??? ?(3)html的內容與樣式相分離 便于后期維護?? ?
?? ?
?? ?3、css的引入方式和書寫規范
?? ??? ?(1)內嵌樣式
?? ??? ??? ?內嵌樣式是把css的代碼嵌入到html標簽中
?? ??? ??? ?<div style="color:red;font-size: 100px;">你好啊 小朋友</div>
?? ??? ??? ?語法：
?? ??? ??? ??? ?(1)使用style屬性將樣式嵌入到html標簽中
?? ??? ??? ??? ?(2)屬性的寫法：屬性：屬性值
?? ??? ??? ??? ?(3)多個屬性之間使用分號;隔開
?? ??? ??? ?不建議使用
?? ??? ?(2)內部樣式
?? ??? ??? ?在head標簽中使用style標簽進行css的引入
?? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ?div{color:red;font-size: 100px;}
?? ??? ??? ?</style>
?? ??? ??? ?語法：
?? ??? ??? ??? ?(1)使用style標簽進行css的引入
?? ??? ??? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ??? ??? ?屬性：type：告知瀏覽器使用css解析器去解析
?? ??? ??? ??? ?(2)屬性的寫法：屬性：屬性值
?? ??? ??? ??? ?(3)多個屬性之間使用分號;隔開
?? ??? ?
?? ??? ?(3)外部樣式
?? ??? ??? ?將css樣式抽取成一個單獨css文件 誰去使用誰就引用
?? ??? ??? ?<link rel="stylesheet" type="text/css" href="demo1.css"/>
?? ??? ??? ?語法：
?? ??? ??? ??? ?(1)創建css文件 將css屬性寫在css文件中
?? ??? ??? ??? ?(2)在head中使用link標簽進行引入
?? ??? ??? ??? ??? ?<link rel="stylesheet" type="text/css" href="css文件地址"/>
?? ??? ??? ??? ??? ?rel:代表要引入的文件與html的關系
?? ??? ??? ??? ??? ?type：告知瀏覽器使用css解析器去解析
?? ??? ??? ??? ??? ?href：css文件地址
?? ??? ??? ??? ?(3)屬性的寫法：屬性：屬性值
?? ??? ??? ??? ?(4)多個屬性之間使用分號;隔開
?? ??? ?(4)@import方式
?? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ?@import url("css地址");
?? ??? ??? ?</style>
?? ??? ??? ?link與@import方式的區別：
?? ??? ??? ??? ?(1)link所有瀏覽器都支持 import部分低版本IE不支持
?? ??? ??? ??? ?(2)import方式是等待html加載完畢之后在加載
?? ??? ??? ??? ?(3)import方式不支持js的動態修改

二、css選擇器

?

?? ?1、基本選擇器
?? ??? ?(1)元素選擇器
?? ??? ??? ?語法：html標簽名{css屬性}
?? ??? ??? ?示例：
?? ??? ??? ??? ?<span>hello css!!!</span>
?? ??? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ??? ?span{color:red;font-size:100px; }
?? ??? ??? ??? ?</style>
?? ??? ?(2)id選擇器?? ?id唯一性
?? ??? ??? ?語法：#id的值{css屬性}
?? ??? ??? ?示例：
?? ??? ??? ??? ?<div id="div1">hello css1!!!</div>
?? ??? ??? ??? ?<div id="div2">hello css2!!!</div>
?? ??? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ??? ?#div1{background-color: red;}
?? ??? ??? ??? ??? ?#div2{background-color: pink;}
?? ??? ??? ??? ?</style>
?? ??? ?(3)class選擇器
?? ??? ??? ?語法：.class的值{css屬性}
?? ??? ??? ?示例：
?? ??? ??? ??? ?<div class="style1">div1</div>
?? ??? ??? ??? ?<div class="style1">div2</div>
?? ??? ??? ??? ?<div class="style2">div3</div>
?? ??? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ??? ?.style1{background-color: red}
?? ??? ??? ??? ??? ?.style2{background-color: pink}
?? ??? ??? ??? ?</style>
?? ??? ?
?? ??? ?***選擇器的優先級：id>class>元素
?? ?
?? ?2、屬性選擇器
?? ??? ?語法：基本選擇器[屬性=‘屬性值’]{css屬性}
?? ??? ?示例：
?? ??? ??? ?<form action="">
?? ??? ??? ??? ?name:<input type="text" /><br/>
?? ??? ??? ??? ?pass:<input type="password" /><br/>
?? ??? ??? ?</form>
?? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ?input[type='text']{background-color: yellow}
?? ??? ??? ??? ?input[type='password']{background-color: pink}
?? ??? ??? ?</style>?? ?
?? ?
?? ?3、偽元素選擇器
?? ??? ?a標簽的偽元素選擇器
?? ??? ??? ?語法：
?? ??? ??? ??? ?靜止狀態?? ?a:link{css屬性}
?? ??? ??? ??? ?懸浮狀態?? ?a:hover{css屬性}
?? ??? ??? ??? ?觸發狀態?? ?a:active{css屬性}
?? ??? ??? ??? ?完成狀態?? ?a:visited{css屬性}
?? ??? ??? ?示例：
?? ??? ??? ??? ?<a href="#">點擊我吧</a>
?? ??? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ??? ?a:link{color:blue}
?? ??? ??? ??? ??? ?a:hover{color:red}
?? ??? ??? ??? ??? ?a:active{color:yellow}
?? ??? ??? ??? ??? ?a:visited{color:green}
?? ??? ??? ??? ?</style>?? ?
?? ?
?? ?4、層級選擇器
?? ??? ?語法：父級選擇器 子級選擇器 .....
?? ??? ?示例：
?? ??? ??? ?<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>
?? ??? ??? ?
?? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ?#d1 .dd2 span{color:red}
?? ??? ??? ?</style>

三、css屬性

?

?

?? ?1、文字屬性
?? ??? ?font-size:大小
?? ??? ?font-family:字體類型?? ??? ?
?? ?2、文本屬性
?? ??? ?color:顏色
?? ??? ?text-decoration:下劃線
?? ??? ??? ?屬性值：none?? ?underline?? ?
?? ??? ?text-align:對齊方式
?? ??? ??? ?屬性值：left ?center ?right
?? ??? ??? ?<div>hello css!!!</div>
?? ??? ??? ?<a href="#">click me!!!</a>
?? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ?div{color:red;text-decoration: underline;text-align: right }
?? ??? ??? ??? ?a{text-decoration: none;}
?? ??? ??? ?</style>
?? ?3、背景屬性
?? ??? ?background-color:背景顏色
?? ??? ?background-image:背景圖片
?? ??? ??? ?屬性值：url("圖片地址");
?? ??? ?background-repeat:平鋪方式
?? ??? ??? ?屬性值：默認橫向縱向平鋪
?? ??? ??? ??? ??? ?repeat:橫向縱向平鋪
?? ??? ??? ??? ??? ?no-repeat:不平鋪
?? ??? ??? ??? ??? ?repeat-y：縱向
?? ??? ??? ??? ??? ?repeat-x：橫向
?? ??? ?
?? ??? ?body{
?? ??? ??? ?background-color: black;
?? ??? ??? ?background-image: url("images/dog.gif");
?? ??? ??? ?background-repeat: repeat-y;
?? ??? ?}
?? ?
?? ?4、列表屬性
?? ??? ?list-style-type:列表項前的小標志
?? ??? ??? ?屬性值：太多了
?? ??? ?list-style-image:列表項前的小圖片
?? ??? ??? ?屬性值：url("圖片地址");
?? ??? ??? ?
?? ??? ??? ?<ul>
?? ??? ??? ??? ?<li>黑馬程序員</li>
?? ??? ??? ??? ?<li>黑馬程序員</li>
?? ??? ??? ??? ?<li>黑馬程序員</li>
?? ??? ??? ??? ?<li>黑馬程序員</li>
?? ??? ??? ?</ul>
?? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ?/* ul{list-style-type: decimal-leading-zero;} */
?? ??? ??? ??? ?ul{list-style-image: url("images/forward.gif");}
?? ??? ??? ?</style>
?? ?
?? ?5、尺寸屬性?? ?
?? ??? ?width:寬度
?? ??? ?height:高度
?? ??? ??? ?<div id="d1">div1</div>
?? ??? ??? ?<div id="d2">div2</div>
?? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ?#d1{background-color: red;width: 200px;height: 200px;}
?? ??? ??? ??? ?#d2{background-color: pink;width: 200px;height: 200px;}
?? ??? ??? ?</style>
?? ?6、顯示屬性
?? ??? ?display:
?? ??? ??? ?屬性值：none:隱藏
?? ??? ??? ??? ??? ?block:塊級顯示
?? ??? ??? ??? ??? ?inline：行級顯示
?? ??? ??? ?
?? ??? ??? ?<form action="">
?? ??? ??? ??? ?name:<input id="name" type="text" /><span id="span">對不起 輸入不符合要求</span>
?? ??? ??? ??? ?<br>
?? ??? ??? ??? ?pass:<input id="pass" type="password" />
?? ??? ??? ??? ?<br>
?? ??? ??? ??? ?<input id="btn" type="button" value="button" />
?? ??? ??? ?</form>
?? ??? ??? ?<style type="text/css">
?? ??? ??? ??? ?span{color:red;display: none}
?? ??? ??? ?</style>
?? ??? ??? ?<script type="text/javascript">
?? ??? ??? ??? ?document.getElementById("btn").onclick = function(){
?? ??? ??? ??? ??? ?document.getElementById("span").style.display = "inline";
?? ??? ??? ??? ?};
?? ??? ??? ?</script>
?? ?
?? ?7、浮動屬性
?? ??? ?float:
?? ??? ??? ?屬性值：left ?right
?? ??? ??? ??? ??? ?clear:清除浮動 left right both
?? ??? ??? ?缺點：?? ?(1)影響相鄰元素不能正常顯示
?? ??? ??? ??? ??? ?(2)影響父元素不能正常顯示
?? ?

四、css盒子模型

?

?? ?border:
?? ??? ?border-width:邊框的寬度
?? ??? ?border-color:邊框的顏色
?? ??? ?border-style:邊框的線型
?? ??? ?
?? ??? ?border-top:上邊框
?? ??? ?border-bottom:下邊框
?? ??? ?border-left:左邊框
?? ??? ?border-right:右邊框
?? ??? ??? ??? ?
?? ?padding:
?? ??? ?代表邊框內壁與內部元素之間的距離
?? ??? ?padding:10px;代表上下左右都是10px
?? ??? ?padding:1px 2px 3px 4px;上右下左
?? ??? ?padding:1px 2px;上下/左右
?? ??? ?padding:1px 2px 3px;
?? ??? ?padding-top:單獨設置
?? ?margin:
?? ??? ?代表邊框外壁與其他元素之間的距離
?? ??? ?margin:10px;代表上下左右都是10px
?? ??? ?margin:1px 2px 3px 4px;上右下左
?? ??? ?margin:1px 2px;上下/左右
?? ??? ?margin:1px 2px 3px;
?? ??? ?margin-top:單獨設置

?

總結

以上是生活随笔為你收集整理的JavaWeb笔记:CSS总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。