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. sql-server数据库常用语句

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

  2. 腾讯互动课堂（Tencent Interact Class，TIC）SDK 词汇表

    词汇表 https://cloud.tencent.com/document/product/266/11732 封装格式 封装格式(Format)是将已经编码压缩好的视频流和音频流按照一定的格式规范 ...

  3. （1.8）mysql中的trace

    (1.8)mysql中的trace 以json格式存储

  4. 20180318 一个VS2015运行DataTable问题

    1. 环境VS 2015 社区版,使用"DataTable" 为了即使查看DataTable中的数据,点击放大镜 ,加载提示错误. 解决方案: 第一步: 第二步: “选项”  -- ...

  5. VS2008生成数据库连接字串

    在写WEB程序的时候~通常需要在Web.config文件的<connectionStrings>节点上写数据库的链接字符串,因为是一串字符代码我们常常需要写在固定的文本里便于下次使用,其实 ...

  6. MyBatis——模糊查询

    在mybatis中可以使用三种模糊查询的方式: <!-- 模糊查询 --> <select id="selectListByTitle" parameterTyp ...

  7. linux下automake用法

    linux下automake用法 2017年02月06日 09:21:14 阅读数:3684 标签: makemakefilegnulinux   作为Linux下的程序开发人员,大家一定都遇到过Ma ...

  8. python 类组合

    场景:有一辆车违章需要通知到车主 定义两个类车辆类和通知类,车辆类和通知类并没有共同点,但是要通知车主这两个类就有了关联,这时候可以把这两个类组合在一起 #!/usr/bin/python3 # -* ...

  9. 2019.04.09 电商24 订单模快 ORM

    前面三个模块已近结束,现在看是订单模块的.想一下淘宝上的订单,在购物车中选中,提交,跳转到订单界面. 获取传过来的信息,那也要建立一个订单表,当我支付的时候,也要获取一些数据,将这些数据放到这个表中 ...

  10. git push 报错：you are not allowed to upload merges

    git rebase Cannot rebase: You have unstaged changes. git stash # 每次 push 前 git pull --rebase git pus ...