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(标准通用标记语言的一个子集) ...
随机推荐
- 二叉查找树(Binary Sort Tree)(转)
二叉查找树(Binary Sort Tree) 我们之前所学到的列表,栈等都是一种线性的数据结构,今天我们将学习计算机中经常用到的一种非线性的数据结构--树(Tree),由于其存储的所有元素之间具有明 ...
- Asp.net core 2.0.1 Razor 的使用学习笔记(五)
按说这里应该写关于Role角色类的笔记,但是我还没时间实验这块,所以等以后我搞定了再来分享.现在先写其他部分. Asp.net core 2.0.1 Razor 的使用学习笔记——建立模型 按照微软官 ...
- BZOJ 4108: [Wf2015]Catering [上下界费用流]
4108: [Wf2015]Catering 题意:有一家装备出租公司收到了按照时间顺序排列的n个请求. 这家公司有k个搬运工.每个搬运工可以搬着一套装备按时间顺序去满足一些请求.一个搬运工从第i个请 ...
- HDU2089 不要62 BZOJ1026: [SCOI2009]windy数 [数位DP]
基础题复习 这次用了dfs写法,感觉比较好 #include <iostream> #include <cstdio> #include <cstring> #in ...
- BZOJ 1485: [HNOI2009]有趣的数列 [Catalan数 质因子分解]
1485: [HNOI2009]有趣的数列 Description 我们称一个长度为2n的数列是有趣的,当且仅当该数列满足以下三个条件: (1)它是从1到2n共2n个整数的一个排列{ai}: (2)所 ...
- 51Nod 1225 余数之和 [整除分块]
1225 余数之和 基准时间限制:1 秒 空间限制:131072 KB 分值: 80 难度:5级算法题 收藏 关注 F(n) = (n % 1) + (n % 2) + (n % 3) + ... ...
- c语言中的register int
register int a=1; 明确声明必须要把变量存放在寄存器中,直到变量消失. 一般是默认register,大多数的情况下是不用写register
- vue2.0使用slot插槽分发内容
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- spring security 4 filter 顺序及作用
Spring Security 有两个作用:认证和授权 一.Srping security 4 filter 别名及顺序 spring security 4 标准filter别名和顺序,因为经常要用就 ...
- 2018-01-08 学习随笔 SpirngBoot整合Mybatis进行主从数据库的动态切换,以及一些数据库层面和分布式事物的解决方案
先大概介绍一下主从数据库是什么?其实就是两个或N个数据库,一个或几个主负责写(当然也可以读),另一个或几个从只负责读.从数据库要记录主数据库的具体url以及BigLOG(二进制日志文件)的参数.原理就 ...