css常è§å±æ§ä½¿ç¨
常è§å±æ§
1.é¢è²å±æ§
color å±æ§å®ä¹åä½çé¢è²å±æ§
{color: brown} (对åºè±æåè¯)æè {color:#ffffff}(16è¿å¶å¯¹åºçé¢è²)
rgb模å¼: {color:rgb红(r),绿(g),è(b)} åèªçåå¼èå´å¨0~255ä¹é´
çº¢è² : p{color:rgb(255,0,0)}
ç»¿è² : p{color:rgb(0,255,0)}
èè² : p{color:rgb(0,0,255)}
rgbaæ¨¡å¼ åä¹åä¸æ · a 表示éæ度 åå¼èå´ 0-1ä¹é´
çº¢è² : p{color:rgba(255,0,0,0)}
ç»¿è² : p{color:rgba(0,255,0,0.3)}
èè² : p{color:rgba(0,0,255,0.5)}
2.åä½å±æ§
font-size åä½å¤§å°
font-size: 100px; 设置åºå®å¼
font-size: 100%; ç¶å
ç´ çç¾åæ¯
font-size: smaller;æ¯ç¶å
ç´ æ´å°
font-size: larger;æ¯æµ®äºèæ´å¤§
font-size: inherit;éæç¶å
ç´ ç
font-family å®ä¹åä½ åä½çä¼å ,è¥æçµèæå®ä½å°±æ¾ç¤ºå®ä½,没æå°±æ¾ç¤ºå¾®è½¯é é»,å¯ä»¥æç´¢è±æ代æ¿ä¸æ,è±æä¸éè¦å¼å·
font-family:'å®ä½','微软é
é»';
font-weight åä½ç²ç»
font-weight:normal; é»è®¤å¼
font-weight:bold; ç²
font-weight:bolder; æ´ç²
font-weight:lighter; æ´ç»
æè
font-weight:100~900; åå¼æ¯100~900çæ´ç¾æ°
font-style åä½æ ·å¼
font-style:normal æ£å¸¸
font-style:italic æä½
font-style:oblique å¾æ
font-style:inherit éæ
font-variant å°å大ååæ¯æ¾ç¤ºææ¬
font-variant:normal; æ å
font-variant:small-caps; å°åå°ååæ¯æ¾ç¤ºææ¬
font-variant:inherit; 继æ¿
èæ¯ç¸å ³å±æ§
background-color èæ¯é¢è²
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
body{
background-color:rgba(0,0,255,0.2)
}
</style>
</head>
<body>
<a href="http://www.baidu.com" target="_blank">----ç¾åº¦---</a>
</body>
</html>
ææ:
background-image èæ¯å¾ç
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
body{
/* å¾ç */
background-image:url(images/user.png);
/* éå¤ */
background-repeat: no-repeat;
/* ä½ç½® */
background-position: center;
}
/* ç®åæ¹å¼ åä¸é¢ææä¸æ · */
.body{
background: #f2f2f2 url(images/user.png) no-repeat center
}
</style>
</head>
<body class="body">
<a href="http://www.baidu.com" target="_blank">----ç¾åº¦---</a>
</body>
</html>
ææ¬å±æ§
text-align 横åæå
text-align:left;
text-align:right;
text-align:center;
line-height ææ¬è¡é«
line-height:xx%; ç¾åæ¯è¡é«
line-height:xx;åºå®æ°å¼
text-indent é¦è¡ç¼©è¿
text-indent:50%; 缩è¿ç¶çº§å
ç´ ç50
text-indent:50px; 缩è¿åºå®å¶
text-indent:inherit; 继æ¿
letter-soacing å符é´è· æåä¸æåé´è· word-spacing åè¯é´è· åå符é´è·ç¸å
letter-soacing:normal;é»è®¤
letter-soacing:20px;èªå®ä¹å¤§å°
letter-soacing:inherit; 继æ¿
direction ææ¬æ¹å
direction:ltr;ä»å·¦å°å³ left to right
direction:rtl;ä»å³è¾¹å°å·¦è¾¹ right to left
direction:inherit; 继æ¿
text-transform ææ¬å¤§å°å
text-transform:capitalize; æ¯ä¸ªåè¯ä»¥å¤§ååæ¯å¼å¤´
text-transform:uppercase; å®ä¹ä»
æ大ååæ¯
text-transform:lowercase; å®ä¹æ 大ååæ¯,ä»
æå°ååæ¯
text-transform:inherit; 继æ¿
è¾¹æ¡å±æ§
è¾¹æ¡é£æ ¼ border-style
border-style:none; æ è¾¹æ¡
border-style:solid; ç´çº¿è¾¹æ¡
border-style:dashed; è线边æ¡
border-style:dotted; ç¹çº¿è¾¹æ¡
border-style:double; å线边æ¡
border-style:groove; å槽边æ¡
border-style:ridge; åç¶è¾¹æ¡
border-style:inset; insetè¾¹æ¡
border-style:outset; outestè¾¹æ¡
border-style:inherit; 继æ¿
è¾¹æ¡å®½åº¦ border-width
border-width:thin;ç»è¾¹æ¡
border-width:medium;ä¸çè¾¹æ¡
border-width:thick;ç²è¾¹æ¡
border-width:2px;åºå®å¼è¾¹æ¡
border-width:inherit;继æ¿
è¾¹æ¡é¢è²
border-color:rgba(0,0,225,0.2)
å表å±æ§
list-style-type æ è®°çç±»å
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<script src="main.js"></script>
<style>
ul{
list-style-type: decimal
}
</style>
</head>
<body>
<ul>
<li>æ åºå表</li>
<li>æ åºå表</li>
<li>æ åºå表</li>
<li>æ åºå表</li>
<li>æ åºå表</li>
<li>æ åºå表</li>
<li>æ åºå表</li>
</ul>
<ol>
<li>æåºå表</li>
<li>æåºå表</li>
<li>æåºå表</li>
<li>æåºå表</li>
<li>æåºå表</li>
<li>æåºå表</li>
<li>æåºå表</li>
<li>æåºå表</li>
</ol>
</body>
</html>
list-style-position æ è®°çä½ç½®
list-style-image 设置å¾åå表æ è®°
list-style ç®åæ¹å¼