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. java上传文件代码

    import java.io.FileNotFoundException;import java.io.FileOutputStream;import java.io.IOException;impo ...

  2. 简单的document操作

    1.新增商品:新建文档,建立索引PUT /index/type/id{ "json数据"}例如:PUT /ecommerce/product/1{ "name" ...

  3. [MySQL 5.6] information_schema.innodb_metrics

    1. 概括 已关闭/打开的配置 use information_schema select count(*), status from innodb_metrics group by status; ...

  4. jenkins的pipeline的使用

    1.安装Pipeline Maven Integration Plugin 2.新建任务 3.编写pipeline代码 node { stage('get clone') { checkout([$c ...

  5. entry.define编程思路

    0.lua将文字传给场景脚本. 1.场景脚本将pattern.define文件中的PAT当作子弹(水泡弹,带颜色) 2.用户的问题作为客户端的请求,发送给服务器端 3.服务器端接受客户端的问题请求 4 ...

  6. localStorage 不方便存储数组时的替代方法

    项目背景是需要将搜索历史存储到localStorage中, 需要存储id和name,每次存储时都需要在记录中多加一条,用数组push显然是比较好的方法,但localStorage不方便存储数据,于是就 ...

  7. javascript篇-console.log()打印object却显示为字符串[object object]

    console.log打印对象遇到的一个问题,如下截图 打印结果与预期不符,原因是因为字符串‘a’和对象object拼接在一起,拼成了一个字符串

  8. 为python.exe或者ipython.exe添加环境变量

    在pycharm下可以把Module包添加到interpreter paths,从而实现import Module. 而若直接使用ipython,或者python.exe时,它们的环境变量并没有包含M ...

  9. 获取spark-submit --files的文件内容

    参考https://community.hortonworks.com/questions/9265/how-can-i-add-configuration-files-to-a-spark-job- ...

  10. Django 框架 数据库操作

    数据库与ORM 1    django默认支持sqlite,mysql, oracle,postgresql数据库.  <1> sqlite django默认使用sqlite的数据库,默认 ...