层叠样式表 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>