第六章 css必学基础
6-01 元素宽高特点1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素宽高特点1</title>
<style type="text/css">
*{padding: 0;margin: 0;}
</style>
</head>
<body>
<!--元素宽高特点：-->
<!--块级元素：
1.可以设置宽高
2.不能和其他元素待在一行
3.当没有设置宽高时，宽度和父级宽度一样，高度由元素内容高度决定
4.当设置有宽高时，元素的宽高就是设置的值-->
<!--行级元素：
1.不可以设置宽高
2.可以和其他元素待在一行-->
<!--行内块级元素：
1.可以设置宽高
2.也可以和其他元素待在一行-->
<div style="background: red;width: 200px;height: 20px;">我要自学网 <br /> 我要自学网</div>
</body>
</html>
6-02 元素宽高特点2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素宽高特点2</title>
<style type="text/css">
*{padding: 0;margin: 0;}
</style>
</head>
<body>
<!--元素宽高特点：-->
<!--块级元素： div举例
1.可以设置宽高
2.不能和其他元素待在一行
3.当没有设置宽高时，宽度和父级宽度一样，高度由元素内容高度决定
4.当设置有宽高时，元素的宽高就是设置的值-->
<!--行级元素： span举例
1.不可以设置宽高，就算设置了，设置的宽高也无效
2.可以和其他元素待在一行
3.行级元素的宽高由元素内容决定-->
<!--行内块级元素： img举例
1.可以设置宽高
2.也可以和其他元素待在一行
3.当没有设置宽高时，宽高由元素内容决定
4.当设置宽高时，元素的宽高就是设置的值-->
<!--<div style="background: red;width: 200px;height: 20px;">我要自学网 <br /> 我要自学网</div>-->
<!--<span style="background: red;">我要自学网我要自学网我要自学网 </span>-->
<!--<img src="生活照1.jpg" style="background: red;width: 200px;height: 20px;"/>-->
</body>
</html>
6-03 元素类型转换1
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素类型转换1</title>
<style type="text/css">
a,span{
background: green;
display: block;
width: 100px;
height: 80px;
}
img{
background: green;
display: block;
width: 100px;
height: 80px;
}
</style>
</head>
<body>
<!--a元素是行级元素，不能嵌套块级元素-->
<!--要想行级元素嵌套块级元素，就要先把行级元素通过display: block;转换成块级元素，再嵌套。-->
<!--元素类型转换：-->
<!--任何元素都可以进行类型转换-->
<!--1.转块级元素 display: block;-->
<!--<a href="#">我要自学网 </a>-->
<!--<span>我要自学网</span>-->
<img src="favicon.png"/>
<img src="favicon.png"/>
</body>
</html>
6-04 元素类型转换2
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素类型转换2</title>
<style type="text/css">
div{
background: gold;
/*display: inline;*/
/*display: inline-block;*/
width: 200px;
height: 80px;
}
a{
background: green;
display: block;
}
img{ /*行内块级元素转成行级元素*/
background: red;
display: inline;
/*width: 200px;
height: 80px;*/
}
</style>
</head>
<body>
<!--a元素是行级元素，不能嵌套块级元素-->
<!--要想行级元素嵌套块级元素，就要先把行级元素通过display: block;转换成块级元素，再嵌套。-->
<!--元素类型转换：-->
<!--任何元素都可以进行类型转换，元素类型之间可以相互转换-->
<!--元素类型转换，不会影响元素自身的性质-->
<!--1.转块级元素 display: block;-->
<!--2.转行级元素 display: inline;-->
<!--3.转行内块级元素 display: inline-block;-->
<a href="http://www.51zxw.net">我要自学网 </a>
<div>我要自学网1</div>
<img src="logo.jpg"/>
<!--img元素转换成行级元素后，还是可以设置宽高，是说img标签的渲染不是靠css的，css可以影响它的位置，
但不能影响它的渲染，所以转换不成。-->
<span>我要自学网2</span> <!--span是行级元素-->
</body>
</html>
6-05 元素显隐
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>元素显隐</title>
<style type="text/css">
div{
background: green;
width: 200px;
height: 80px;
display: none;
}
.one{
display: block;
}
span{
background: red;
display: none;
}
.two{
display: inline;
}
</style>
</head>
<body>
<!--元素显隐：-->
<!--1.元素隐藏：display: none;-->
<!--页面结构仍然在-->
<!--元素所占空间会被隐藏-->
<!--2.元素显示：-->
<!--display: block;块级元素显示-->
<!--display: inline;行级元素显示-->
<!--display: inline-block;行内块级元素显示-->
<div class="one">我要自学网1</div>
<span class="two">我要自学网2</span>
</body>
</html>
6-06 em单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>em单位</title>
<style type="text/css">
div{
font-size: 15px;
}
h4{
background: red;
width: 300px;
height: 30px;
}
p{
font-size: 20px;
background: green;
width: 20em;
}
</style>
</head>
<body>
<!--常用尺寸单位：-->
<!--像素：px
1.屏幕上的一个小点作为单位，稳定准确
2.用的最多的尺寸单位-->
<!--em单位-->
<!--1.em是以自身字体大小作为参考，是自身字体大小的倍数-->
<!--2.当自身字体大小改变时，以em作为单位的元素会跟着改变-->
<div>
<h4></h4>
<p>我要自学网</p>
</div>
</body>
</html>
6-07 rem单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rem单位</title>
<style type="text/css">
html{
font-size: 10px;
}
div{
font-size: 30px;
}
h4{
background: red;
width: 320px;
height: 30px;
}
p{
font-size: 2rem;
background: green;
width: 20rem;
}
</style>
</head>
<body>
<!--常用尺寸单位：-->
<!--像素：px
1.屏幕上的一个小点作为单位，稳定准确
2.用的最多的尺寸单位-->
<!--em单位-->
<!--1.em是以自身字体大小作为参考，是自身字体大小的倍数-->
<!--2.当自身字体大小改变时，以em作为单位的元素会跟着改变-->
<!--rem单位-->
<!--1.rem是以根元素（html元素）字体大小作为参考，是根元素字体大小的倍数-->
<!--2.当根元素字体大小改变时，以rem作为单位的元素会跟着改变-->
<!--3.只要html根元素的字体大小确定时，rem单位也是一个确定的值-->
<!--4.可以通过此单位达到响应式效果。根据屏幕大小不同调整字体大小，只需要改变html根元素的字体大小即可。-->
<div>
我要自学网
<h4></h4>
<p>我要自学网</p>
</div>
</body>
</html>
6-08 百分比单位
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>百分比单位</title>
<style type="text/css">
*{
}
div{
background: green;
width: 100%;
height: 300px;
}
h4{
background: red;
width: 50%;
height: 50%;
font-size: 200%;
font-weight: normal;
}
</style>
</head>
<body>
<!--常用尺寸单位：-->
<!--像素：px
1.屏幕上的一个小点作为单位，稳定准确
2.用的最多的尺寸单位-->
<!--em单位-->
<!--1.em是以自身字体大小作为参考，是自身字体大小的倍数-->
<!--2.当自身字体大小改变时，以em作为单位的元素会跟着改变-->
<!--rem单位-->
<!--1.rem是以根元素（html元素）字体大小作为参考，是根元素字体大小的倍数-->
<!--2.当根元素字体大小改变时，以rem作为单位的元素会跟着改变-->
<!--3.只要html根元素的字体大小确定时，rem单位也是一个确定的值-->
<!--4.可以通过此单位达到响应式效果。根据屏幕大小不同调整字体大小，只需要改变html根元素的字体大小即可。-->
<!--百分比单位-->
<!--1.百分比单位是以父级作为参考，是父级的百分比-->
<!--2.当父元素改变时，使用%做单位的子元素会跟着改变-->
<div>
<span style="font-size: 32px;">我要自学网1</span>
<h4>我要自学网2</h4>
</div>
</body>
</html>
6-09 颜色名和16进制颜色值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>颜色名和16进制颜色值</title>
<style type="text/css">
div{
/*color: blue;*/
/*color: #FF0000;*/ /*红色*/
/*color: #00FF00;*/ /*绿色*/
color: #0000FF; /*蓝色*/
}
</style>
</head>
<body>
<!--颜色表示方式：-->
<!--颜色名称：-->
<!--1.html和css规范中定义了147种可用的颜色名-->
<!--2.颜色名用的少-->
<!--16进制颜色值：-->
<!--1. #rrggbb rr(红色)，gg(绿色)，bb(蓝色)-->
<!--2. 16进制整数规定颜色成分，所有值必须介于00与ff之间-->
<!--3.用的多-->
<div>我要自学网</div>
</body>
</html>
6-10 rgb和rgba颜色值
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>rgb和rgba颜色值</title>
<style type="text/css">
div{
/*color: blue;*/
/*color: #FF0000;*/ /*红色*/
/*color: #00FF00;*/ /*绿色*/
/*color: #0000FF;*/ /*蓝色*/
/*color: rgb(255,0,0);
color: rgb(0,255,0);
color: rgb(0,0,255);*/
color: rgba(255,0,0,0.5);
}
</style>
</head>
<body>
<!--颜色表示方式：-->
<!--颜色名称：-->
<!--1.html和css规范中定义了147种可用的颜色名-->
<!--2.颜色名用的少-->
<!--16进制颜色值：-->
<!--1. #rrggbb rr(红色)，gg(绿色)，bb(蓝色)-->
<!--2. 16进制整数规定颜色成分，所有值必须介于00与ff之间-->
<!--3.用的多-->
<!--rgb颜色值-->
<!--1.通过定义三种（红、绿、蓝）的颜色的强度来定义颜色-->
<!--2.所有值必须介于0~255之间-->
<!--3.rgb(红,绿,蓝)-->
<!--rgba颜色值-->
<!--1.在rgb颜色值基础上增加了透明度-->
<!--2.a:alpha表示透明度,取值0~1-->
<!--3.a取值为0时,表示完全透明;取值为1时,表示完全不透明;值越小,透明度越高-->
<!--4.rgba(红,绿,蓝,透明度)-->
<div>我要自学网</div>
</body>
</html>
扫一扫
4326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
