1.CSS引入方式
1、行内式
通过元素开始标签的style属性引入，语法为 style="样式名:样式值; 样式名:样式值;"
<input
type="button"
value="按钮"
style="
display: block; width: 60px;
height: 40px; background-color: rgb(140, 235, 100);
color: white;
border: 3px solid green;
font-size: 22px; font-family: '隶书';
line-height: 30px; border-radius: 5px;
"/>2、内嵌式
在head标签中通过style标签引入，这里要使用选择器确定样式的做作用位置：
<head>
<metacharset="UTF-8">
<style>
/*选择器*/
input {
display: block; width: 80px;
height: 40px; background-color: rgb(140, 235, 100);
color: white;
border: 3pxsolidgreen;
font-size: 22px; font-family: '隶书';
line-height: 30px; border-radius: 5px;
}
</style>
</head>
<body>
<inputtype="button"value="按钮1"/>
<inputtype="button"value="按钮2"/>
<inputtype="button"value="按钮3"/>
<inputtype="button"value="按钮4"/>
</body>3、连接式/外部样式表
将CSS代码单独放入css样式文件，在head标签中通过link标签引入外部样式表：
可以在项目单独创建css样式文件，专门用于存放CSS样式代码。
在head标签中，通过link标签引入外部CSS样式即可。
<head>
<metacharset="UTF-8">
<linkhref="css/buttons.css"rel="stylesheet"type="text/css"/></head>
<body>
<inputtype="button"value="按钮1"/>
<inputtype="button"value="按钮2"/>
</body>2.CSS选择器
1、元素选择器：
<head>
<metacharset="UTF-8"> <style>
input {
display: block; width: 80px;
height: 40px; background-color: rgb(140, 235, 100);
color: white; border: 3pxsolidgreen;
font-size: 22px; font-family: '隶书';
line-height: 30px; border-radius: 5px;
}
</style>
</head>
<body>
<inputtype="button"value="按钮1"/>
<button>按钮5</button>
</body>- 根据标签名确定样式的作用范围；
- 语法为：元素名 {}；
- 样式只能作用到同名标签上，其他标签不可用；
- 相同的标签未必需要相同的样式，会造成样式的作用范围太大；
2、id选择器：
<head>
<metacharset="UTF-8">
<style>
#btn1 {
display: block; width: 80px;
height: 40px; background-color: rgb(140, 235, 100);
color: white;
border: 3pxsolidgreen;
font-size: 22px; font-family: '隶书';
line-height: 30px; border-radius: 5px;
}
</style>
</head>
<body>
<inputid="btn1"type="button"value="按钮1"/>
<inputid="btn2"type="button"value="按钮2"/>
<inputid="btn3"type="button"value="按钮3"/>
<inputid="btn4"type="button"value="按钮4"/>
<buttonid="btn5">按钮5</button>
</body>
根据元素
id
属性的值确定样式的作用范围；
语法为：
#id
值
{}
；
id
属性的值在页面上具有唯一性，所有
id
选择器也只能影响一个元素的样式；
因为
id
属性值不够灵活，所以使用该选择器的情况较少；
3、class选择器：
<head>
<metacharset="UTF-8">
<style>
.shapeClass {
display: block;
width: 80px;
height: 40px;
border-radius: 5px;
}
.colorClass{
background-color: rgb(140, 235, 100); color: white;
border: 3pxsolidgreen;
}
.fontClass {
font-size: 22px;
font-family: '隶书';
line-height: 30px;
}
</style>
</head>
<body>
<input class ="shapeClass colorClass fontClass"type="button"value="按钮1"/>
<input class ="shapeClass colorClass"type="button"value="按钮2"/>
<input class ="colorClass fontClass"type="button"value="按钮3"/>
<input class ="fontClass"type="button"value="按钮4"/>
<buttonclass="shapeClass colorClass fontClass">按钮5</button>
</body>
- 根据元素class属性的值确定样式的作用范围；
- 语法为： .class值 {}；
- class属性值可以有一个，也可以有多个，多个不同的标签也可以是使用相同的class值；
- 多个选择器的样式可以在同一个元素上进行叠加；
- 因为class选择器非常灵活，所以在CSS中，使用该选择器的情况较多；
3.CSS浮动
CSS 的
Float（浮动）
使元素脱离文档流，按照指定的方向（左或右发生移动），直到它的外边缘
碰到包含框或另一个浮动框的边框为止。
<head>
<metacharset="UTF-8">
<style>
.outerDiv {
width: 500px;
height: 300px;
border: 1pxsolidgreen;
background-color: rgb(230, 224, 224); }
.innerDiv{
width: 100px;
height: 100px;
border: 1pxsolidblue;
float: left;
}
.d1{
background-color: greenyellow;
/* float: right; */
}
.d2{
background-color: rgb(79, 230, 124);
/* float: right; */
}
.d3{
background-color: rgb(26, 165, 208);
/* float: right; */
}
</style>
</head>
<body>
<divclass="outerDiv">
<divclass="innerDiv d1">框1</div>
<divclass="innerDiv d2">框2</div>
<divclass="innerDiv d3">框3</div>
</div>
</body>4.CSS定位
position 属性指定了元素的定位类型：
静态定位static，不设置的时候的默认值就是static，静态定位，元素出现在该出现的位置，块级元素垂直排列，行内元素水平排列：
<head>
<metacharset="UTF-8">
<style>
.innerDiv{
width: 100px;
height: 100px;
}
.d1{
background-color: rgb(166, 247, 46);
position: static;
}
.d2{
background-color: rgb(79, 230, 124); }
.d3{
background-color: rgb(26, 165, 208); }
</style>
</head>
<body>
<divclass="innerDiv d1">框1</div>
<divclass="innerDiv d2">框2</div>
<divclass="innerDiv d3">框3</div>
</body>绝对定位 absolute ，通过 top le right bottom 指定元素在页面上的固定位置，定位后元素会让出原来位置，其他元素可以占用
相对定位relative ，相对于自己原来的位置进行地位，定位后保留原来的站位，其他元素不会移动到该位置
固定定位fixed，始终在浏览器窗口固定位置，不会随着页面的上下移动而移动，元素定位后会让出原来的位置,其他元素可以占用
5.CSS盒子模型
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距（margin），边框（border），填充（padding），和实际内容（content）。
- Margin(外边距) - 清除边框外的区域，外边距是透明的；
- Border(边框) - 围绕在内边距和内容外的边框；
- Padding(内边距) - 清除内容周围的区域，内边距是透明的；
- Content(内容) - 盒子的内容，显示文本和图像；
<head>
<metacharset="UTF-8">
<style>
.outerDiv {
width: 800px;
height: 300px;
border: 1pxsolidgreen;
background-color: rgb(230, 224, 224);
margin: 0pxauto;
}
.innerDiv{
width: 100px;
height: 100px;
border: 1pxsolidblue;
float: left;
/* margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px; */
margin: 10px20px30px40px;
}
.d1{
background-color: greenyellow;
/* padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px; */
padding: 10px20px30px40px;
}
.d2{
background-color: rgb(79, 230, 124);
}
.d3{
background-color: rgb(26, 165, 208);
}
</style>
</head> <body>
<div class="outerDiv">
<div class="innerDiv d1">框1</div>
<div class="innerDiv d2">框2</div>
<div class="innerDiv d3">框3</div>
</div>
</body>
4282
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
