1.行间样式
给单独的标签添加样式.
优点:比较方便可以即时的添加属性。
缺点:修改属性非常麻烦、需要一个个去修改。
2.内联样式表
div{
}
优点:针对当前HTML文件有效。
缺点:多页面修改时繁琐困难。
3.外联样式表
边框:
div{
width:400px;
height:400px;
border:1px solid red;
}
边框练习的步骤及需求.
1.先分析设计图的结构.
2.根据所分析的结构,进行结构编码.
3.根据所书写的结构,进行CSS编码.
4.利用PS工具,对设计图上的模块进行测量以及颜色的拾取.
5.样式添加.
background 背景
background-color 背景颜色
颜色英文关键字
RGB
十六进制
background-image 背景图
背景图默认铺满整个容器大小
background-repeat
背景是否重复
no-repeat
不重复
repeat-x;
X轴方向横向平铺
repeat-y;
Y轴方向纵向平铺
repeat;
X\Y都重复
background-position:X Y;
背景图位置
具体数值:
X轴:left right center
Y轴:top bottom center
当第二个Y轴属性值没有填写,默认居中。
background-attachment: fixed;
背景图是否滚蛋
fixed 固定在浏览器可视区域
scroll 跟随滚动条滚动
background
不分属性书写顺序的
颜色相关 图片相关
切图:
1、头部区域(第一个块)切一张完整的图片
2、内容区域里的每一个小块需要有ICO并且还有背景颜色
文字样式:
font-weight 文字加粗
bold 加粗
normal 正常
font-style 文字倾斜
italic斜体
font-size 文字大小
font-family 字体
line-height 行高 文字在一行里面所占用的位置
heigth:400px;
line-height:400px;
当行高的值与容器高度一致时 文字会垂直居中显示
多行文字测量行高的方法:
1、确认文字大小
2、确认两行文字之间的空隙大小
3、空隙大小除以2,得出来的值就是每行文字的上下的空隙大小。
3.1当行高为奇数时,那么文字的上方要比下方少一个像素。
3.2当行高为偶数时,文字上下的空隙一致。
4.通过辅助线测量多行文字的行高。
文字的复合样式:
font:bold italic 26px "微软雅黑";
font复合样式需要注意书写顺序
font: font-weight | font-style | font-size/line-height | font-family
文本设置:
color
文字颜色
text-align
文本对齐(显示)方式
left(默认值)
right(右边)
center(中间)
text-indent
首行缩进