三 CSS的常用属性
1 颜色属性
<div style="color:blueviolet">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div>
<div style="color:rgba(255,0,0,0.5)">ppppp</div>
字体属性
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">老男孩</h1>
设置字体样式
属性:font-style
取值:
normal 正常显示
italic 使用斜体
oblique 文本倾斜,出现斜体效果
文本属性
文本颜色
属性:color
取值:颜色值
文本水平对齐方式
属性:text-align
取值:left(默认值)/ center / right / justify(两端对齐)
设置行高
属性:line-height
取值:像素值 或无单位的数值,表示是当前文本大小的倍数
line-height:32px;
p{
font-size:18px;
line-height:2;
//行高为字体大小的2倍 36px
}
常用:使用行高设置文本的垂直居中
用法:将元素的行高与高度保持一致
div{
width:100px;
height:50px;
line-height:50px;
}
文本的装饰线
属性:text-decoration
取值:
underline:下划线
overline:上划线
line-through:删除线
none:针对超链接,取消默认下划线
尺寸单位
px - 像素单位,默认单位
% - 参照父元素对应属性的值进行获取
--------
in -inch 英寸 1in = 2.54cm
pt -磅 1pt = 1/72 in
cm
mm
尺寸属性
width height
用来改变元素的宽高大小
取值:px为单位的数值,或者%
注意:
块元素和行内块元素都可以设置宽高大小
行内元素不起作用,大小由内容自适应
3 背景属性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top(20px 20px);(横向:left center right)(纵向:top center bottom)
注意:如果将背景属性加在body上,要记得给body加上一个height,否则结果异常,这是因为body为空,无法撑起背景图片;另外,如果此时要设置一个width=100px,你也看不出效果,除非你设置出html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
background-color: antiquewhite;
}
body{
width: 100px;
height: 600px;
background-color: deeppink;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
通过调整背景图片的位置,来显示不同的图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
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: 0 -100px;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
4 文本属性
font-size: 10px;
text-align: center; 横向排列
line-height: 200px; 文本行高 通俗的讲,文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:-4px 设置元素内容的垂直对齐方式 ,只对行内元素有效,对块级元素无效
text-indent: 150px; 首行缩进
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;
5 边框属性
border-style: solid;
border-color: chartreuse;
border-width: 20px;
简写:border: 30px rebeccapurple solid;
边框实现
边框简写
通过一个属性为四个方向设置边框
可以设置 边框的 宽度 样式 颜色
属性:border
取值:width style color(缺一不可)
width:像素为单位的数值,边框宽度
style:设置边框样式
取值:
solid:实线
dashed:虚线
dotted:点线
double:双线
color:设置边框颜色
特殊用法:
取消边框 border:noine;
单独设置某个方向的边框
属性:
border-top
border-right
border-bottom
border-left
取值:width style color
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
p{
width: 200px;
height: 50px;
border: 3px solid red;
}
h1{
width: 300px;
height: 50px;
border: 5px dashed green;
}
div{
width: 400px;
height: 50px;
border: 10px dotted blue;
}
span{
border: 3px double orange;
}
table{
border-top:10px solid red;
}
</style>
</head>
<body>
<!-- 边框 -->
<p>p元素</p>
<h1>标题元素</h1>
<div>div</div>
<span>span文本</span>
<table>
<tr>
<td>文本</td>
<td>文本</td>
<td>文本</td>
</tr>
</table>
</body>
</html>
溢出处理
溢出属性:overflow
取值:
visible 默认值,可见
hidden 隐藏,溢出部分隐藏不可见
scroll 显示滚动条,溢出时滚动条可用
auto 自动,当发生溢出时,产生滚动条并可用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: pink;
/*对溢出部分的处理 默认显示*/
/*hidden 溢出部分不可见*/
/*overflow: hidden;*/
/*scroll 直接出现滚动条*/
/*overflow: scroll;*/
/*发生溢出时在对应的方向自动添加滚动条并可用*/
overflow: auto;
}
</style>
</head>
<body>
<!-- 溢出处理 -->
<div>
一人我饮酒醉,
醉把佳人成双对,
我们一起学猫叫,
一起喵喵喵喵喵,
奶茶变抹茶
</div>
</body>
</html>
6 列表属性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; <br> list-style: circle;
list-style: upper-alpha;
list-style: disc; }
7 dispaly属性
- none 隐藏
- block
- inline
display:inline-block可做列表布局,其中的类似于图片间的间隙小bug可以通过如下设置解决:
#outer{
border: 3px dashed;
word-spacing: -8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div2,p,a,span{
width: 100px;
height: 100px;
}
.div2{
background-color: yellow;
/*display: inline;*/
display: none;
}
p{
background-color: red;
/*转化为内敛标签*/
/*display: inline;*/
}
span{
background-color: palevioletred;
/*把内联标签改为具有块状和内联标签的属性*/
display: inline-block;
}
a{
background-color: green;
display: inline-block;
}
/*消除两个块之间的空白*/
.outer{
word-spacing: -8px;
}
</style>
</head>
<body>
<div class="div2">divvvvv</div>
<p>pppppp</p>
<!--一行显示两个-->
<div class="outer">
<span>spannnnnn</span>
<a href="#">click</a>
</div>
</body>
</html>
加入
/*消除两个块之间的空白*/
.outer{
word-spacing: -8px;
}
8 外边距和内边
- margin: 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离;
- Border(边框) 围绕在内边距和内容外的边框。
- Content(内容) 盒子的内容,显示文本和图像。
元素的宽度和高度:
重要: 当您指定一个CSS元素的宽度和高度属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距。
margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下 右左
margin:10px; ---------------------上右下左
下面的例子中的元素的总宽度为300px
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: antiquewhite;
border: 40px solid rebeccapurple;
padding: 40px;
/*margin: 20px;*/
/*margin-bottom: 40px;*/
/*margin: 10px 20px 30px 40px;*/
margin-top: 30px;
margin-bottom:40px;
}
.div2{
width: 200px;
height: 200px;
background-color: lightblue;
/*border: 20px solid red;*/
/*padding: 5px;*/
/*margin-top: 40px;*/
}
.outer{
height: 1000px;
background-color: aquamarine;
/*border: 1px red solid;*/
/*padding: 1px;*/
overflow: hidden;
}
.outer2{
width: 1000px;
height: 1500px;
background-color: firebrick;
}
body{
/*设置body的边框,线型,颜色*/
border: 2px solid darkcyan;
/*body和html之间的距离*/
margin: 0px;
}
</style>
</head>
<body>
<div class="outer2">
<div class="outer">
<div class="div1">hello div1</div>
<div class="div2"></div>
<span>uuu</span><span>ooo</span>
</div>
</div>
</body>
</html>
思考1:
边框在默认情况下会定位于浏览器窗口的左上角,但是并没有紧贴着浏览器的窗口的边框,这是因为body本身也是一个盒子(外层还有html),在默认情况下, body距离html会有若干像素的margin,具体数值因各个浏览器不尽相同,所以body中的盒子不会紧贴浏览器窗口的边框了,为了验证这一点,加上:
body{
border: 1px solid;
background-color: cadetblue;
}
解决方法:
body{
margin: 0;
}
思考2:
margin collapse
(边界塌陷或者说边界重叠)
外边距的重叠只产生在普通流文档的上下外边距之间,这个看起来有点奇怪的规则,其实有其现实意义。设想,当我们上下排列一系列规则的块级元素(如段 落P)时,那么块元素之间因为外边距重叠的存在,段落之间就不会产生双倍的距离。又比如停车场
- 兄弟div:上面div的margin-bottom和下面div的margin-top会塌陷,也就是会取上下两者margin里最大值作为显示值
- 父子div
if 父级div中没有 border,padding,inline content,子级div的margin会一直向上找,直到找到某个标签包括border,padding,inline content 中的其中一个,然后按此div 进行margin ;
<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div style="background-color: cadetblue;width: 300px;height: 300px"></div>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html>
解决方法:
<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
/*父级添加下列代码*/
border:1px solid transparent;
padding:1px;
over-flow:hidden;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div style="background-color: cadetblue;width: 300px;height: 300px"></div>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html>
盒模型 / 框模型
-
一切元素皆为框
盒模型:定义元素在文档中实际占据的尺寸
包含内容:外边距 边框,内边距 元素尺寸
默认情况下元素最终占据的尺寸大小:
最终宽度 = 左右的外边距 + 左右的边框 + 左右的内边距 + 元素宽度
最终高度 = 上下的外边距 + 上下的边框 + 上下的内边距 + 元素高度 -
外边距
元素边框与其他元素边框之间的距离
设置元素与元素之间的距离-
属性
margin:取值:可以是像素为单位的数值,也可以是%取值情况
margin:v1;
一个值表示上右下左四个方向都设置外边距
margin:v1 v2;
两个值表示上下的外边距为v1,左右外边距为v2
margin:v1 v2 v3;
上方的外边距为v1,下方的外边距为v3,左右外边距为v2
margin:v1 v2 v3 v4;
分别设置上右下左四个方向的外边距 -
特殊用法
margin:0
清除元素的默认外边距
margin:0 auto;
设置元素在其父元素中水平居中
取值可以是正值也可以是负值
如果给负值,表示元素位置微调
margin:10px 20px;
margin:-10px 10px 20px -10px;
-
四个方向的外边距单独设置
属性:
margin-top
margin-right
margin-bottom
margin-left
-
页面中具有默认外边距的元素
-
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
/*清除元素的默认外边距*/
margin: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
/*margin: 50px 0px 0px 50px;*/
/*margin: 50px;*/
/*margin: 50px 100px;*/
/* 设置元素水平居中*/
margin : 50px auto;
}
</style>
</head>
<body>
<div></div>
<h1>一级标题</h1>
<p>pyuansu</p>
<ul>
<li>ul</li>
</ul>
<ol>
<li>ol</li>
</ol>
<table>
<tr>
<td>table</td>
</tr>
</table>
<form>
<input type="text" name="">
<input type="submit" name="">
</form>
<span>span</span>
</body>
</html>
-
内边距
-
元素的内容与元素边框之间的距离
-
语法
属性:padding
取值:像素值或%- 取值情况:
padding:10px;
上右下左四个方向的内边距
padding:10px 20px;
设置上下左右的内边距
padding:10px 20px 30px;
上 左右 下
padding:10px 20px 30px 40px;
上 右 下 左
- 取值情况:
-
分别对四个方向的内边距做设置
padding-top
padding-right
padding-bottom
padding-left
-
具有默认内边距的元素
ol
ul
文本框
密码框
按钮
td
-
-
box-siziing
作用:指定盒模型的计算方式
属性:box-sizing
取值:-
content-box
默认值
元素的width height 属性只规定元素内容区域的大小,如果元素设置内外边距,边框,则元素最终的尺寸要进行累加(参照盒模型公式)div{ width:200px; height:200px; border:3px solid red; padding:10px; margin:20px; }
最终宽度200+32+102+202
最终高度200+32+102+202 -
border-box
元素的width height属性,设置的是包含边框,内边距和内容部分总共的尺寸div{ width:200px; height:200px; border:3px solid red; padding:10px; margin:20px; box-sizing : border-box; } 最终宽度 200+20*2 width = border + padding + content;
<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #nav{ width: 600px; height: 50px; background-color: pink; margin: 0 auto; } .c1,.c2,.c3{ /*将块元素转换为行内块元素*/ display: inline-block; /*width: 180px; height: 50px; padding: 0 10px;*/ width: 200px; height: 50px; box-sizing: border-box; padding: 0 10px; } .c1{ background-color: orange; /*margin-right: 5px; width: 175px;*/ } .c2{ background-color: green; /*margin-right: 5px; width: 175px;*/ } .c3{ background-color: blue; } </style> </head> <body> <div id="nav"> <div class="c1">首页</div><div class="c2">首页</div><div class="c3">首页</div> </div> </body> </html>
-
-
元素显示设置
属性:display
作用:改变元素类型- 取值:
block
转换为块元素
inline
转换为行内元素
inline-block
转换为行内块元素
none
设置元素隐藏 - 注意:
block
设置元素显示
none
设置元素隐藏
- 取值:
背景相关的属性
-
背景颜色
属性:background-color
取值:颜色值
注意:背景颜色从边框位置开始绘制 如果元素添加内边距,也会按照背景颜色进行填充 所有元素默认背景颜色都为透明,新建窗口为白色并不是body的背景黑色,是窗口渲染的结果
-
背景图片
属性:background-image
取值:url('图片路径')
-
背景图片平铺显示
如果背景图片尺寸小于元素尺寸,会自动对图片对图片进行重复平铺,直到把元素铺满
属性:background-repeat
取值:
repeat
默认值,沿水平和垂直方向平铺
no-repeat
不重复平铺
repeat-x
横向平铺
repeat-y
纵向平铺 -
背景图片尺寸
属性:background-size
取值:
像素值
百分比 采用当前元素的尺寸获取
包含width height 两个值
…
cover
将图片等比拉伸至完全覆盖元素,超出部分裁剪掉
contain
将图片等比拉伸至刚好被元素容纳,未填充到的部分不管