css入门二-常用样式
css入门二-常用样式总结
基本标签样式
背景色background-color
高度height;
宽度width;
边框对齐以及详细设定举例
width/*宽度*/: 80%;
height/*高度*/: 48px;
border/*边框*/:1px solid red;
font-size/*字体大小*/: 26px;
text-align/*左右居中*/: center;
line-height/*根据标签高度自适应垂直居中*/: 48px;
font-weight/*加粗*/: bold;
块级标签堆叠
float属性:
float: left
float: right
<div style="clear: both;"></div>
块级标签与内联标签
块级标签:div标签,h标签、p标签,用不完整块也要占领
内联标签:a标签、span标签,用多少占领多少
内边距与外边距
- padding内边距、margin外边距
- body中的默认margin:8px 就是与网页整体相隔8个像素
<body style="margin: 0 auto"> 这样设定后div才会与整个页面的上下没有缝隙
<div style="background-color: red;">asdadasd</div>
</body>
display
- 重要:内联标签无法设定高度、宽度、padding、margin
- 举例:
<div style="background-color: red;display: inline;">asdadad</div>
<!--display实现了块级标签与内联标签之间的转换-->
<span style="background-color: red;display: block;">asdadad</span>
<span style="background-color: red;height: 50px;width: 70px">Leon</span>
<!--对于内联标签,无法设置高度height、宽度width、margin、padding,但是块级标签是可以的-->
<a style="background-color: red;height: 50px;width: 70px">Leon123</a>
<!--但是当display:inline-block的时候,默认自己有多少占多少,但可以设置上面四个属性-->
<span style="background-color: red;height: 50px;width: 70px;display: inline-block">Leon</span>
<!--display:none 让标签消失-->
字体
- 文字大小font-size
font-size:14px;
font-size:1em;
font-size:10%;
备注:1em=16px,推荐使用em设置字体大小
- 文字粗细font-weight
font-weight:normal; normal=400
font-weight:bold; 加粗
font-weight:900;
文本
- 文本缩进text-indent: 5em;
- 单词间隔word-spacing: 30px;但是对中文好像没什么作用
链接
a:link {color:#FF0000;} /* 未被访问的链接 */
a:visited {color:#00FF00;} /* 已被访问的链接 */
a:hover {color:#FF00FF;} /* 鼠标指针移动到链接上 */
a:active {color:#0000FF;} /* 正在被点击的链接 */
备注:
1. 为了使定义生效,a:hover 必须位于 a:link 和 a:visited 之后
2. 为了使定义生效,a:active 必须位于 a:hover 之后
边框border
<div style="border: 1px solid red">1像素,实体边框</div>
<div style="border: 1px dotted red">1像素,虚线边框</div>
<div style="border-top: 1px dotted red">1像素,上虚线边框</div>
<div style="border: 1px dotted red;border-radius: 10%;display: inline-block">1像素,虚线边框,并设定边框的圆角程度</div>
透明度opacity
<div style="z-index: 9;background-color: #C2C8D4;opacity: 0.3">设定改div的背景的透明度为0.3</div>
over-flow处理不符合元素框的内容
<!--hidden会只显示div设定的区域,其他的区域将看不到-->
<div style="height: 200px;width: 200px;overflow: hidden">
<img src="WechatIMG1611.jpeg" >
</div>
<br/>
<!--下面两种是有滚动条的显示-->
<div style="height: 200px;width: 200px;overflow: auto">
<img src="WechatIMG1611.jpeg" />
</div>
<br/>
<div style="height: 200px;width: 200px;overflow: scroll">
<img src="WechatIMG1611.jpeg" />
</div>
:hover选择鼠标指针浮动在其上的元素,并设置其样式
.pg-header .menu {
display: inline-block;
padding: 0 10px;
color: white;
}
.pg-header .menu:hover {
/*当鼠标移动到这个标签的位置的时候,会应用下面的样式*/
background-color: blue;
color: #000;
}
z-index重叠显示顺序
z-index: 9 /*数字越大,在位于最上面*/
css入门二-常用样式的更多相关文章
- CSS入门(二)
一.组合选择器 每个选择器位可以是任意基础选择器或选择器组合 1.群组选择器 可以一次性控制多个选择器 选择器之间用逗号(,)隔开 div,.d1,#div{ color:red; } 2.子代(后代 ...
- echart图表控件配置入门(二)常用图表数据动态绑定
上一节 <echart图表控件配置入门(一)>介绍了echarts图表控件的入门配置,使开发人员可以快速搭建出一个静态的图表.但是在实际开发过程这还是不够的,不可能所有的图表控件都是静态数 ...
- CSS边框及常用样式
一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法 board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...
- <SpringMvc>入门二 常用注解
1.@RequestMapping @Target({ElementType.METHOD, ElementType.TYPE}) @Retention(RetentionPolicy.RUNTIME ...
- d3入门二-常用 方法
CSV 版本6.5.0 这里的data实际上是csv中的一行数据 d3.csv("static/data/dept_cpu.csv",function (data) { conso ...
- 【干货】Html与CSS入门学习笔记4-8
四.web镇之旅,连接起来 找一家托管公司如阿里云,购买域名和空间,然后将网页文件上传到购买的空间的根目录下. 1.绝对路径url url:uniform resource locators 统一资源 ...
- 前端(二)—— CSS的引入方式、长度与颜色单位、常用样式、选择器
CSS的引入方式.长度与颜色单位.常用样式.选择器 一.CSS的三种引入方式 1.行间式 <!doctype html> <html> <head> <met ...
- 常用样式制作思路 自定义按钮~自适应布局~常见bug seajs简记 初学者必知的HTML规范 不容忽略的——CSS规范
常用样式制作思路 学习常用样式总结参考来自这里 带点文字链接列表利用:before实现 1 <!DOCTYPE html> 2 <html lang="en" ...
- CSS常用样式及示例
CSS常用样式及示例 一.简介 层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集) ...
随机推荐
- Linux防止ARP攻击的一些方法
方法一,最常用的绑定网关 一般服务器的网关是不会变动的,且vps也适用. 一.查看当前网关 [root@local@xiaohuai ~]# arp -a ? (218.65.22.122) at 8 ...
- DDMS和程序打包过程
1. Android版本对应api级别 2.3~~~~~10 3.0~~~~~11 4.0~~~~~14 4.1.2~~~16 2.3和4.1.2是最稳定的 2.Android手机常见分辨率 320* ...
- SQL性能优化的几点建议
1. 索引:索引可以提高查询的速度,但不是使用带有索引的字段查询时,索引都会起作用,如下几种特殊情况下,有可能使用带有索引的字段查询时,索引没有起作用:1)使用LIKE关键字的查询语句 如果匹配字符串 ...
- 04_Python Data Structures
Python数据结构 数据结构:数据个体的存储 和 数据个体与个体之间关系的存储. Python中有:1.序列 2.映射类型 3.无序集合 序列:成员有序排列.通过下标偏移量进行访问.元组.字符串.列 ...
- 前端 js技术
1.JavaScript代码存在形式 <!-- 方式一 --> <script type"text/javascript" src="JS文件" ...
- 解决mysql、vsftp远程连接速度慢的问题
以 centOS 6.3(其他操作系统类似,同样适用)说明: 当我们的服务都配置正常的情况下,有时会出现连接速度慢而导致连接失败的问题 问题分析:这些情况一般都是DNS解析惹的祸 mysql连接速度慢 ...
- 小白学Docker之Swarm
承接上篇文章:小白学Docker之Compose,自学网站来源于https://docs.docker.com/get-started 系列文章: 小白学Docker之基础篇 小白学Docker之Co ...
- CentOS7 Nvidia Docker环境
最近在搞tensorflow的一些东西,话说这东西是真的皮,搞不懂.但是环境还是磕磕碰碰的搭起来了 其实本来是没想到用docker的,但是就一台配置较好电的服务器,还要运行公司的其他环境,vmware ...
- 《深入理解Java虚拟机》学习笔记(一)
JDK是支持Java程序开发的最小环境集,JRE是支持Java程序运行的标准环境,JRE是JDK的一部分. Java 1.0版本诞生于1995年,其使用的虚拟机是Sun Classisc VM,这款虚 ...
- zzcms8.2#任意用户密码重置#del.php时间盲注#复现
00x0 引言 早上起来,发现seebug更新了一批新的洞, 发现zzcms8.2这个洞好多人在挖,于是我就默默的踏上了复现之路(要不是点进去要买详情,我何必这么折腾~) 环境:zzcms8.2(产品 ...