目录
- CSS样式
CSS样式
1. 高度宽度
width:200px; # 宽度。50% 按父级标签的宽度百分比来算
height:200px; # 高度
块级标签才能设置宽度,内联标签的宽度由内容来决定。
2. 字体属性
文字字体 font-family
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体,则会尝试下一个。浏览器会使用它可识别的第一个值。
p {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}
文字大小 font-size
默认16px。
p {
font-size: 14px;
}
文字字重(粗细) font-weight
font-weight用来设置字体的字重(粗细)。
值 | 描述 |
---|---|
normal | 默认值,标准粗细 |
bold | 粗体 |
bolder | 更粗 |
lighter | 更细 |
100~900 | 设置具体粗细,400等同于normal,而700等同于bold |
inherit | 继承父元素字体的粗细值 |
字体颜色
https://htmlcolorcodes.com/zh/yanse-ming/
rgb表示法:
rgb:red green blue
color:rgb(255,255,255); 白色
color:rgb(0,0,0); 黑色
16进制:F最高,0最低
color:#000000-#FFFFFF;
单词表示:
color:red green;
rgba()表示:
# a表示透明度 0-1,0是完全透明
3. 文本
文本对齐 text-align
text-align: center;
text-align: right;
text-align: left;
值 | 描述 |
---|---|
left | 左边对齐 默认值 |
right | 右对齐 |
center | 居中对齐 |
justify | 两端对齐 |
line-height:200px # 垂直居中 ,行高的px=200px(是height设置的px,即容器高度)
文字装饰 text-decoration
值 | 描述 |
---|---|
none | 默认。定义标准的文本。 |
underline | 定义文本下的一条线。 |
overline | 定义文本上的一条线。 |
line-through | 定义穿过文本下的一条线。 |
inherit | 继承父元素的text-decoration属性的值。 |
常用的为去掉a标签默认的自划线:
a {
text-decoration: none;
}
首行缩进 text-indent
将段落的第一行缩进 32像素:
p {
text-indent: 32px; #首行缩进两个字符,一个字在页面上的默认大小为16px
}
text-indent: 2em; # em是一个相对单位,相对当前字体大小
练习:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>文字</title>
<style>
p{
background-color: yellow;
height: 200px;
width: 200px;
font-family: '楷体','仿宋';
font-size:24px;
font-weight: 600;
/*color: red;*/
color:RGB(255,0,0);
text-align: center;
/*text-align: right;*/
text-decoration: line-through;
line-height: 200px;
}
a{
text-decoration: none;
}
div{
text-indent: 2em;
}
div:first-letter{
font-size: 32px;
color: red;
}
span{
background-color: pink;
height: 200px;
width: 200px;
font-family: '微軟正黑體';
}
</style>
</head>
<body>
<p>
唧唧复唧唧
</p>
<a href="http://baidu.com">百度</a>
<div>
做人,无需去羡慕别人,也无需去花时间去羡慕别人是如何成功的,想的只要是自己如何能战胜自己,如何变得比昨天的自己强大就行。自己的磨练和坚持,加上自己的智慧和勤劳,会成功的。终将变成石佛那样受到大家的尊敬。做人,无需去羡慕别人,也无需去花时间去羡慕别人是如何成功的,想的只要是自己如何能战胜自己,如何变得比昨天的自己强大就行。自己的磨练和坚持,加上自己的智慧和勤劳,会成功的。终将变成石佛那样受到大家的尊敬。
</div>
<span>
木兰
</span>
</body>
</html>
4. 背景图 background
*背景颜色*/background-color: red;
/*背景图片*/
background-image: url('1.jpg'); #url里面是图片路径,如果和你的html文件在一个目录下,使用这种相对路径就行了
background-repeat: no-repeat;
/* 背景重复 repeat(默认):背景图片沿着x轴和y轴重复平铺,铺满整个包裹它的标签 repeat-x:背景图片只在水平方向上平铺 repeat-y:背景图片只在垂直方向上平铺 no-repeat:背景图片不平铺*/
/*背景位置*/
background-position: right top;
/*background-position: 200px 200px;*/ #200px 200px 是距离父级标签的左边和上边的距离,以前大家都用雪碧图,就是将很多的网页上需要的小图片组合成一个大图,用这个图中哪个位置的小图片。
background-attachment:fixed; # 设置固定
浏览器位置坐标:
left top | center top | right top |
---|---|---|
left center | center center | right center |
left bottom | center bottom | right bottom |
# 简写:
background:yellow url('1.jpg') no-repeat center center;
background:背景 图片 方式 位置;
练习:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 600px;
height: 600px;
background-color: pink;
background-image: url("https://cn.bing.com/th?id=OIP.TJf26WLC_G6tlx7f3jl3UAAAAA&pid=Api&rs=1");
background-repeat: no-repeat; /*不铺满*/
/*background-repeat: repeat-x; !*x铺满*!*/
/*background-repeat: repeat-y; !*y铺满*!*/
background-position:center center;
/*background-position: 100px 100px;*/
}
.c3{
width: 600px;
height: 600px;
background: #b2fffd
url("https://tse1-mm.cn.bing.net/th?id=OIP.7O5T9faA_Ywbd7EIKzQtdQHaHa&w=209&h=209&c=8&rs=1&qlt=90&dpr=1.25&pid=3.1&rm=2")
no-repeat 100px 100px;
background-attachment:fixed ;
}
.c2{
width: 600px;
height:600px;
background: yellow url("https://www.bing.com/th?id=OGC.3543af710332ffad155374652914b951&pid=1.7&rurl=https%3a%2f%2fws1.sinaimg.cn%2flarge%2f9150e4e5gw1faey3cbk9gg204x04xmx8.gif&ehk=36QSjWAOIuPGuWFVzq9JgA")
no-repeat center center;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c3"></div>
<div class="c2"></div>
</body>
</html>
5. 边框 border
属性:
border-style: # 样式
border-color: # 颜色
border-width: # 宽度
边框样式style:
值 | 描述 |
---|---|
none | 无边框。 |
dotted | 点状虚线边框。 |
dashed | 矩形虚线边框。 |
solid | 实线边框。 |
# 简写
border: 10px dotted red;
宽度 样式 颜色
# 左边框:
border-left:10px dotted red;
# 右边框:
border-right:10px solid red;
设置圆角:
border-radius: 5%; # 设置圆角,50%是圆
width:200px;
hegith:200px; #可修改高、宽度,变椭圆。
调试玩法:document.body.contentEditable=true
练习:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
/*border-width: 1px;*/
/*border-style: solid;*/
/*border-color: red;*/
/*border-radius: 5%;*/
text-align: center;
/*border:10px dotted red ; !*简写*!*/
border-left:10px dotted red;
}
</style>
</head>
<body>
<div class="c1">
唧唧复唧唧
</div>
</body>
</html>
6. display属性
设置控制HTML元素的显示效果。
将块级变成内联inline, 将内联变成块级block.
值 | 意义 |
---|---|
display:none | HTML文档中元素存在,但是在浏览器中不显示(隐藏)。一般配合JavaScript代码使用。 |
display:block | 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。 |
display:inline | 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
display:inline-block | 使元素同时具有行内元素和块级元素的特点。行内块。 |
display:none与visibility:hidden的区别:
visibility:hidden: 可以隐藏某个元素,但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说,该元素虽然被隐藏了,但仍然会影响布局。
display:none: 可以隐藏某个元素,且隐藏的元素不会占用任何空间。也就是说,该元素不但被隐藏了,而且该元素原本占用的空间也会从页面布局中消失。
练习:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height:200px;
width:200px;
border:1px solid red;
/*display: inline;*/
/*display: inline-block;*/
display: none; /*隐藏*/
/*visibility:hidden;*/
}
span{
height:200px;
width:200px;
border: 1px solid green;
display: block;
}
p{
height:200px;
width:200px;
border: 1px solid blue;
display: inline;
}
</style>
</head>
<body>
<div>div1</div>
<span>span1</span>
<p>p1</p>
</body>
</html>
7. 盒子模型
在CSS中,每个标签都可以称为一个盒子模型。
1.margin: 外边距:用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
2.padding: 内边距:用于控制内容与边框之间的距离;
3.Border(边框): 围绕在内边距和内容外的边框。
4.Content(内容): 盒子的内容,显示文本和图像。
占用空间:content+padding+border
margin外边距
在chorme浏览器调试窗口中,会发现chorme浏览器body标签自动加了8px。
.test{
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}
简写:顺序 上右下左
.test{margin:5px 10px 15px 20px}
body{margin:0;} # body的上下左右的margin都设置为0.
.test{margin:0 auto;} #上下0像素,左右自适应,居中的效果
如果你写的是三个:margin: 10px 20px 10px;意思是上为10,左右为20,下为10
如果将上下标签都设置了margin,会按照最大的来间隔两者,并不是相加。
padding内边距
.test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}
简写:顺序 上右下左
.test {
padding: 5px 10px 15px 20px;
}
补充padding的常用简写方式:
提供一个,用于四边;
提供两个,第一个用于上-下,第二个用于左-右;
如果提供三个,第一个用于上,第二个用于左-右,第三个用于下;
提供四个参数值,将按上-右-下-左的顺序作用于四边。
练习:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.test{
width: 200px;
height: 200px;
border:2px solid red;
padding: 20px 15px 10px 5px;
margin: 5px 10px 15px 20px;
}
</style>
</head>
<body>
<div class="test"></div>
</body>
</html>
8. float 浮动
一般用来进行页面布局。浮动会脱离正常文档流。
设置浮动后,标签不独占一行,可以设置高宽度。
float:rigth;
float:left;
浮动会造成父级标签塌陷
解决方式1:父级标签设置高度。
解决方式2:在下面的其他标签加: clear:both/left/rigth ; # 清除浮动
解决方式3:伪元素方式,自己清除浮动
.clearfix:after{
content:'';
display:block;
clear:both;
}
<div class='c1 clearfix'></div>
clear属性规定元素的哪一侧不允许其他浮动元素。
值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
练习:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
text-align: center;
background-color: red;
float:right
}
.c2{
width: 200px;
height: 200px;
text-align: center;
background-color: pink;
float:left
}
.c3{
height: 200px;
text-align: center;
background-color: green;
}
.clearfix:after {
content: '';
display: block;
clear: both
}
</style>
</head>
<body>
<div class="clearfix">
<div class="c1">111</div>
<div class="c2">222</div>
</div>
<div class="c3">333</div>
</body>
</html>
9. overflow 溢出属性
overflow :scroll;
值 | 描述 |
---|---|
visible | 默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden | 内容会被修剪,并且其余内容是不可见的。 |
scroll | 内容·修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
·· | ·· |
11qDFUJKP | 规定应该从父元素继承 overflow 属性的值。 |
练习:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
width: 200px;
height:200px;
text-indent: 2em;
border:1px solid red;
/*overflow: visible;*/
/*overflow: hidden;*/
/*overflow: scroll;*/
overflow: auto;
}
</style>
</head>
<body>
<div>
做人,无需去羡慕别人,也无需去花时间去羡慕别人是如何成功的,想的只要是自己如何能战胜自己,如何变得比昨天的自己强大就行。自己的磨练和坚持,加上自己的智慧和勤劳,会成功的。终将变成石佛那样受到大家的尊敬。做人,无需去羡慕别人,也无需去花时间去羡慕别人是如何成功的,想的只要是自己如何能战胜自己,如何变得比昨天的自己强大就行。自己的磨练和坚持,加上自己的智慧和勤劳,会成功的。终将变成石佛那样受到大家的尊敬。
</div>
</body>
</html>
10. 定位 position
position: relative/absolute/fixed;
top/right/bottom/left:100px; # 0的时候不用加px
static默认没有定位。
relative相对定位:相对自己原来的位置移动,移动后原来的空间还占着
absolute绝对定位:不占空间
如果没有父级盒子或者有父级,但父级没有设置position定位,那么绝对定位是相对于整个html页面的边界定位;优先级提高;
如果有父级盒子且设置了position,那么绝对定位是相对于父级盒子的的边界定位。(父相子绝)
不占用自己原来的位置,移动时如果父级标签以及祖先辈都没有设置相对定位,就会按照整个html文档进行移动。优先级会提高。
如果父级标签以及祖先辈设置了相对定位,会按照父级标签移动。
fixed固定定位:相对于整个窗口。
z-index 层级
z-index:正整数;
1.z-index 值表示谁压着谁,数值大的压盖住数值小的,
2.只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素float不能使用z-index
3.z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
4.从父现象:父亲怂了,儿子再牛逼也没用
opacity 标签透明度
用来定义透明效果。取值范围是0~1,0是完全透明,1是完全不透明。
opacity:给整个标签设置透明度.
rgba() :是给属性(如背景)设置透明度.
圆形头像
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 100px;
height: 100px;
border-radius: 50%;
border:1px solid red;
overflow: hidden;
}
div img{
width: 100%;
}
</style>
</head>
<body>
<div class="c1">
<img src="2.jpg" alt="">
</div>
</body>
</html>