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. tensorflow入门笔记（三） tf.GraphKeys

    tf.GraphKeys类存放了图集用到的标准名称. 该标准库使用各种已知的名称收集和检索图中相关的值.例如,tf.Optimizer子类在没有明确指定待优化变量的情况下默认优化被收集到tf.Grap ...

  2. 20165336 学习基础与C语言基础调查

    20165336 技能学习心得与c语言学习 一.心得体会 做教练 从老师的健身教练健身学员的学习关系中我懂得了学生应该有自主的学习意识,要有计划地去训练.去流汗,并且要以100分的要求严于律己,老师是 ...

  3. html多文件上传，可支持预览

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. centos 关闭selinux

    将SELINUX配置文件设置为 disabled 模式,禁用SELinux vim /etc/selinux/config SELINUX=disabled 然后reboot重启生效 setenfor ...

  5. OC仿支付宝输入UITextField输入车牌号

    效果图,如果使用,出现任何问题请告知,或者下方留言,我好以及改正 .h文件: #import <UIKit/UIKit.h> @interface LicenseKeyBoardView ...

  6. vue-3.0创建项目

    .npm install --global @vue/cli .npm install -g @vue/cli-init .vue init webpack my-project

  7. （转）spring计划任务，springMvc计划任务，Spring@Scheduled，spring定时任务

    一.计划任务实现类 1.用@Component注解标识计划任务类,这样spring可以自动扫描 2.在方法中使用注解标识要执行的方法:@Scheduled(cron="*/30 * * * ...

  8. CentOS6.5安装RHive

    1.安装RServe软件包(各个节点都要安装) [root@Hadoop-NN-01 mysofts] # R CMD INSTALL Rserve_1.7-2.tar.gz 2.设置环境变量 [ro ...

  9. Mac下安装m2crypto 解决找不到openssl头文件的错误

    直接复制整段到终端运行 sudo env LDFLAGS="-L$(brew --prefix openssl)/lib" CFLAGS="-I$(brew --pref ...

  10. 42.PHP--电商网站的询价插件

    windows下使用php自带的mail函数实现简单的邮件发送实例(QQ亲试成功) 功能实现:通过中间邮箱把客户的需求和产品信息全部发送到公司的业务员邮箱 环境及工具: win7_64bit phps ...