CSS层叠样式表--使用
一、颜色属性
（1）英文单词
<p style="color:blueviolet">独在异乡为异客</p>
（2）十六进制数
<p style="color: #ffee33;">独在异乡为异客</p>
（3）三原色
<p style="color:rgb(255,0,0)">独在异乡为异客</p>
（4）三原色+透明度。透明度为0到1,0完全透明，1完全不透明
<p style="color:rgba(255,0,0,0.6)">独在异乡为异客</p>
二、字体属性
（1）字体大小
①更大或更小
<p style="font-size: larger">独在异乡为异客</p>
<p style="font-size: smaller">独在异乡为异客</p>
②像素
<p style="font-size: 20px">独在异乡为异客</p>
③百分比
<p style="font-size: 20%">独在异乡为异客</p>
（2）字体种类
<p style="font-family:黑体">独在异乡为异客</p>
（3）字体粗细。从100到900
<p style="font-weight:900">独在异乡为异客</p>
（4）字体样式：是否倾斜等
<p style="font-style: italic">独在异乡为异客</p>
三、背景属性
（1）背景颜色 background-color:
（2）背景图片
<div class="back"> </div>
这是一张200*300的图片，如果代码如下，则背景是好几张拼在一起了。
.back{
width:800px;
height:600px;
background-image: url("鱼群.jpg")
}
如果代码如下，则不重复拼在一起了，但此时背景也不会铺满
.back{
width:800px;
height:600px;
background-image: url("鱼群.jpg");
background-repeat:no-repeat;
}
横向铺满，纵向的话将x改为y
.back{
width:800px;
height:600px;
background-image: url("鱼群.jpg");
background-repeat:repeat-x;
}
背景位置，下面是正中央，此外还有中央靠左 0 center 第一个参数是控制左右，是到左边框的距离；第二个参数是控制上下，是到上边框的距离。 background-position:0px 20px
.back{
width:800px;
height:600px;
background-image: url("鱼群.jpg");
background-repeat:no-repeat;
background-position:center center;
}
例：有这样一张图片、
想使用其中的一个标签，下面是我的html代码
<span></span>
下面是我的css代码
span{
display:inline-block;
width:18px;
height: 20px;
background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
background-position: 0px 100px;
}
我得到了下面这个图标
f12检查，选中100px，由于这张图左右是不用变的，因此只按上下键，可以看到显示的图标在变，调到我想要的那个图标上，确定好数值，然后修改css代码
简写：background: 不用再后面加-color等等了，直接把属性写到background后面即可
四、文本属性
让文本上下左右居中显示
文本横向排列：居中center，
text-align: center;
比如，我们定义了一个div标签，它有自己的高度、和背景颜色。。这个背景里可以放多行内容
我想调整文本行的高度，让它等于div的高度。。
此时文本上下左右居中显示
水平居中，是因为text-align:center;
上下居中，是因为line-heigt:100px;等于div的高度
首行缩进
text-indent:35px;
字符间距
letter-spacing: 10px;
英文中还有单词间距
word-spacing:10px
首字母大写
text-transform:capitalize;
五、边框属性
.div1{
width:200px;
height:200px;
border:1px solid red;
}
上面的边框为1像素 实线 红色
solid实线 dashed虚线
上面类似于background，也是一种简写
border-width:5px;
border-style:solid;
border-color:red;
只控制左边边框。。。顶部边框、右边边框和底部边框同理
border-left-width:5px; border-left-style:solid; border-left-color:red;
六、列表属性 list-style
list-style-type:none; 没有任何样式，只有内容
list-style-type:circle; 样式变为小空心圆
list-style-type:square; 样式变为小黑方块
此外还有英文字母排序、罗马数字排序等
七、display属性
本来只有块级标签可以设长宽，使用了display属性，内联标签也可以设长宽
例：要设置div标签、p标签、span标签和a标签的宽度、高度和背景。我们可以分别设置它们，但显然代码量太多，如下图：
改良一下，把共用的属性设置，拿出来统一设置。减少了代码量。但是看上图，内联标签大小起作用了吗？没有
继续改良，在span标签和a标签的属性设置各加上一行 display:block; 让span拥有块级标签的属性，可以设置长宽。这下内联标签可以设置长宽了
将内联标签改为块级标签 display:block;
将块级标签改为内联标签 display:inline
内联标签和块级标签都有各自的优缺点：内联不能设置长宽，块级不能在一行上显示
display:inline-block 既有内联标签的可以在一行上显示的特性，又有块级标签可以设置长宽的特性
下面演示一下效果看，将span标签和a标签设置为inline-block 请看下图效果
看上图可以发现，span标签和a 标签可以设置长宽了，并且它们在一行上显示。
可以发现上图span标签和a标签之间有点空隙，如果不想有空隙，怎么做呢？可以使用word-spacing
可以再新建一个div标签把span标签和a标签放到里面，注意不要设置这个div标签为块级标签，不需要设置样式。然后设置这个div的word-spacing属性 word-spacing:-5px;
代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div2,p,span,a{width:100px;height:100px;} .div2{background-color: red;}
p{background-color: green;}
span{background-color: blue;display: inline-block;}
a{background-color: orange;display: inline-block;}
.outer{word-spacing: -5px;}
</style>
</head>
<body>
<div class="div2">divvvvv</div>
<p>ppppp</p>
<div class="outer">
<span>spannnn</span>
<a href="#">click</a>
</div>
</body>
</html>
若将标签设置为display:none，则不显示了
八、内外边距
1、内边距padding
标签的长和高 外面 有padding内边距，再外面有border边框
.div1{width:200px; height:200px; background-color:antiquewhite;
border:20px solid rebeccapurple;padding:10px;}
.div2{width:200px; height:200px; background-color:green;
border:20px solid #6DDCBD;}
这个padding设置会改变div的大小。
padding用于控制内容与边框之间的距离。
2、外边距margin
直接margin上下左右都有外边距边距，将上面padding改为margin，结果如下图：
div连同border一起对屏幕的上下左右各距20px
另外，注意body与html之间也默认也有外边距的
下外边距 margin-bottom:20px;
上外边距 margin-top:20px;
左外边距 margin-left:20px;
右外边距 margin-right:20px;
整体设置 margin:10px 20px 30px 40px; 上右下左的顺序，顺时针的方向 如果写三个则是上 右左 下；如果写两个则是上下 右左
3、边界塌陷
上图中如果div1设置下外边距20，div2设置上外边距40，则div1与div2之间的边距是40。取它们之间的较大值。
但是，塌陷只是在上下会发生，左右不会发生
九、float属性
block元素通常被视为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效。inline元素的margin和padding属性。水平方向的padding-left，padding-right，margin-left，margin-right都产生边距效果；但竖直方向的padding-top，padding-bottom，margin-top，margin-bottom不会产生边距效果。
常见的块级元素有：div、form、table、p、pre、h1~h5、dl、ol、ul等
常见的内联元素有：span、a、strong、em、label、input、select、textarea、img、br等
所谓文档流，指的是元素排版布局过程中，元素会自动从左到右，从上到下的流式排列。
脱离文本流，就是将元素从普通的布局排版中拿走，其他盒子在定位的时候，会当做脱离文本流的元素不存在而进行定位。
只有绝对定位的absolute和浮动的float才会脱离文档流。
例1：在第一个div上加float:left
.div1{width:100px;height:100px;background-color: beige;float:left}
可以看到div1已经升起来了，上面空间空出来了，然后div2顶上去了
例2：
.div1{width:100px;height:100px;background-color: beige;float:left}
.div2{width:200px;height:100px;background-color: red;float:left}
可以看到div1和div2都升起来了，div3在顶了上去
例3
.div1{width:100px;height:100px;background-color: beige;float:left}
.div2{width:200px;height:100px;background-color: red;float:left}
.div3{width:100px;height:200px;background-color: green;float:left}
div3也升起来了，依次靠左排列。div4顶上去了
例4 只将div2升起来
.div1{width:100px;height:100px;background-color: beige;}
.div2{width:200px;height:100px;background-color: red;float:left}
.div3{width:100px;height:200px;background-color: green;}
.div4{width:200px;height:200px;background-color: blue;}
可以看到升起来的div2，只是升起来了而已。因为它上一个div1是在文档流里面的。div3顶上去了
例5 clear清除浮动 both、left、right
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:;padding:;}
.container{border:1px solid red;width:300px;}
#box1{background-color: green;float:left;width:100px;height:100px}
#box2{background-color: deeppink;float:right;width:100px;height: 100px}
#box3{background-color: pink;height:40px}
</style>
</head>
<body> <div class="container">
<div id="box1">box1 向左浮动</div>
<div id="box2">box2 向右浮动</div>
<div style="clear:both"></div>
</div>
<div id="box3">box3</div>
</body>
</html>
clear属性只会对自身起作用，不会影响其他元素。如果一个元素的右侧有一浮动对象，而这个元素设置了不允许右边有浮动对象clear:right 则这个元素会自动下移一格，达到本元素右边没有浮动对象的目的。
例6 清除浮动的另一种更优化的写法（推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:;padding:;}
.container{border:1px solid red;width:300px;}
#box1{background-color: green;float:left;width:100px;height:100px}
#box2{background-color: deeppink;float:right;width:100px;height: 100px}
#box3{background-color: pink;height:40px}
.clearfix:after{content:"";display:block;clear:both}
</style>
</head>
<body> <div class="container clearfix">
<div id="box1">box1 向左浮动</div>
<div id="box2">box2 向右浮动</div>
</div>
<div id="box3">box3</div>
</body>
</html>
例7 使用overflow清除浮动（不推荐）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{margin:;padding:;}
.container{border:1px solid red;width:300px;overflow: hidden}
#box1{background-color: green;float:left;width:100px;height:100px}
#box2{background-color: deeppink;float:right;width:100px;height: 100px}
#box3{background-color: pink;height:40px}
</style>
</head>
<body> <div class="container">
<div id="box1">box1 向左浮动</div>
<div id="box2">box2 向右浮动</div>
</div>
<div id="box3">box3</div>
</body>
</html>
十、定位 position
1、static
静态的，默认的，不起什么作用，按照正常文档流去排列
2、position:relative/absolute
relative 相对定位。相对于该元素在文档流中的原始位置，即以自己原始位置为参照物。
*{margin:}
.div1{width:200px;height:100px;background-color: beige;}
.div2{width:200px;height:100px;background-color:
red;position:relative;left:100px;top:100px;}
.div3{width:200px;height:200px;background-color: green;}
.div4{width:200px;height:200px;background-color: blue;}
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
可以看到效果，距离左边100个像素，距离上边100个像素。是与自己原来的位置进行了一个定位。虽然位置变了，但并没有人顶上去，因此并没有脱离文档流。
absolute 绝对定位 设置为绝对定位的元素框从文档流完全删除，并相对于最近的已定位祖先元素定位，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块（即body元素）。
.div2{width:200px;height:100px;background-color: red;position:absolute;left:100px;top:100px;}
可以看到div2脱离文档流了，偏移也做了。它是以最左上角来定位的，按body来定位的
position:fixed 对象脱离正常文档流，使用top，right，bottom，left等属性
.returnTop{width:80px;height:50px;position: fixed;bottom:20px;right:5px;background-color:gray;text-align:center;line-height:50px;}
以上模拟的是一个返回顶部标签
十一、margin定位
margin-top
margin-left
CSS层叠样式表--使用的更多相关文章
- CSS层叠样式表(Cascading Style sheets)
CSS层叠样式表(Cascading Style sheets) --------- ---------------- ----------- --------------- ----------- ...
- 《精通CSS层叠样式表》
书名 <精通CSS层叠样式表> 图片 时间 2017-7月 学习 感觉和ps一样对我都不友好 3天撸完
- CSS：CSS层叠样式表的概述
CSS层叠样式表:Cascading Style Sheets 介绍: 现代网页的设计原则是内容和样式分离,降低它们之间的直接相互依存关系,解耦性,同时,同样的内容,可以通过不同的CSS样式表现出来. ...
- css:层叠样式表-网页布局基础
css:层叠样式表:一.写法分类: 1.内联(行内,写在标签里面,以属性的形式表现,属性名是style) 例:<table style="background-color: aqua& ...
- 【HTML/XML 7】CSS层叠样式表
导读:上篇博客说到用XSL去实现XML文档的表现形式的美化,那么另外一种方式就是CSS的使用.本篇博客系统的介绍CSS,下篇博客,将系统的介绍XSL. 一.CSS的发展历史 1996年,层叠样式表(C ...
- 实验时css层叠样式表不更新的情况
自定义了CSS的样式,希望在页面中起作用.因为MVC中Views/Shared/_Layout.cshtml是所有视图的公共文件,如下: <!DOCTYPE html> <html& ...
- 前端内容之CSS层叠样式表
CSS(Cascading Style Sheet层叠样式表) 把HTML认为是网页的骨架 那么CSS就是用于对HTML骨架进行修饰,比如加背景色.显示方式.位置等等属性 CSS语法形式: 一个完整的 ...
- CSS层叠样式表的层叠是什么意思（转自知乎）
转自知乎上的回答:http://www.zhihu.com/question/20077745 解答一: 层叠指的是样式的优先级,当产生冲突时以优先级高的为准.1. 开发者样式>读者样式> ...
- css 层叠样式表
css选择器 派生选择器 根据其元素在其上下文关系来定义样式 <style type="text/css">body{ font-size:12px; color:re ...
- css层叠样式表
css的三种声明方式 1.行内样式 通过每个标签都有的style属性 <div style="color:red;">黄卫星说没有内容 ...
随机推荐
- array_rand
array_rand — 从数组中随机取出一个或多个单元 mixed array_rand ( array $array [, int $num = 1 ] ) 从数组中取出一个或多个随机的单元,并返 ...
- linux的基本操作（LNMP的基本操作）
LNMP 的环境搭建 和LAMP不同的是LNMP中的N指的是是Nginx(类似于Apache的一种web服务软件)其他都一样.目前这种环境应用的也是非常之多.Nginx设计的初衷是提供一种快速高效多并 ...
- finance1：专业词汇
1,沙盘演练:沙盘演练又叫沙盘模拟培训.沙盘推演,源自西方军事上的战争沙盘模拟推演,是通过引领学员进入一个模拟的竞争性行业,由学员分组建立若干模拟公司,围绕形象直观的沙盘教具,实战演练模拟企业的经营管 ...
- 可持久化Trie
---恢复内容开始--- HAOI 2019 DAY1 T1 我爆零了. 爆零的感觉很难受 原因竟然是我从没犯过的错误 审题不清.情绪低迷. 也许 也许 也许就是想让我知道我有多菜吧. 求前k大的区间 ...
- 6.0-uC/OS-III软件定时器管理
1.软件定时器管理 uC/OS-III提供了软件定时器服务(相关代码在OS_TMR.C中).当设置OS_CFG.H中的OS_CFG_TMR_EN为1时软件定时器服务被使能. 2.uC/OS-III 定 ...
- svn 目录
svn介绍 SVN与Git的区别 SVN服务的模式和多种访问方式 多种访问原理图解与优缺点 SVN安装部署 svn 部署 配置 配置svn用户及密码 配置svn用户及权限 svn 启动命令讲解 svn ...
- 新项目增加gradlew
新项目,增加gradlew git clone http://git.inspur.com/iop/gradle.git git submodule update --init
- Tomcat的日志分割三种方法
一.Tomcat的日志分割三种方法 一.方法一:用cronolog分割tomcat的catalina.out文件 Linux 日志切割工具cronolog详解:https://blog.csdn.ne ...
- 解决xp突然出现开机登录界面的问题
对系统进行网络相关的设置后,有时会让系统开启时突然冒出登录窗口,即使我们没有对自己的系统设置开机密码,也会冒出这个,需要回车一下才会进入系统:关机时,xp特有的“关机”,“待机”,“重新启动”按钮会变 ...
- vsCode工具做react开发，几个常用插件
一.环境准备: 1.下载安装VSCode,Node.js,Yarn 2.打开命令行终端或powershell,输入yarn global add create-react-app安装react的脚手架 ...