02、CSS
2.1、CSS介绍
CSS 是「层叠样式表单」。是用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。
2.2、CSS语法规则
- 选择器：浏览器根据“选择器”决定受
CSS样式影响的HTML元素（标签）。 - 属性 (property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（
declaration），
例如：p {color: blue} - 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的最后可以不加分号(但尽量在每条声明的末尾都加上分号)
注意：
- 一般每行只描述一个属性
- CSS 注释：
/*注释内容*/2.3、CSS 和 HTML 的结合方式
1、第一种：在标签的 style 属性上设置”key:value value;”，修改标签样式。
缺点：
- 如果标签多了，样式多了。代码量非常庞大。
- 可读性非常差。
- Css 代码没什么复用性。
2、第二种：在 head 标签中，使用 style 标签来定义各种自己需要的 css 样式。
格式如下：
xxx {
Key : value value;
}缺点：
- 只能在同一页面内复用代码，不能在多个页面中复用
css代码。 - 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。
3、第三种：把 css 样式写成一个单独的 css 文件，再通过 link标签引入即可复用。 使用 html 的<link rel="stylesheet" type="text/css" href="./styles.css" /> 标签 导入css样式文件。
【demo01.css】
/* '#'表示ID样式 */
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"楷体";
}
/* 组合样式 */
div p{
color:blue;
}
div .f32{
font-size:32px;
font-family:"黑体";
}【demo01.html】
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="css/demo01.css">
</head>
<body>
<!-- 调用ID样式 id属性在整个html文件中，尽量保持唯一（虽然重复也不报错）-->
<p id="p4">这是段落四</p>
<div>
<p><span style="font-size:60px;font-weight:bolder;color:yellow;">HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!!</p>
</div>
</body>
</html>2.4、CSS选择器
2.4.1、标签名选择器
- 标签名选择器的格式是：
标签名{
属性：值;
}- 标签名选择器，可以决定哪些标签被动的使用这个样式。
<head>
<meta charset="UTF-8">
<style type="text/css">
/*被style标签包围的范围是CSS环境，可以写CSS代码*/
/* 标签样式 */
p{
color:red;
}
</style>
</head>
<body>
<p>这是段落一</p>
<p>这是段落二</p>
</body>2.4.2、id选择器
- id选择器的格式是：
#id 属性值{
属性：值;
}- id 选择器，可以让我们通过
id属性选择性的去使用这个样式。
<head>
<meta charset="UTF-8">
<style type="text/css">
/* '#'表示ID样式 */
#p4{
background-color:pink;
font-size:24px;
font-weight:bolder;
font-style:italic;
font-family:"楷体";
}
</style>
</head>
<body>
<!-- 调用ID样式 id属性在整个html文件中，尽量保持唯一（虽然重复也不报错）-->
<p id="p4">这是段落四</p>
</body>2.4.3、class选择器（类选择器）
class类型选择器的格式：
.class 属性值{
属性：值;
}class类型选择器，可以通过class属性有效的选择性地去使用这个样式。
<head>
<meta charset="UTF-8">
<style type="text/css">
/* '.'表示类样式 */
.f20{
font-size:20px
}
</style>
</head>
<body>
<!-- 调用类样式 -->
<p class="f20">这是段落三</p>
</body>2.4.4、组合选择器
- 组合选择器的格式是：
选择器 1，选择器 2，选择器 n{
属性：值;
}- 组合选择器可以让多个选择器共用同一个
css样式代码。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/* 组合样式 */
div p{
color:blue;
}
div .f32{
font-size:32px;
font-family:"黑体";
}
</style>
</head>
<body>
<div>
<p><span>HELLO</span></p>
<span class="f32">World</span>
<p class="f32">!!!!</p>
</div>
</body>2.5、CSS盒子模型
2.5.1、border边框样式
第一种：
border-width：表示边框粗细border-style：表示边框样式
-
solid：实线 -
dotted：点状线 - …
border-color：表示边框颜色
#div1{
width:400px;
height:400px;
background-color:green;
/* 1、border边框样式 */
border-width:4px; /*边框粗细*/
border-style:solid; /*边框样式：solid(实线)、dotted(点状线)...*/
border-color:blue; /*边框颜色*/
}第二种：组合写
- 代码演示：
#div1{
width:400px;
height:400px;
background-color:green;
/* 1、border边框样式 */
/*border:4px double blue;*/
}第三种：边框上下左右可分开写
-
border-top：表示上边框 -
border-bottom：表示下边框 -
border-left：表示左边框 -
border-right：表示右边框
2.5.2、margin属性：间距
1、margin（填充）设置元素所有外边距的宽度，或者设置各边上外边距的宽度。
margin-top：表示与上方的距离margin-left：表示与左边的距离
margin-top:100px;
margin-left:100px;2、只使用一个margin属性来表示四个方向的距离
- 一个参数：四个方向统一
margin:100px;/*指上下左右都是100px*/- 两个参数：
- 第一个参数时上下方向
- 第二个参数是左右方向
margin:100px 0px;/*指上下都是100px,左右0px*/- 三个参数：
- 第一个参数是上方向
- 第二个参数是左右方向
- 第三个参数是下方向
margin:100px 100px 0px;- 四个参数：
- 第一个参数是上方向
- 第二个参数是右方向
- 第三个参数是下方向
- 第四个参数是左方向
margin:100px 100px 50px 150px;/*按照上 右 下 左的顺序*/2.5.3、padding属性：填充
1、padding（填充）属性定义元素边框与元素内容之间的空间，用来设置元素内边距属性。
-
padding-top：表示上内边距 -
padding-left：表示左内边距 -
padding-bottom：表示下内边距 -
padding-right：表示右内边距
2、只使用一个paddi属性来表示四个方向的距离
- 一个参数：四个方向统一内边距
padding:100px;/*指上下左右都是100px*/- 两个参数：
- 第一个参数是上下内边距
- 第二个参数是左右内边距
padding:100px 0px;/*指上下都是100px,左右0px*/- 三个参数：
- 第一个参数是上内边距
- 第二个参数是左右内边距
- 第三个参数是下内边距
padding:100px 100px 0px;- 四个参数：
- 第一个参数是上内边距
- 第二个参数是右内边距
- 第三个参数是下内边距
- 第四个参数是左内边距
padding:100px 100px 50px 150px;/*按照上 右 下 左的顺序*/3、解决边框与网页上边的小距离空白距离
body{
margin:0;
padding:0;
}
2.6、CSS布局
2.6.1、position属性：定位
position属性用于设置一个元素在页面中的定位方式。
absolute：绝对定位
- 需要配合使用
left,top
relative：相对定位
- 一般会和
float、margin、padding… 一起使用
2.6.2、float属性：浮动
float属性用于定义元素在哪个方向浮动。
-
left：表示左浮动 -
none：表示不浮动 -
right：表示右浮动 -
inherit：表示继承父元素浮动
2.6.3、水果库存静态页面实现
【demo05.html】
<html>
<head>
<title>Title</title>
<link rel="stylesheet" href="css/demo05.css">
</head>
<body>
<div id="div_container">
<div id="div_fruit_list">
<table id="tb1_fruit">
<tr>
<th class="w20">名称</th>
<th class="w20">单价</th>
<th class="w20">数量</th>
<th class="w20">小计</th>
<th>操作</th>
</tr>
<tr>
<td>苹果</td>
<td>5</td>
<td>20</td>
<td>100</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr>
<td>西瓜</td>
<td>3</td>
<td>20</td>
<td>60</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr>
<td>菠萝</td>
<td>4</td>
<td>25</td>
<td>100</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr>
<td>榴莲</td>
<td>3</td>
<td>30</td>
<td>90</td>
<td><img src="imgs/deleteIcon.jpg" class="deleteImg"/></td>
</tr>
<tr>
<td>总计</td>
<td colspan="4">999</td>
</tr>
</table>
</div>
</div>
</body>
</html>【demo05.css】
body{
margin:0;
padding:0;
background-color:#808080;
}
div{
position:relative;
float:left;
}
#div_container{
width:80%;
height:100%;
border:0px solid blue;
margin-left:10%;
float:left;
background-color:honeydew;
/*设置边框轮廓为圆角*/
border-radius:25px;
}
#div_fruit_list{
width:100%;
border:0px solid red;
}
#tb1_fruit{
/*设置表格宽度：页面宽度的60%*/
width:60%;
/*设置每行单元格高度*/
line-height:28px;
/*设置表格和页面边框上方的距离*/
margin-top:120px;
/*设置表格和页面边框左边的距离*/
margin-left:20%;
}
#tb1_fruit, #tb1_fruit tr,#tb1_fruit th,#tb1_fruit td{
border:1px solid gray;
/*单元格边界合并*/
border-collapse:collapse;
/*单元格文字居中*/
text-align:center;
/*设置单元格文字样式*/
font-size:16px;
font-family:"楷体";
font-weight:lighter;
color:threeddarkshadow;
}
.w20{
width:20%;
}
.deleteImg{
width:24px;
height:24px;
}结果显示：
本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。
