一、基本结构
二、美化(css)
css:层叠式样式表
分类：（根据位置分）
1、行内样式
2、内嵌样式
3、外部样式
1）提高代码利用率
2）基本结构和css代码分离开
1、行内样式：直接把css代码放标签内
格式：
<标签 style="属性名:属性值;属性名:属性值;"></标签>
例子：
<p style="font-size:250px;color:yellow;">膀胱</p>
2、内嵌样式：(嵌在<head></head>中)
<head>
<style type="text/css">
css代码
</style>
</head>
3、外部样式(脱离出html文件以外):
附加：
主流样式(不同页面引用同一个样式文件)
1)新建一个.css文件，把所有的css代码放这个文件里
2)链接两个文件（.css和.html）:
<link type="text/css" rel="stylesheet" href="路径.css"/>
link:链接
rel:关系
sheet:表
stylesheet:样式表
css代码:
1)标签选择器
标签名{
属性名:属性值;
属性名:属性值;
}
例子：
p{}
2)类选择器：(可以重复使用！！！)
.类名{
同上
}
引用：
<标签 class="类名"></标签>
3)id选择器:(一个id只能用一次！！！)
#id名{
同上
}
引用:
<标签 id="id名"></标签>
选择器优先级:
id>类>标签
字体设置：
font-size:
color:
font-weight:bold/normal
font-style:italic(斜体)/normal
font-family:宋体/黑体/…………
text-decoration:none/underline
decoration:装饰
none:没有
underline:下划线
美化：
样式表：
1、行内样式
style=""
2、内嵌样式
<head>
<style type="text/css">
</style>
</head>
3、外部样式
.css文件
<link type="text/css" rel="stylesheet" href="路径.css"/>
选择器：
1、标签选择器
p{}
h1{}
2、类选择器
.pp{}
class="pp"
3、id选择器
#ppp{}
id="ppp"
字体设置：
font-size:
color:
font-weight:bold/normal
font-style:italic/normal
font-family:宋体
text-decoration:none/underline
text-align:left/center/right
line-height:行高
letter-spacing:字符之间的间隔
边框设置：
子属性:
border-color:边框的颜色
border-width:边框的粗细
border-style:solid(实线)/dashed(虚线)/dotted(点线)
总属性：
border:1px solid red;
border-left:左边框
border-right:右边框
border-top:上边框
border-bottom:下边框
去边框：
border:0px;
border:none;(没有)
附加：
细边框：
border:1px solid 颜色;
超链接伪类：(不同状态)
<a href="#"></a>
正常状态：
:link{}
点完后，访问完后
:visited{}
鼠标悬浮时：
:hover{}
点击未释放的时，正在点的时候
:active{}
顺序问题:
l v h a
背景设置：(不占地方)
background-color:背景色;
background-image:url(images/1.jpg);
background-repeat:repeat/no-repeat/repeat-x/repeat-y
background-position:x y;
x:右正左负
y:下正上负
x:left/center/right
y:top/center/bottom
例子：
background-position:10px -20px;
background-position:left bottom;
repeat-x:横向平铺
repeat-y:纵向平铺
总属性:
background:color url() repeat position;
例子：
background:red url() no-repeat 0px 50px
url:路径
repeat:重复
position:位置
背景：
background-color:
background-image:url()
background-repeat:repeat/no-repeat/repeat-x/repeat-y
background-position:x(右正左负) y(下正上负)
background:red url() no-repeat 20px -20px;
布局：
层标签，分区标签
<div></div>
1、浮动属性：
float:none/left/right
目标：
让位置(table/div/块级)
2、清除浮动属性：
clear:none/left/right/both(两者都)
外边距属性：
margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
上 右 下 左:
margin:10px 20px 30px 40px;
margin:10px(上、下) 20px(右、左);
margin:10px(上、下、左、右);
去外边距：
margin:0px;
div居中：
margin:0px auto;
auto:自动
列表去掉序列号:
list-style:none;
内边距/填充属性 :(小心点！！！)
影响盒子大小!!!
padding-left:
paddgin-right:
padding-top:
padding-bottom:
上 右 下 左:
padding:10px 20px 30px 40px;
padding:10px 20px;
padding:10px; |
|
收藏
淘帖
踩
