本文深入讲解CSS的声明、选择器、常用样式、盒子模型、定位等核心概念，通过实例演示如何构建网页布局，适合初学者及进阶者学习。
源码资料地址： 链接：https://pan.baidu.com/s/1WsP-1rRpwlSX8jVCut88Tw 提取码：8asf
-
CSS学习:
- 1.css的声明
- 2.css的选择器
- 3.css的常用样式
- 4.css的盒子模型
- 5.css的定位
- 6.实战百度首页
1.css的声明
三种声明方式：1.head中
2.外部css中
3.需要特定样式的标签中
hr{
</*CSS外部声明，全部一次声明，随便使用*/>
width: 50%;
height: 20px;
color: red;
background-color: gray;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的声明学习</title>
<!--问题：
不同的声明给同一个标签操作了同一个样式，会使用谁的？
如果Css的声明全部在head标签中，则遵循就近原则，谁离标签近，谁就会被显示。-->
<!--3、在head标签中使用link标签引入外部声明好的css文件
作用：此声明相当于调用,解决了不同网页间样式重复使用的问题-->
<!--引入外部声明好的css文件-->
<link rel="stylesheet" type="text/css" href="css/my.css"/>
<!-- 1、在head标签中使用style标签声明：
作用：此声明一般声明当前网页的公共样式或者给某个标签的单独样式-->
<style type="text/css">
hr{
width: 50%;
height: 20px;
color: red;
background-color: red;
}
</style>
</head>
<body>
<h3>css的声明学习</h3>
<!--2、在标签上使用style属性进行声明：
作用：此声明会将css样式直接作用于当前标签。-->
<hr style="background-color: blue;height:50px;"/>
<hr/>
</body>
</html>
2.css的选择器
-
css的选择器:
- 1.标签选择器
- 2.id选择器
- 3.类选择器
- 4.全部选择器
-
以上都要会
- 5.组合选择器
- 6.子标签选择器
- 7.属性选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css的选择器学习</title>
<!--
css的选择器学习：
标签选择器：
标签名{样式名1：样式值1;……}
作用：会将当前网页内的所有该标签增加相同的样式
id选择器:
#标签的id属性值{样式名1：样式值1;……}
作用：给某个指定的标签添加指定的样式
类选择器：
.类选择器名{样式名1：样式值1;……}
作用：给不同的标签添加相同的样式
全部选择选择器
*{样式名1：样式值1;……}
作用：选择所有的HTML标签，并添加相同的样式
-----------------------------------------------------------------------------
组合选择器：
选择器1,选择器2,……{样式名1：样式值1;……}
作用：解决不同的选择器之间重复样式的问题
子标签选择器
选择器1 子标签选择器{样式名1：样式值1;……}
属性选择器：
标签名[属性名=属性值]{样式名1：样式值1;……}
作用：选择某标签指定具备某属性并且属性值为某属性值的标签
css的使用过程：
1、声明css代码域
2、使用选择器选择要添加样式的标签
根据需求来。
使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择器给某类标签添加基础样式
使用id、属性选择器、style属性声明方式给某个标签添加个性化样式。
3、书写样式单
边框设置
border:solid 1px;
字体设置:
font-size:10px;设置字体大小
font-family:"黑体";(设置字体的格式)
font-weight：bold;设置字体加粗
字体颜色设置
color:颜色;
背景颜色设置
background-color:颜色;
背景图片设置
background-img:url(图片的相对路径);
background-repeate:no-repeate;设置图片不重复
bacground-size:cover;图片平铺整个页面
高和宽设置
浮动设置
float:left|right
行高设置
line-height:10;
-->
<!--声明css代码域-->
<style type="text/css">
/*标签选择器*/
table{
width: 300px;
height: 200px;
border: solid 1px;
background-color: red;
}
b{
width: 300px;
height: 200px;
border: solid 1px;
background-color: red;
}
/*id选择器*/
#t1{
background-color: gray;
}
/*类选择器*/
.common{
color: red;
}
/*组合选择器*/
.common,table{
background-color: blue;
}
/*子标签选择器*/
ul li a{
color: black;
}
#p1 a{
color: yellow;
}
/*属性选择器*/
input[type=text]{
background-color: red;
}
</style>
</head>
<body>
<h3>css的选择器学习</h3>
<hr />
<hr />
<!--id选择器-->
<table id="t1" class="common">
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
<td>1</td>
</tr>
</table>
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
<!--类标签选择器-->
<b class="common">css学习</b>
<hr />
<!--子标签选择器 表现为上面声明的ul li a里面的css样式-->
<ul >
<li><a href="">CSS学习真简单</a></li>
<li><a href="">CSS学习真简单</a></li>
<li><a href="">CSS学习真简单</a></li>
</ul>
<ul>
<li><a href="">CSS学习真简单</a></li>
<li><a href="">CSS学习真简单</a></li>
<li><a href="">CSS学习真简单</a></li>
</ul>
<!--这里就是id选择器 将此处用p1的css样式-->
<p id="p1">
<a href="">CSS学习真简单</a>
</p>
<p>
<a href="">CSS学习真简单</a>
</p>
<a href="">CSS学习真简单</a>
<hr />
<input type="text" name="" id="" value="" /><br />
<input type="password" name="" id="" value="" />
</body>
</html>
3.css的常用样式
<html>
<head>
<title>css的样式使用</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
/*添加网页背景图*/
body{
background-image: url(img/a1.jpg);/*添加背景图片*/
background-repeat: no-repeat;/*设置图片不重复*/
background-size: cover;/*设置图片平铺*/
}
/*使用标签选择器*/
table{
}
/*设置table的行高*/
tr{
height: 40px;
}
/*设置td*/
td{
width: 100px;/*设置宽*/
border: solid 1px red;/*添加边框及其颜色和大小*/
border-radius: 10px;/*设置表框的角度*/
background-color: orange; /*设置背景颜色*/
text-align: center;/*设置文本位置*/
color: blueviolet;/*设置文本颜色*/
font-weight: bold;/*设置文本加粗*/
letter-spacing: 10px;/*设置字体间距*/
}
/*--------------------------------------------------------------------------------*/
ul{
background-color: gray;
height: 50px;
}
li{
list-style-type:none;/*去除li的标识符*/
/*display: inline;*/
float: left;/*设置菜单左悬浮*/
}
li a{
color: black;
text-decoration: none;/*设置超链接去除下划线*/
font-weight: bold;
font-size: 20px;
margin-left: 20px;
position: relative;
top:10px;
}
</style>
</head>
<body>
<h3>css的样式使用</h3>
<hr />
<table>
<tr>
<td>姓名</td>
<td>性别</td>
<td>爱好</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>唱歌</td>
</tr>
<tr>
<td>李四</td>
<td>男</td>
<td>跳舞</td>
</tr>
</table>
<hr />
<ul>
<li><a href="">首页</a></li>
<li><a href="">公共</a></li>
<li><a href="">关于我们</a></li>
<li><a href="">客服</a></li>
</ul>
</body>
</html>
实战：照片墙：
<html>
<head>
<title>照片墙案例</title>
<meta charset="UTF-8"/>
<!--声明css代码域-->
<style type="text/css">
/*设置body样式*/
body{
text-align: center;
background-color: gray;
}
/*设置图片样式*/
img{
width: 12%;/*设置高度*/
padding: 10px;/*设置内边距*/
background-color: white;/*设置背景颜色*/
transform: rotate(-10deg);/*设置倾斜角度*/
margin: 20px;/*设置外边距*/
}
/*使用伪类给标签添加样式*/
img:hover{
transform: rotate(0deg) scale(1.5);/*设置旋转角度和缩放比例*/
z-index: 1;/*设置显示优先级别*/
transition: 1.5s;/*设置显示加载时间*/
}
</style>
</head>
<body>
<br /><br /><br />
<img src="img/a1.jpg" alt="" />
<img src="img/a2.jpg" alt="" />
<img src="img/a3.jpg" alt="" />
<img src="img/a4.jpg" alt="" /><br />
<img src="img/a5.jpg" alt="" />
<img src="img/a6.jpg" alt="" />
<img src="img/a7.jpg" alt="" />
<img src="img/a8.jpg" alt="" />
</body>
</html>
4.css的盒子模型
<html>
<head>
<title>css的盒子模型学习</title>
<meta charset="UTF-8"/>
<!--
css的盒子模型学习：
div标签：
块级标签，主要是用来进行网页布局的，会将其中的子元素内容作为一个独立的整体存在。
特点：
默认宽度是页面的宽度，但是可以设置。
高度默认是没有的，但是可以设置。(可以顶开)
如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的。
盒子模型：
外边距:margin
作用：用来设置元素和元素之间的间隔。
居中设置:margin:0px auto;上下间隔是0px,水平居中。
可以根据需求单独的设置上下左右的外边距。
边框：border
作用：用来设置元素的边框大小
可以单独设置上下左右
内边距：padding
作用：设置内容和边框之间的距离
注意：内边距不会改变内容区域的大小
可以单独的设置上下左右的内边距
内容区域：
作用：改变内容区域的大小。
设置宽和高即可改变内容区域的大小。
-->
<style type="text/css">
img{
width: 49.53%;
height: 150px;
}
#showdiv{
border: solid 100px;
width: 40%;
height: 200px;
margin-bottom: 10px;
margin: 0px auto;
padding: 20px;
}
#div01{
border: dashed 3px orange;
width: 40%;
height: 200px;
margin-left: 100px;
}
</style>
</head>
<body>
<div id="showdiv">
<img src="img/a1.jpg"/>
<img src="img/a1.jpg"/>
</div>
<div id="div01">
</div>
</body>
</html>
关于CSS盒子模型的简单布局
<html>
<head>
<title>盒子模型简单的布局</title>
<meta charset="UTF-8"/>
<style type="text/css">
/*设置div的基础样式*/
div{
width: 300px;
height: 300px;
}
/*设置header和footer的样式*/
#header,#footer{
width: 650px;
margin: auto;
margin-top: 20px;
}
/*设置子div的样式*/
#div01{
border: solid 1px orange;
float: left;
margin-right: 20px;
}
#div02{
border: solid 1px blueviolet;
float: left;
}
#div03{
border: solid 1px #4791FF;
float: left;
margin-right: 20px;
}
#div04{
border: solid 1px coral;
float: left;
}
</style>
</head>
<body>
<div id="header">
<div id="div01">
我是div01
</div>
<div id="div02">
我是div02
</div>
</div>
<div id="footer">
<div id="div03">
我是div03
</div>
<div id="div04">
我是div04
</div>
</div>
</body>
</html>
5.css的定位
<html>
<head>
<title>css的定位</title>
<meta charset="UTF-8"/>
<!--
css的定位学习：
position
相对定位:relative
作用：相对元素原有位置移动指定的距离(相对的自己的原有位置)
可以使用top,left,right,bottom来进行设置。
注意：
其他元素的位置是不改变的。
绝对定位:absolute
作用：可以使用元素参照界面或者相对父元素来进行移动
注意：
如果父级元素成为参照元素，必须使用相对定位属性
默认情况下是以界面为基准进行移动的。
固定定位:fixed
作用：将元素固定现在页面的指定位置，不会随着滚动条的移动而改变位置。
以上定位都可以使用top,left,right,bottom来进行移动。
z-index:此属性是用来声明元素的显示级别的。
-->
<!--声明css代码域-->
<style type="text/css">
/*给div01添加样式*/
#div01{
border: solid 2px orange;
height: 200px;
width: 800px;
margin-bottom: 10px;
margin-top: 50px;
position: relative;/*给div01添加相对定位成为其子元素绝对定位的参照元素*/
}
/*给showdiv添加样式*/
#showdiv{
border: solid 3px;
height: 50px;
width: 50px;
position: absolute;
top:10px;
}
/*给div02添加样式*/
#div02{
border: dashed 2px coral;
height:200px;
width: 800px;
margin-bottom: 10px;
position: relative;/*使用相对定位*/
left:50px;
top:100px;
background-color: coral;
z-index: 3;
}
/*给div03添加样式*/
#div03{
border: solid 2px #FF7F50;
height: 200px;
width: 800px;
background-color: gray;
position: relative;
z-index: 4;
}
/*给div04添加样式*/
#div04{
border: solid 3px blue;
height: 50px;
width: 50px;
position: fixed;
top:270px;
right: 10px;
}
</style>
</head>
<body>
<div id="div01">
<div id="showdiv">
</div>
</div>
<div id="div02">我是div02</div>
<div id="div03"></div>
<div id="div04">
</div>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
</body>
</html>
6.实战百度首页
<html>
<head>
<title>百度首页模拟</title>
<meta charset="UTF-8"/>
<!--
模拟百度首页：
1、首页使用css+div进行页面的布局
css代码一般使用外联方式进行开发
2、使用HTML进行每一个块中的内容填充
-->
<!--引入外部声明的css文件-->
<link rel="stylesheet" type="text/css" href="css/baidu01.css"/>
<!--引入网页标题图片-->
<link href="img/title.ico" rel="shortcut icon"/>
</head>
<body>
<!--声明头 部分-->
<div id="header">
<!--声明导航栏-->
<ul id="header_nav">
<li><a href="">新闻</a></li>
<li><a href="">hao123</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>
<li><a href="">设置</a></li>
</ul>
</div>
<!--声明主体-->
<div id="main">
<!--引入百度logo-->
<img id="img_logo" src="img/bd_logo.png" width="270px" height="129px"/>
<br />
<!--声明搜索框和按钮-->
<input type="text" name="" id="" value="" />
<input type="submit" name="" id="" value="百度一下" />
</div>
<!--声明底部-->
<div id="footer">
<!--声明网站声明内容-->
<img src="img/footer.png"/>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
