层叠样式表 Cascade Style Sheet
用来装饰HTML/XML的标记集合.
#:id .:class
head里的标签有 meta, base, title, style, link, script.
css由head的style指定:
H1就是选择符, 所以说CSS是用来装修标签的.
<html> <head> <style type="text/css"> H1{font-size:16pt;color:red} H2{font-size:10pt;color:green} </style> </head> <body> <h1>Hello</h1> <h2>World</h2> </body> </html>
body里指定:
<html> <head> </head> <body> <h1 style="font-size:20pt;color:blue">Hello</h1> <h2 style="font-size:10pt;background:yellow; font-family:courier">World</h2> </body> </html>
link方式:
<html> <head> <title>link</title> <link REL=stylesheet href="03.css" type="text/css"> </head> <body> <h1>Hello</h1> <h2>World</h2> </body> </html>
css内容:
H1{font-size:16pt;color:red} H2{font-size:10pt;color:green}
同时装饰的优先级:就近: hello2 用css文件, body里的就用自己的.
<html> <head> <link REL=stylesheet href="03.css" type="text/css"> </head> <body> <h1 style="font-size:20pt;color:blue">Hello</h1> <h2 style="font-size:10pt;background:yellow; font-family:courier">World</h2> <h1>Hello2</h1> //用css文件的 </body> </html>
类选择符class:
<html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <style type="text/css"> P.code{font-size:16pt;color:red} P.comment{font-size:10pt;color:green} </style> <title>CSS字体属性</title> </head> <body> <P class="comment">Hello World!!!</P> <pre> //保留下面的格式 <P class="code"> public class Hello{ public static void main(String args[]){ System.out.println("Hello world!!!"); } } </P> </pre> </body> </html>
任何调用code都用这个格式
<html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <style type="text/css"> .code{font-size:16pt;color:red} </style> <title>CSS字体属性</title> </head> <body> <h1 class="code">Hello World!!!</h1> <pre> <P class="code"> public class Hello{ public static void main(String args[]){ System.out.println("Hello world!!!"); } } </P> </pre> </body> </html>
这就是类选择符, class选择符 和class对应
<html> <head> <style type="text/css"> .font1{font-family:verdana;font-style:italic;font-variant:small-caps;font-weight:lighter;font-size:18pt;color:green} .code{font-size:16pt;color:red} </style> <title>CSS字体属性</title> </head> <body> <p class="font1">Hello World!!!</h1> </body> </html>
还有一种情况, 选择符之间有空格:
<html> <head> <style type="text/css"> h1,p{font-size:16pt;color:red} p a{font-size:16pt;color:blue} </style> <title>CSS字体属性</title> </head> <body> <h1>Hello World!!!</h1> <pre> <P> public class Hello{ public static void main(String args[]){ System.out.println("Hello world!!!"); } } </P> </pre> <p> <a name="test">hello</a> </p> </body> </html>
- id选择符: 和#对应 用于js里的getElementById
<html> <head> <style type="text/css"> #code1{font-size:16pt;color:red} #code2{font-size:16pt;color:blue} </style> <title>CSS字体属性</title> </head> <body> <h1 id="code1">Hello World!!!</h1> <pre> <P id="code2"> public class Hello{ public static void main(String args[]){ System.out.println("Hello world!!!"); } } </P> </pre> </body> </html>
CSS字体属性:'
font-family 各种字体
font-style 字体样式 italic, oblique
font-variant:small-caps 小体大写
font-weight 字体粗细 bold, bolder,lighter
font-size 大小 absolute, relative, %
color 颜色
css颜色与背景属性:
color
background-color
background-image
background-repeat: repeat-x, repeat-y no-repeat
background-attachment: 背景滚动 scroll, fix
background-position: % n em top left right bottom
<!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <style type="text/css"> .font{font-family:verdana; font-style:italic; font-variant:small-caps; font-weight:lighter;font-size:18pt;color:red} .p1{background-image:url(images/nm.jpg);background-repeat:repeat-y;} </style> <title>背景属性</title> </head> <body> <p class="font">这是一只猫,Miao! <br> </p> <p class="p1"> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> </p> </body> </html>
文本属性:
word-spacing:单词之间距离
letter-spacing 字母间距
text-decoration装饰样式 underline , overline, line-through, blink
vertical-align: sub, super,top,text-top,middle, bottom, text-bottom
text-transform: 转为其他形式 capitalize, uppercase, lowercase
text-align: left, right, center, justify
text-indent:缩进 n em , %
line-height: pixels, n em, %
<!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <style type="text/css"> .text{word-spacing:4; letter-spacing:4; text-decoration:line-through; font-size:16pt;color:red} </style> <title>CSS字体属性</title> </head> <body> <p class="text"> long long ago, there's a girl named betty, she was 5 years old. 很久很久以前,有个小姑娘名字叫betty, 她5岁了<br> </p> </body> </html>
装饰超链接, 伪类选择符, 链接颜色变化:
<html> <head> <style type="text/css"> /*我是注释*/ a:link{color:green;text-decoration:none} a:active{color:blue;text-decoration:none} a:visited{color:orange;text-decoration:none} a:hover{color:red;text-decoration:underline} </style> </head> <body> <a href="css1.html">我就是用来说明问题的链接</a> </body> </html>
边界属性:margin:
margin-top: n em , %
margin-right, margin-bottom,margin-left
填充属性: padding:
padding-top: n em , %
padding-right, padding-bottom,padding-left
<!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <style type="text/css"> .p1{background-image:url(images/nm.jpg);background-repeat:repeat-y; margin-left:5em; padding-left:5em} </style> <title>背景属性</title> </head> <body> <p class="p1"> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> 这是一只猫,喵喵喵! <br> </p> </body> </html>
边框属性:
border-top-width n em, thin, medium, thick
border-right-width, border-bottom-width, border-left-width,
border-width,
border-color,
border-style, 边框样式 dotted, dash,solid, double, groove, ridge, inset, outset
border-top(right,bottom,left): border-width, border-style, color
<html> <head> <style type="text/css"> p{border:5px double purple} </style> <title>边框属性</title> </head> <body> <p align="center"> <br> 生命诚可贵<br> 爱情价更高<br> 若为自由故<br> 两者皆可抛<br> <br> </p> </body> </html>
列表属性:
<html> <head> <title>列表属性</title> <style type="text/css"> li{list-style-image:url(images/03.jpg)} </style> </head> <body> <p> <ul> <li>list1</li> <li>list2</li> <li>list3</li> </ul> <img src="images/02.jpg" width="280" height="185"> </p> </body> </html>
鼠标属性:
<html> <head> <title>鼠标属性</title> </head> <body> <h1>鼠标效果</h1> <div style="font-family:隶书; font-size:24pt;color:green"> <span style="cursor:hand">手的形状</span><br> <span style="cursor:move">移动</span><br> <span style="cursor:ne-resize">反方向</span><br> <span style="cursor:wait">等待</span><br> <span style="cursor:help">求助</span><br> </div> </body> </html>
定位属性:
position: absolute, relative, static
left/top, width, height: n em, %
clip:剪切: shape, auto
overflow: 内容超出时: visible, hidden, scroll, auto
z-index: 立体效果 integer
visibility: 可见性 inherit, visible, hidden
<!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <title>定位属性</title> <style type="text/css"> #container1{position:absolute; top:100px ;margin-left:5em;} #container2{visibility:hidden; position: absolute; top:100px;margin-left:5em;} p{font-size: 12pt; margin-left:5em} </style> </head> <body> <p style="font-size:15pt; color:##cc33cc; font-family:行书体" >请选择一副图片:</p> <DIV id=container1> <image height=280 src="images/qin.jpg" width=185> <p style="font-size:12pt; color:#cc9933; font-family:行书体 margin-left:10em">名称:宝宝</p> </DIV> <DIV id=container2> <image height=280 src="images/nm.jpg" width=185> <p style="font-size:12pt; color:#3366cc; font-family:行书体 margin-left:10em">名称:奶猫</p> </DIV> <form name=myform> <p> <input onclick="container1.style.visibility='visible'; container2.style.visibility='hidden'" type=button value=宝宝> <input onclick="container2.style.visibility='visible'; container1.style.visibility='hidden'" type=button value=奶猫> </p> </form> </body> </html>
z-index:
<!doctype html> <html> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <head> <title>zindex</title> <style type="text/css"> .pile{left:2in; 3in; position: absolute; top:2in; height:3in} .pile1{left:3in; 1in; position: absolute; top:2in; height:1in} </style> </head> <body> <img class= pile id=image style="z-index:1" src="images/qin.jpg"> <DIV class= pile id=text1 style="z-index:3; color:#ffff33"> <font size=5 color="red"><b>将覆盖在图片上</b></font> </DIV> <img class= pile1 id=image style="z-index:2" src="images/cat.gif"> </body> </html>