css-知識總結
是什麽
CSS通常稱為CSS樣式或層疊樣式表,主要用於設置HTML頁面中的文本內容(字體,大小,對其方式等),圖片的外形
(高寬、邊框樣式、邊距等)以及版面的布局等外觀顯示樣式。
CSS可以是HTML頁面更好看,CSS色系的搭配可以讓用戶更舒服,CSS+DIV布局更佳靈活,更容易繪制出用戶需要的結構。
引入樣式的三種常用樣式:
1.行內樣式:
<a style="color: #f00; font-size:30px;">行內樣式</a>
2.內部樣式:
<style type="text/css">
body{
}
</style>
3.外部樣式:
<link rel="stylesheet" type="text/css" href="css/demo00.css"/>引用方式
優先級:行內樣式------->內部樣式------>外部樣式
選擇器
常用三種:
id選擇器:
#demo1{
color:#0f0;
}
<h1 id="demo1">id選擇器</h1>
類選擇器:
.myClass{
font-size:25px;
}
<h1 class="myClass">Java 軟件開發</h1>
元素選擇器:
h1{
color:#F00;
font-size:50px;
}
<h1>華信智原</h1>
(了解)屬性選擇器:
<style>
input[type=‘text‘]{
background-color:yellow;
input[type=‘password‘]{
background-color:green;
}
</style>
包含選擇器:
<style>
#d1 div{
color:red;
}
</style>
div:獨占一行
浮動;float
常用屬性值:
lfet:元素向左浮動
right:元素想右浮動
none:元素不浮動(默認)
取消浮動:clear
常用屬性值:
left:不允許左側有浮動
right:不允許右側有浮動
both:同時清除左右兩側浮動的影響
轉化:display
用於<span>轉化
inline:此元素將顯示為行內元素(行內元素默認的display屬性值)
block:此元素將顯示為塊元素(塊元素默認的display屬性值)
inline-block: 將對象呈遞為內聯對象,但是對象的內容作為塊對象呈遞。
none:此元素將被隱藏,不顯示,也不占用頁面空間。
例如:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
span{
border: 1px solid #000;
width:100px;
height: 40px;
}
</style>
</head>
<body>
<!--默認顯示一行,邊框環繞,高度沒有作用-->
<span>顯示1-1</span>
<span>顯示1-2</span>
<!--每一行顯示,高寬有作用-->
<span style="display:blo ck;">顯示2-1</span>
<span style="display:block;">顯示2-2</span>
</body>
</html>
邊框:border
外邊框:margin
內邊據:padding
css-知識總結