CSS层叠样式表
一、CSS入门使用
网页三要素:
HTML 决定了网页中的内容
CSS 决定了网页中视图的显示效果
JavaScript 决定了视图的功能及动态效果
1.1 样式
在几乎所有的HTML标签中都可以添加style属性
,在style属性中可以添加键值对来设置当前标签的外观,这些键值对(样式属性)就称为样式
<label style="color:red ; font-size:15px">千锋武汉Java2208</label>
<div style="">
</div>
1.2 样式表
如果在一个网页中有多个HTML标签需要使用相同的样式,一般我们不在style属性定义样式,我们将多个HTML标签使用的共同样式定义在head标签中的style标签
中;定义在style标签
中的样式列表——样式表,在一个style标签中可以定义多个样式表。
style属性后的样式属性列表也是一个样式表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/* . 表示class选择器 :此处定义的样式对网页中 class="mystyle" 的HTML标签有效果 */
.mystyle{ width: 300px; height: 30px;}
.btnStyle{ width: 300px; height: 35px ; background: deepskyblue; color: white;}
</style>
</head>
<body>
<input class="mystyle"/> <br/>
<input class="mystyle"/><br/>
<input class="mystyle"/><br/>
<input class="mystyle"/><br/>
<input class="mystyle"/><br/>
<input type="button" class="btnStyle" value="测试按钮1"/><br/>
<input type="button" class="btnStyle" value="测试按钮2"/><br/>
<input type="button" class="btnStyle" value="测试按钮3"/><br/>
</body>
</html>
1.3 层叠样式表
在一个HTML标签上可以使用多个样式表,多个样式表的效果会叠加显示在这个HTML标签上
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
.style1{
width: 200px;
height: 200px;
border: 1px solid blue;
}
.style2{
width: 400px;
background: orangered;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="style1 style2"></div>
</body>
</html>
1.4 CSS选择器
- class选择器
.styleName{...}
表示对网页中class="styleName"
的标签有效 - id选择器
#id{...}
表示对网页中id="id"
的标签有效 - 标签选择器
tagName{...}
表示对网页中的所有tagName
标签有效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- CSS选择器 -->
<style type="text/css">
/* class选择器(.) : .style1 表示此样式表对网页中所有 class属性值位 style1的标签有效 */
.style1{
width: 400px;
height: 100px;
border: 1px solid red;
}
/* 标签选择器 : body 表示此样式表对网页中body标签有效 */
body{
padding: 0px;
margin: 0px;
}
/* id选择器(#): #div2 表示此样式对网页中id="div2"的HTML标签有效 */
#div2{
border-radius: 50%;
}
</style>
</head>
<body>
<div class="style1"></div>
<div id="div2"></div>
<div class="style1"></div>
</body>
</html>
1.5 样式文件
我们可以将网页中使用的样式表单独定义在后缀名为.css
的文件中,以达到简化HTML网页、CSS样式表重用的目的。后缀名为.css的文件即为样式文件。
二、常见的CSS样式
2.1 CSS盒子模型
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-F2KdP2YP-1658806435711)(imgs/image-20220721143714145.png)]
2.2 尺寸样式
/*宽度:取值可以是百分比,也可以是具体的像素*/
width: 200px
/*高度*/
height: 200px
2.3 边框样式
.boderStyle{
/* 边框宽度,边框颜色(颜色名|色号|rgb()),边框样式(solid,dotted,dashed,double) */
/* border:4px rgb(8,90,239,1) double; */
border-top: 1px red solid;
border-bottom: 4px green double;
border-left: 1px blue dotted;
border-right: 1px purple dashed;
border-radius: 0px 50px 100px 200px; /* 1个值 表示同时设置四个角 */
/* 2个值 表示分别设置左上右下 和 左下右上 */
/* 4个值 表示从左上角顺时针设置四个圆角 */
}
2.4 背景样式
.bgStyle{
/* background 设置背景颜色 */
/* background: rgb(255,200,177,0.7); */
/* 设置背景图片:如果图片太大,则裁剪图片作为背景; 如果图片太小则进行平铺 */
background: url(imgs/img02.png);
}
2.5 外边距
/* 1个值,表示同时上、下、左、右四边的外边距 */
/* 2个值,表示分别设置上下、左右的外边距 */
/* 4个值,表示分别设置上、右、下、左四边的外边距 */
margin: 10px 30px 50px 100px;
/* margin-left: 30px;
margin-top: 30px;
margin-right:30px
margin-bottom:30px*/
2.6 内边距
/* 内边距:设置容器的内边距,表示凡是放在此容器中的元素都要与容器边框保持距离 */
/* 设置内边距,会增加容器的总体宽尺寸 总体宽度 = width + padding-left + padding-right */
padding: 30px 0px;
/* padding-left: 50px;
padding-right: 50px;
padding-top: 30px;
padding-bottom: 30px; */
2.7 字体样式
color:deepskyblue; /* 设置字体颜色 */
font-size: 40px; /* 设置字体大小 */
font-family: "华文行楷"; /* 设置字体名称 */
font-weight: bold; /* 字体加粗 */
2.8 文本样式
text-align: center; /* 对容器进行设置:设置文本在容器中的水平位置(left|center|right) */
text-decoration: none; /* 设置文本装饰: underline oveeline line-througth none */
text-shadow: 3px 3px 5px red; /* 设置文本阴影 */