码迷,mamicode.com
首页 > Web开发 > 详细

初学HTML 05

时间:2019-02-22 17:00:19      阅读:190      评论:0      收藏:0      [点我收藏+]

标签:字体   htm   盒子模型   pad   rda   左右   边框   no-repeat   上下   

框模型
框:页面上所有的元素都可以称之为"框"
框模型:(Box Model),又称为盒子模型,定义框处理元素内容、内边距、外边距、边框的样式
尺寸
边框
内边距
外边距

 

 

外边距
属性:margin
margin-方向:

 

margin-left:5px;       左
margin-right:5px;       右
margin-top:10px;        上
margin-bottom:10px;      下

margin:10px 20px;      上下10     左右20

 

内边距

属性
padding
取值:
px
%

 

具体格式同margin

 

 

背景色
属性:background-color

 

背景图片
属性:background-image
取值:url(图像路径)
background-image:url("");

 

背景属性
属性:background
取值:color url(图像) repeat attachment position;
background:red url() fixed;
常用方式:
background:url() repeat position;

 

 

背景重复
默认情况,背景图会在水平和垂直两个方向都出现重复的效果(平铺)
属性:background-repeat

取值:
repeat :默认值,水平垂直平铺
repeat-x : 水平平铺
repeat-y : 垂直平铺
no-repeat : 不平铺(用的最多)

 

背景图片固定
属性:background-attachment
取值:
scroll ,滚动,默认值
fixed,背景图像固定

 

背景定位
改变背景图像在元素中的位置
属性:background-position
取值:
x y :x表示水平方向移动距离,以屏幕左上角为原点。+向右,-向左,y表示垂直方向移动距离,+向下,-向上

 

字体相关
1、指定字体
font-family:value,value2,value3 ....;
font-family:"microsoft yahei","arial","verdana";
2、字体大小
font-size:value;
px 或 pt作为单位
font-size:12px;
3、字体加粗
font-weight:normal / bold ;

4、字体样式(斜体)
font-style:normal/italic;
5、小型大写字母
font-variant:normal/small-caps;
6、字体属性
font:font-style font-variant font-weight font-size font-family;

常用方式:
font:font-size font-family;
font:12px "微软雅黑",arial,verdana;

 

初学HTML 05

标签:字体   htm   盒子模型   pad   rda   左右   边框   no-repeat   上下   

原文地址:https://www.cnblogs.com/nnnnmmmm/p/10419140.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!