一.css样式表
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