css基础样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>基础css样式</title>

<style type="text/css">
/*优先级说明：
1.行级>内部>外部
2.id >类选择器>标签选择器《无论是在外部还是在内部，都是这个顺序》
当选择器是同一种类型的时候，就使用就近原则。
就近原则是指样式表定义位置的远近。
例如，h2标签引用了两个类选择器，那么它的显示效果是叠加的，冲突的部分则显示位置靠“后”的样式表。
引用多个类选择器的时候，必须要用双引号，中间用空格隔开*/

/*设置div的定位样式，使用绝对定位，左边，上边都是20个像素*/
/*设置p的定位样式，使用绝对定位，左边，上边都是20个像素*/
/*
*{
padding:0px;
margin:0px;
}
div{
position:absolute;
left:20px;
top:20px;
width:200px;
height:200px;
border:1pxsolid red ;
}
p{
position:absolute;
left:20px;
top:20px;
}*/

p{
/*字体大小*/
font-size:30px;
/*字体，从第一个字体开始寻找，直到匹配上为止，如果都匹配不上，则使用默认的字体*/
font-family:华文彩云,幼圆,宋体;
/*加粗*/
font-weight:bolder;
/*斜体*/
font-style:italic;
/*小写变大写*/
font-variant:small-caps;
}

p{
/*每个字符之间的间距*/
letter-spacing:0.5cm;
/*每个单词之间的间距*/
word-spacing:1cm;
/*对其方式(相对的是容器)*/
text-align:center;
/*下划线(underline)，删除线(line-through)，上划线(overline)*/
text-decoration:line-through;
/*设置英文大小写：全大写uppercase,全小写lowercase，首字母大写capitalize*/
text-transform:uppercase;
color:red ;
}

body{
/*设置图片背景url为固定写法，里边的值有没有双引号都可以*/
background-image:url(images/002.jpg) ;
/*当图片比较小的时候，背景图片就会以多张平铺的方式占满整个屏幕
no-repeat：图片背景就只会是一张<不会拉伸图片来铺满整个屏幕，而是图片有多大则显示多大>。
repeat-x：在x方向多张平铺占满屏幕；
repeat-y: 在y方向多张平铺占满屏幕；
*/
background-repeat:no-repeat;
/*背景位置，默认为left,top,right,bottom,center*/
background-position:right bottom;
/*背景的滚动方式
fixed :滚动屏幕的时候，图片跟着滚动
scroll：滚动屏幕的时候，图片不跟着滚动*/
background-attachment: fixed ;
/*背景颜色*/
background-color:#ffff66;
}

.body{
background-color: bisque;
/*background: url(img/img0.jpg);*/
text-align: center;
}
.a{
color: yellow;
font-size: 33px;
padding: 0px;
}
#c{
color: gold;
}
.c{
font-size: 30px;
}
span{
font-size: 30px;
}
div{
margin: 10px;
font-size: 30px;
}
font{
font-size: 30px;
}
/*超链接样式*/
a:link{
color:red;
}
a:visited{
color:blue;
}
a:hover{
color:purple;
}
a:active{
color:orange;
}
/*鼠标样式*/
#mouse{
/*如果pointer不生效则把值修改成hand
move：鼠标变成移动控件的十字样式；
help:鼠标变成带问号的帮组样式；
*/
cursor:pointer;

</style>

<link rel="stylesheet" type="text/css" href="css/b.css" />
</head>
<body class="body">

<p style="color: blue; font-size: 22px;"><font face="微软雅黑">最怕空气突然安静</font></p>
<h1 class="a">最怕朋友突然的关心</h1>

<h1 class="b">最怕回忆突然翻滚</h1>

<div id="c"><font class="c">绞痛着不平息</font></div>

<div><font style="color: azure;"><b>最怕</b>突然听到你消息</font></div>
<div><span style="color: aqua;"><i>想念如果会有声音</i></span></div>
<div><font><s>不愿那是悲伤的哭泣</s></font></div>
<div><font><sup>事到如今</sup></font></div>
<div><font><sub>终于让自己属于我自己</sub></font></div>
<div ><a href="###">只剩眼泪还骗不过自己</a></div>
<div style="color: brown;">突然好想你</div>
<div style="color: greenyellow;">你会在哪里</div>
<div style="color: burlywood;">过的快乐或委屈</div>
<div style="color: brown;">突然好想你</div>
<div style="color: greenyellow;">突然锋利的回忆</div>
<div style="color: burlywood;">突然模糊的眼睛</div>
<a href="http://www.sohu.com">搜狐</a><a href="http://www.baidu.com">百度</a><a href="http://www.163.com">新浪</a>
<p id="mouse">HELLO</p>

</body>
</html>

猜你喜欢