CSS：层叠式样式表

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

<div style="width:200px;height:200px;background-color:blue"></div>

宽度            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>

<style type="text/css">

.组名{width：         ；

height：        ；

…………          ；

}

</style>

</head>

<body>

<div class="组名"></div>

<div class="组名"></div>

<div class="组名"></div>

</body>

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

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

<div style="width:200px;height:300px;background-color:red;position:absolute;top:50%;margin-top:-150px; left:50%; margin-left:-100px;"></div>

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

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

<head>

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

</head>

【2017-03-23】CSS基础：内联样式的更多相关文章

  1. HTML&CSS基础-内联样式和内部样式表

    HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...

  2. HTML&CSS基础-内联框架

    HTML&CSS基础-内联框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...

  3. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  4. HTML基础 内联样式改进 三毛语录

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. html css的内联样式 内部样式表 外部样式表的优先级

    http://www.w3school.com.cn/html/html_css.asp 这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式 ...

  6. 你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？

    css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...

  7. CSS的引用方式（引用外部样式表、内部样式表、内联样式表）

    CSS引用外部样式表的优点:一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件,所以外部引用相对于内部引用和内联引用来说是是节省资源的. CSS使用内部样式表.内联样式表的优点:可以直观的 ...

  8. CSS3——注释 id 和 class 选择器 css创建（外部、内部、内联样式表）

    注释 /*         注释内容          */ id 和 class 选择器 id   ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...

  9. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  10. Vue 内联样式

    前置说明 Vue 绑定HTML 全局属性style,可以动态地改变属性值.这里就不讲内联样式的基础了,具体轻查看官网文档 Class 与 Style 绑定. 主要分为以下两个步骤进行: v-bind ...

随机推荐

  1. go不在dock显示运行

    用这种方法就可以了go build -ldflags -H=windowsgui XXX.go

  2. sql-server数据库常用语句

    查看所有数据库名 select name from master..Sysdatabases order by name; 查看当前数据所有表 select name from sysobjects ...

  3. Asp.net Mvc action返回多个模型实体给view

    1.controller中action代码: public class HomeController : Controller { public ActionResult Detail(int id) ...

  4. oracle的undo表空间

    undo表空间是Oracle特有的概念.undo表空间中会自动分配undo段,这些undo段用来保存事务中的DML语句的undo信息,也就是来保存数据在被修改之前的值.在rollback,实例恢复(回 ...

  5. 图解HTTP笔记

    http 0.9  1990年  http 1.0  1996年 Tcp/Ip分层模型 应用层: 如Ftp Http DNS. 传输层: 如 TCP UDP .将报文分成报文段.“传输”指的是端对端( ...

  6. Python3学习之路~5.3 random模块

    random模块常用方法: import random # 随机数 print(random.random()) # 生成一个0到1的随机浮点数,0 <= n < 1.0 print(ra ...

  7. vue 获取屏幕宽高 width height

    /**  * 获取屏幕宽高  */ Vue.prototype.getViewportSize = function(){   return {     width: window.innerWidt ...

  8. SSM基础整合

    1.表现层: 依赖jar包:spring+JSP+文件上传组件+dubbo+fastdfs web.xml配置:乱码过滤器+DispatcherServlet前端控制器 <!-- 配置post乱 ...

  9. 虚拟地址IP

    http://blog.csdn.net/whycold/article/details/11898249

  10. CentOS6.5安装sqlite3

    1.下载安装包:https://www.sqlite.org/download.html 2.解压 [root@mycentos ~]# tar xzvf sqlite-snapshot-201809 ...