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函数汇总大全

    聚合函数对一组值计算后返回单个值.除了count(统计项数)函数以外,其他的聚合函数在计算式都会忽略空值(null).所有的聚合函数均为确定性函数.即任何时候使用一组相同的输入值调用聚合函数执行后的返 ...

  2. POJ1845 sumdiv 数论

    正解:小学数学数论 解题报告: 传送门! 其实不难但我数学这个方面太菜了所以还是多写点儿博客趴QAQ 然后因为是英文的所以先翻译一下,,,? 大概就是说求AB的所有约数之和,对9901取膜 这个只需要 ...

  3. PHP 快速实现大文件上传

    简单的上传代码 最简上传代码 <?php move_uploaded_file($_FILES["file"]["tmp_name"], $_FILES[ ...

  4. 在Windows Server 2008 R2 Server中，上传视频遇到的问题（二）

    上一篇  在Windows Server 2008 R2 Server中,上传视频遇到的问题(一)中遇到上传40M视频报404,然后修改配置文件节点: <httpRuntime targetFr ...

  5. javascript 实例 静态 公共 私有

    传统 javascript 的原型对象 和 ts的类 对比 传统原型队形说明: //对象构造函数 function Atest(name) { //私有属性,只能在对象构造函数内部使用 var cla ...

  6. ubuntu编译opencv3.1遇到的问题

    网上有很多关于编译的具体步骤,我也是按照网上的说明一步步操作的,这里主要想记录的是在安装完之后,import cv2不存在以及其他的libopencv_hdf.so.3.1等找不到的问题,如果将这样的 ...

  7. oracle中并行执行不一定比串行执行快

    并行执行与串行执行相比,能否缩短执行时间,取决于如下几个方面:1.待执行的目标SQL是否适合并行执行,有些SQL是不太适合并行执行的,比如走索引的嵌套循环连接.2.数据库服务器上的硬件资源(如CPU. ...

  8. Java与openssl的RSA算法

    1.java生成的公私钥格式为 pkcs8(PKCS8EncodedKeySpec), 而openssl默认生成的公私钥格式为 pkcs1 2.java采用的rsa默认补齐方式是pkcs1 (RSA/ ...

  9. 1-1-linux环境搭建

    1-1-linux环境搭建 1.安装虚拟机 (1).安装虚拟机增强工具. (2).创建共享文件夹:(https://www.cnblogs.com/huangjianxin/p/6343881.htm ...

  10. 20170811 使用Bootstrap框架写个页面

    采用Bootstrap-table 做的页面. 1. 增加Query 查询功能,涉及Ajax 来加载页面数据吧! <meta charset="UTF-8">  < ...