【2017-03-23】CSS基础:内联样式
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基础:内联样式的更多相关文章
- HTML&CSS基础-内联样式和内部样式表
HTML&CSS基础-内联样式和内部样式表 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.CSS(Cascading Style Sheets)简介 层叠样式表(Cas ...
- HTML&CSS基础-内联框架
HTML&CSS基础-内联框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...
- HTML&CSS基础-内联和块元素
HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- HTML基础 内联样式改进 三毛语录
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- html css的内联样式 内部样式表 外部样式表的优先级
http://www.w3school.com.cn/html/html_css.asp 这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式 ...
- 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
- CSS的引用方式(引用外部样式表、内部样式表、内联样式表)
CSS引用外部样式表的优点:一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件,所以外部引用相对于内部引用和内联引用来说是是节省资源的. CSS使用内部样式表.内联样式表的优点:可以直观的 ...
- CSS3——注释 id 和 class 选择器 css创建(外部、内部、内联样式表)
注释 /* 注释内容 */ id 和 class 选择器 id ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...
- Vue学习之路第十二篇:为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- Vue 内联样式
前置说明 Vue 绑定HTML 全局属性style,可以动态地改变属性值.这里就不讲内联样式的基础了,具体轻查看官网文档 Class 与 Style 绑定. 主要分为以下两个步骤进行: v-bind ...
随机推荐
- BeanFactoryPostProcessor vs BeanPostProcessor
BeanFactoryPostProcessors affect BeanDefinition objects because they are run right after your config ...
- dedecms站内搜索页面调用最新文章
在页面中调用最新文章列表可以使新发布的文章更快被收录,如何在dedecms站内搜索页面调用最新文章呢? 1.登陆系统后台,进入“模板——模板管理——自定义宏标记”,点击“智能标记向导”进入智能标记生成 ...
- pandas操作速查表
准备工作 import numpy as np import pandas as pd 倒入文件或创建一个数据表 df = pd.DataFrame(pd.read_csv('name.csv',he ...
- python实时得到鼠标的位置
1.#先下载pyautogui库,打开cmd输入pip install pyautogui,回车 2.代码如下: import os,time import pyautogui as pag try: ...
- sqlserver生成表结构文档的方法
只说原理了,具体 可以自己使用程序去生成htm或word文档. 1.首先获取所有的表 SELECT name, id From sysobjects WHERE xtype = 'u' ORDER B ...
- 在golang中使用 cgo,如何让被嵌入的c语言代码调用golang
https://golang.org/misc/cgo/test/callback.go // Copyright 2011 The Go Authors. All rights reserved. ...
- sap 查看自己代码的结构
1:进入系统X3C:然后输入T-CODE bsp_wd_cmpwb
- MRJob 极速入门教程,使用Python玩转Hadoop
想要Hadoop乖巧地运行Python程序,学习mrjob可能是最直接.最简单的方法了,你甚至都不要按安装部署Hadoop集群.mrjob拥有很多优秀的特性比如: 支持多步骤的MapReduce任务工 ...
- U盘复制文件到最后5秒会卡住怎么办解决
现在的U盘容量已经非常大了,一般都有16G以上,为了能放单文件大于4G的数据大多数时候我们都是把U盘格式化为ntfs格式的,所以会出现不管是大文件还是小文件,当你往U盘里复制文件或者使用发送到U盘功能 ...
- centos 6.x下编译dpdk 16.7 心得
之前对dpdk编译了解得较少,之前直接就把centos yum update了,造成测试经理部署的centos 6.5升级为6.9,造成dpdk编译出错. 先说说centos 6.9下编译的心得: 1 ...