文章目录
一. CSS 基本介绍
- 定义：
CSS 是指层叠样式表（Cascading Style Sheets） 是用来定义如何控制HTML 元素，从而实现美化HTML 网页 - 优势
为了让网页元素的样式更加丰富，也为了让网页内容和样式能够拆分，CSS 由此思想而产生。 有了CSS ， HTML 大部分的表现样式的标签都可以不用了，因此，HTML 只负责文档的结构和内容，表现形式完全交给CSS ， HTML 文档也变得简洁了。
二. 基本语法
- 基本格式：
选择器{属性 ：值； 属性：值；…}
- CSS 页面引入的方法
1）内联式： 通过标签的style 属性，直接在标签上写样式
< div style=“width:100px ; height=100px ; color :” red "> … < /div>
2） 嵌入式： 通过style 标签，在网页上创建嵌入的样式表
< style type=“text/css”>
div{ width : 100px ; height : 100px ; color : red}
…
< /style>
3）外联式： 通过link 标签，链接到外部的样式表到页面中
< link rel= " stylesheet " type=" text/css " href = "css/main.css ">
三. 常用CSS 样式
1.文本设置
color 设置文字的颜色,如: color:red;
font-size 设置文字的大小,如:font-size:12px;
font-family 设置文字的字体,如:font-family:‘微软雅黑’;
font-style 设置字体是否倾斜,如:font- style:‘normal’; 设置不倾斜,
font-style:‘italic’;
设置文字倾斜
font-weight 设置文字是否加粗,如:font-weight:bold; 设置加粗 font-weight:normal 设置不加粗
font 同时设置文字的几个属性,写的顺序有兼容问题,建议按照如下顺序写:
font:是否加粗 字号/行高 字体;如: font:normal 12px/36px ‘微软雅黑’;
line-height 设置文字的行高,如:line-height:24px;
text-decoration 设置文字的下划线,如:text-decoration:none; 将文字下划线去掉
text-indent 设置文字首行缩进,如:text-indent:24px; 设置文字首行缩进24px
text-align 设置文字水平对齐方式,如text-align:center 设置文字水平居中
四. 基本选择器
1. 标签选择器
标签选择器的影响范围大， 所以尽量应用在层级选择器上
*（margin：0；padding：0）
div{ color: red}
< div > .........< /div >
< div class = " box ">.......< /div >
2. id 选择器
通过id 名来选择元素， 元素的id 名称不能重复，所以一个样式设置项只能对应于页面上的一个元素，不能重复用， id名一般给程序使用，所以不推荐使用id作为选择器
#box{color : red}
< div id="box"> ...< /div >
3. 类选择器
通过类名来选择元素，一个类可应用于多个元素，一个元素上也可以使用多个类。应用灵活，可重复使用， 是CSS 中应用最多的一种选择器
. red( color: red)
.big ( font- size: 20px)
.mt10 ( margin-top: 10px)
< div class="red">......< /div >
< h1 class = " red big mt10"> ....< /h1>
< p class = "red mt10"> ....< /p>
4. 层级选择器
主要应用在选择父元素下的子元素，或者子元素下的子元素，可与标签元素结合使用，减少命名，同时也可以通过层级，防止命名冲突
. box span{color: red}
.box .red{ color: pink}
.red { color : red }
< div class="box">
< span> .....< /span>
< a href="#" class = "red"> .....< /a>
< /div >
< h3 class = " red">.....</ h3 >
5. 组选择器
多个选择器，如果有同样的样式设置，可以选择组选择器。
. box1 , .box2 , .box3(width:100px ; height: 100px)
.box1(background: red)
.box2(background: pink)
.box3(background: gold)
< div class="box1">.....< /div>
< div class="box2">.....< /div>
< div class="box13">.....< /div>
6. 伪类及伪元素选择器
常用的伪类选择器有 hover， 表示鼠标悬浮在元素上时的状态
伪元素选择器有 before和after ， 他们可以通过样式在元素中插入内容
.box1: hover{ color: red}
.box2:before{content : " 行首元素"}
.box3: after{ content: “ 行尾元素”}
< div class="box1">.....< /div>
< div class="box2">.....< /div>
< div class="box13">.....< /div>
五 . 盒子模型
- 定义
所有的HTML 元素都可以看作是盒子， 在CSS 中，“box model” 是用来设计和布局时使用的
-
盒子模型的参数
margin（外边距）：清除边框的外的区域，外边距是透明的。
border（边框）： 围绕在内边距和内容外的边框
padding（内边距） ： 清除内容周围的区域， 内边距是透明的
content（内容）： 盒子的内容，显示文本和图像 -
盒子的宽带计算
eg：
盒子的总宽度：
300px（宽）
+50px（左+右填充）
+50px（左+ 右边框）
+50px（左+ 右边距）
=450px
代码实现：
<style>
div{
width: 300px;
background-color: lightblue;
border: 25px solid blue;
padding: 25px;
margin: 25px;
}
</style>
总元素的宽度=宽度+左填充+右填充+左边框
+右边框+左边距+右边距
总元素的高度=高度+顶部填充+底部填充+上边框
+下边框+上边距+下边距
六. CSS 浮动
- 定义
CSS的浮动（float），会使元素向左或者向右移，其周围的元素也会重新排列。 Float 常用于图像，在布局方面的用处十分大。 - 浮动实现机制
- 元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。
- 一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
- 浮动元素之后的元素将围绕它。
- 浮动元素之前的元素将不会受到影响。
- 如果图像是右浮动，下面的文本流将环绕在它左边
图片与图片之间：
图片与文字之间：
行框和清理：
##图片浮动 实例
效果图：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.box,img{
width: 261px;
}
.box{
border: 2px gray solid;
float: left;
margin: 5px;
padding-bottom: 10px;
}
.detail{
font-size: 12px;
padding: 8px;
height: 30px;
overflow: auto;
}
.clear{
}
</style>
</head>
<body>
<div class="box">
<div class="taobao-image">
<img src="../25/img/p.jpg">
</div>
<div class="detail">
一直以来，自诩为全世界最让人胆战心惊的超级混蛋的格鲁（史蒂夫·卡瑞尔配音），始终觉得没有人可以阻挡他充满着邪恶趣味的前进脚步，可是当他与3个小女孩的生命有所交集之后，他很快就意识到，自己即将面对的是有史以来最艰难的挑战。 在一个被白色的尖桩篱笆和茂盛的玫瑰花丛所包围的看似快乐祥和的郊外社区里，坐落着一座全黑色的大房子，周围则是死气沉沉且略显呆板的绿色草坪。周遭邻居所不知道的是，在这座房子的下面，有一个非常隐蔽的巨大的藏匿之处，里面竟然驻扎着一支用心极度险恶的小矮人军队，而他们的头头格鲁则正在计划整个人类历史上最疯狂的抢劫案——没错，他打算偷走月亮。
</div>
</div>
<div class="box">
<div class="taobao-image">
<img src="../25/img/p.jpg">
</div>
<div class="detail">
一直以来，自诩为全世界最让人胆战心惊的超级混蛋的格鲁（史蒂夫·卡瑞尔配音），始终觉得没有人可以阻挡他充满着邪恶趣味的前进脚步，
可是当他与3个小女孩的生命有所交集之后，他很快就意识到，自己即将面对的是有史以来最艰难的挑战。
在一个被白色的尖桩篱笆和茂盛的玫瑰花丛所包围的看似快乐祥和的郊外社区里，坐落着一座全黑色的大房子，
周围则是死气沉沉且略显呆板的绿色草坪。周遭邻居所不知道的是，在这座房子的下面，有一个非常隐蔽的巨大的藏匿之处，
里面竟然驻扎着一支用心极度险恶的小矮人军队，而他们的头头格鲁则正在计划整个人类历史上最疯狂的抢劫案——没错，他打算偷走月亮。
</div>
</div>
<div class="box">
<div class="taobao-image">
<img src="../25/img/p.jpg">
</div>
<div class="detail">
一直以来，自诩为全世界最让人胆战心惊的超级混蛋的格鲁（史蒂夫·卡瑞尔配音），始终觉得没有人可以阻挡他充满着邪恶趣味的前进脚步，可是当他与3个小女孩的生命有所交集之后，他很快就意识到，自己即将面对的是有史以来最艰难的挑战。 在一个被白色的尖桩篱笆和茂盛的玫瑰花丛所包围的看似快乐祥和的郊外社区里，坐落着一座全黑色的大房子，周围则是死气沉沉且略显呆板的绿色草坪。周遭邻居所不知道的是，在这座房子的下面，有一个非常隐蔽的巨大的藏匿之处，里面竟然驻扎着一支用心极度险恶的小矮人军队，而他们的头头格鲁则正在计划整个人类历史上最疯狂的抢劫案——没错，他打算偷走月亮。
</div>
</div>
</body>
</html>
七. 经典布局案例
1. 分页
特征布局： 盒子模型，内联元素
效果图：
实现代码：
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 50%;
margin: 0 auto;
}
.pagination > li {
/* 去掉列表前面的点*/
list-style: none;
/* 设置li为行内块级元素 ---> 编成一行*/
display: inline-block;
width: 50px;
font-size: 12px;
/* 列表内的元素*/
text-align: center;
/*设置内边框*/
padding: 5px 10px;
background-color: gold;
}
.pagination > li > a {
/* 去掉下划线*/
text-decoration: none;
/**/
color: black;
}
.pagination > li:hover {
font-size: 110%;
}
</style>
</head>
<body>
<div class="container">
<h1>分页显示</h1>
<ul class="pagination">
<!-- < 是小于符号i-->
<li><a href="#"><<</a></li>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li>...</li>
<li><a href="#">18</a></li>
<li><a href="#">19</a></li>
<li><a href="#">20</a></li>
<!-- > 是大于符号-->
<li><a href="#">>></a></li>
</ul>
</div>
</body>
</html>
2. 导航条
效果图：
实现代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.header{
width: 100% ;
height: 40px;
background-color: #55a8ea;
overflow: hidden;
}
.header li{
display: inline-block;
width: 100px;
height: 40px;
padding-top: 12px;
text-align: center;
}
.header li:hover{
background-color: #00619f;
font-size: 20px;
}
.header li a{
text-decoration: none;
color: #fff;
font-size: 14px;
/*字体加粗*/
font-weight: bold;
}
.active{
background-color: #00619f;
}
</style>
</head>
<body>
<div class="header">
<ul>
<li class="active"><a href="#">首页</a></li>
<li><a href="#">网站设计</a> </li>
<li><a href="#">程序开发</a> </li>
<li><a href="#">网络营销</a> </li>
<li><a href="#">案例展示</a> </li>
<li><a href="#">联系我们</a> </li>
</ul>
</div>
</body>
</html>
扫一扫
164
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
