【2017-03-23】CSS基础：内联样式

CSS：层叠式样式表

1、对层标签整体进行操作

宽度 width:200px/50%

高度 height:200px/50%

背景色 background-color:red/#颜色代码

背景图片 background-image:url(图片路径)

背景图片排列方式 background-repeat:repeat平铺/repeat-x背景图像将在水平方向重复/repeat-y背景图像将在垂直方向重复/no-repeat背景图像将仅显示一次

背景图片位置 background-postion:

背景图片大小 background-size:

背景图片是否滚动（fixed背景图锁定） background-attachment:fixed

边框 border:5px solid red(宽度实线/虚线颜色)

绝对定位(定位层标签左上角的点) position:abslute;

层间距 margin-left/right/top/bottom:10px left层标签左侧间距,right层标签右侧间距,top层标签上部间距,bottom层标签底部间距

2、对层标签中文字样式进行操作

格式：<div style="font-weight:100;font-style:italic;text-decoration:underline;font-size:10px;color：red;font-family：黑体"></div>

加粗 font-weight:100/bold;

倾斜 font-style:italic;

下划线 text-decoration:underline;

删除线 text-decoration:line-through;

大小 font-size:10px; (正常浏览一般12px-18px)

颜色 color：red/#颜色代码；

字体 font-family：黑体；

3、流式布局

格式：<div style="width:100px;height:100px;background-color:blue;float:left/right;margin-left/right/top/bottom:10px;min-width:500px"></div>

float left从左向右布局,right从右向左布局

min-width:500px 设置流式布局最小宽度,若浏览器页面小于500px,则下方出现水平滚动条

4、层标签分组

格式：

<head>

.组名{width：；

height：；

………… ；

}

</style>

</head>

<body>

</body>

分组后的层标签按照<head>内的格式统一

5、将一个<div>排布到页面中间

先设置绝对定位，再将这个div左上角的点定位到页面中央，然后向左和向上分别进行调整

6、去掉层标签和html页面顶部的缝隙

<head>

* {
margin:0px;
padding:0px;
}

</head>

posted @ 2017-03-25 19:46 丶蘇Da同阅读(475) 评论(0) 收藏举报

刷新页面返回顶部