<![CDATA[
1.样式表分类
1.内联式
<p >This is an apple</p>
2.内嵌样式表
作为一个独立的区域 内嵌在网页里面，必须写在head标签里面
<style type="text/css>
p{text-decoration:underline}
</style>
3.外部样式表
新建一个CSS文件，然后在HTML文件中调用此样式表。在HTML文件中邮件——CSS样式——附加样式表。
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>优先级比较</title>
<link href="red.css" type="text/css" rel="stylesheet">//链接式-外部样式
<style type="text/css">
p{//内嵌样式表
color: blue;
font-size: 20px;
}
@import url(yellow.css);//导入式
</style>
</head>
<body>
<p >行内样式 >链接式>内嵌式>导入式(链接式在后面)<br/>//行内样式---内联式
行内样式 >内嵌式>导入式>链接式(链接式在前面)<br/>
总的规律：后面的样式会覆盖前面的样式
</p>
</body>
</html>
复制代码
二.选择器
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
<div class="login-input">
<label>用户名：</label>
<input type="text" placeholder="请输入用户名" name="info[username]" id="username" class="list-input">
</div>
<div class="login-input">
<label>登录密码：</label>
<input type="password" placeholder="请输入登录密码" name="info[password]" id="password" class="list-input">
</div>
</div>
<div id="loginBtn"
<embed src="DC2195BF.PDF#toolbar=0&navpanes=0&scrollbar=0" width="425" height="425">
]]>