css
一什么是样式表
css是cascading style sheet(层叠样式表)的缩写
是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
二样式表表示法
1.<内部样式块对象>
<html>
<head>
<title>Hello CSS</title>
<style type="text/css">
<!--//用点加标签也可以,通常如此灵活
H1{color:green;font-size:36px;font-family:"Time new roman"}
P{text-indent:1cm;background:yellow;font-family:courier}
-->
</style>
</head>
<body>
<H1><H1>标签的字体变成这个样子</H>
<p><p>标签的效果</P>
</body>
</html>
2<外接样式表>表示法
基本格式:
<link rel=stylesheet href=url type="text/css">
<head>
<title>title of article</title>
<link rel=styelsheet href="css.css" type="text/css">
</head>
eg:css.css
.p1{ //加点加值表示不直接用于该标签 调用:class="p1"
font-family:"宋体";
font-size:12px;
color:#ff0000;
text-decoration:none;
background-color:#000000;
}
3.<内联定义>表示法
基本格式:
<html标签 style="css样式">
css 控制显示区域
</html标签>
<p style="margin-left:0.5in;margin-right:0.5in">
这一行被增加了左右的外补丁
<p>
三执行样式表顺序
内联>外接样式表>内部样式表
基本原则:距离html语言标签就近原则
四.样式表的分类
字体设置
font-family:
font-size:
font-style:inherit/italic/normal/oblique
font-weight:bold
text-transform:uppcase,lowcase/capitaize
text-decoration:underline/overline/line-throught/blink 闪烁文字none
超级链接的颜色变化
<style type="text/css">
A:link{
text-decoration:none;
color:#00ff00;
font-size:12px;
}
A:active {
text-decoration:overline;
font-size:13px;
color:#ff0000;
}
A:visited{
text-decoration:none;
color:#000000;
}
a:hover{
text-decoration:underline;
color:#0066FF;
}
</style>
位置设置
word-spacing
letter-spacing:字间距设置
line-height:行距设置
text-align:文字水平对齐方向
vertical-align:垂直对齐方向
text-indent:首行缩进