一.css样式表
1.样式表分类
1.内联式
<p style="font-size:18px;">This is an apple</p>
2.内嵌样式表
作为一个独立的区域 内嵌在网页里面,必须写在head标签里面
<style type="text/css>
p{text-decoration:underline}
</style>
3.外部样式表
新建一个CSS文件,然后在HTML文件中调用此样式表。在HTML文件中邮件——CSS样式——附加样式表。
二.选择器
1.标签选择器
用标签名直接做选择器
<style type="text/css">
p
{
font-size=14px;
}
</style>
直接作用下面的p标签
<p>GOd is a girl</p>
2.class选择器
class选择器都是以“.”为开头
<head>
<style type="text/css">
.main {
height=24px;
width=18px;
text-align:center;
}
</style>
</head>
<body>
<div class="main"> 调用的class样式。
Day by day
</div>
</body>
3.ID选择器
id选择器都是以"#"开头的
<head>
<style type="text/css">
#main{
width=15px;
}
</style>
</head>
<body>
<div id="main"> 调用的id样式
ones more
</div>
</body>
4.复合选择器
1.用","逗号隔开表示并列
<style type="text/css">
p,span{
width=100px;
height=50px;
}
</style>
2.用空格隔开表示后代
<style type="text/css>
.main p{ /*找到使用main的标签,然后再其下好到p标签,则p标签使用此样式*/
样式
</style>
3.筛选".(英文的点)"
<style type="text/css">
p.sp /*在P标签中的class="sp" 应用该样式*/
{
样式
}
</style>
样式和属性
1.背景和前景
background-color 背景颜色
background-image:url 背景图片
background-attachment-fixed 背景图是固定的
background-attachment-scroll 背景随字体滚动
background-attachment:no-repeat 背景不平铺 /* no-repeat 不平铺 repeat 平铺 repeat-x 横向平铺 repeat-y 纵向平铺
background-position:center 居中显示 /* 背景图居中,设置背景图位置时,repeat必须为 no-repeat
background-position:right top; 图片放到右上角
background-position:left 100px;top 200px; 背景图离左边100像素,离上边200像素(恶意设为负值)。
2.字体
font-family 字体
font-size:12px; 字体大小12像素
font-weight:bold 字体加粗 正常是normal
font-style:italic 字体倾斜 正常是normal