1.内链式样式
放入标签中，<body style="backgroud-color:green;color:#fff;">
2.嵌入式样式
放入head中，
<style type="css/css">
body{
backgroud-color:green;
color:#fff;
}
<style>
3.引入式样式
放在head中
<link rel="stylesheet" style="text/css" href="style.css">
style.css中内容与嵌入式中类似
html标记定义：
p font{
backgroud-color:green;
color:#fff;
}
class标记定义：
.p .pp{
backgroud-color:green;
color:#fff;
}
id标记定义：
#p #pp{
backgroud-color:green;
color:#fff;
}
优先级问题：
id样式定义>class样式定义>html标记定义
选择器组合可以用“，”链接
p,h1,h2,h3,h4,h5{
}
伪选择器
a:link 正常链接样式
a:hover 鼠标放上去样式
a:active 点击时的样式
a:visited 点击过的样式
CSS常见属性：
定义文本颜色color
1.color:red
2.color:#f00
3.color:#ff0000
4.color:rgb(255,0,0)
5.color:rgba(255,0,0,1)
定义字体大小font-size
px：设置确定的像素值
%：父元素的百分比
smaller：比父元素更小
larger：比父元素更大
inherit：继承父元素
定义字体类型font-family
font-family:微软雅黑，serif;
定义字体加粗font-weight
normal：400
bold：700
bolder：
lighter：
定义字体样式font-style
normal正常
italic斜体
oblique倾斜
inherit继承
小型大写字母显示文本font-variant
normal：正常
small-caps：小型大写字母显示文本
inherit：继承
背景颜色
background:背景颜色 url 重复 位置
background-color：
background-image：url(图片路径）
background-repeat：可选项：repeat repeat-x repeat-y no-repeat
background-position: 第一个left right center 第二个top bottom center 或者数值表示具体位置 20px 20px
文本属性
text-align横向排列：left rght center
line-right文本行高：1.% 2.px
text-indent首行缩进 1.px 2.inherit
letter-spacing字符间距1.normal 2.px 3.inherit
word-spacing单词间距1.normal 2.px 3.inherit
direction文本方向1.ltr从左到右 2.rtl从右到左 3.inherit
text-transform文本大小写1.capitalize每个字母大小写 2.uppercase定义大写字母 3.lowercase定义小写字母 4.inherit
边框属性
border-style边框类型
边框类型：none无边框，solid直线边框，dashed虚线边框，dotted点状，double双线
单独定义边框：border-left-style,border-right-style,border-top-style,border-bottom-style
border-width:thin细线段,medium中等线段,thick粗线段,px固定值
单独定义边框宽度：border-left-width,border-right-width,border-top-width,border-bottom-width
border-color
rgb(255,255,0) rgba(255,0,0,0.5) #f00 inherit
单独定义边框颜色：bordre-left-color,border-right-color,border-top-color,border-bottom-color
一个值：上下左右，两个值：（上下）（左右），三个值：上（左右）下，四个值：上右下左
简写方式：border:solid 20px #f60
list属性
list-style-type标记类型：disc实心圆，circle空心圆，decimal数字
list-style-position列表位置：inside，outside
list-style-image图像列表标记：URL，none
简写方式：list-style:circle inside url('arrow.jpg');
DIV和SPAN
div属于块级元素，一行
span属于内联元素，根据内容调整
盒子模型
margin:盒子模型外边距
padding：盒子模型内边距
border：盒子模型边框
width：宽度
height：高度
定位position
relative：正常定位
absolute：根据父元素进行定位
fixed：根据浏览器进行定位
static：没有定位
inherit：继承
离页面顶点的距离
left离页面顶点距离用px表示
right
top
bottom
z-index：层覆盖优先级
display：显示属性，none层不显示；block块状显示在元素后面显示，显示下一个块状元素；inline内联显示多个块显示在一行
float浮动1.left左浮动2.right右浮动
clear清除浮动both
overflow溢出操作，scroll出现滚动条；auto自动，超出之后增加滚动条；hidden隐藏
兼容性问题：
1.IETester 2.Multibrowser
设计工具：fireworks；photoshop
判断IE方法：
<!--[if IE 9]-->这是IE9<![endif]--> IE9浏览器显示
[if !IE 9]
[if (gt IE 5)&(lt IE 9)]
[if (IE 9)|(IE 10)]
扫一扫
2850
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
