CSS基础
CSS学习
1. CSS简介
1.1 概念
CSS概念：层叠样式表
1.2 作用
-
给网页进行布局
-
给网页进行样式开发
1.3 特点
- 语言特别简单
- 开发的样式可以重复使用
- 依赖于html
2. CSS的声明
声明方式：
- 在head标签中声明，作用于当前网页的公共样式或者给某个标签的单独样式
- 在标签上使用style属性进行声明，作用会将CSS样式直接作用于当前标签
- 使用link标签引入外部声明好的CSS文件，相当于调用,一次声明，随处可用
<head>
<meta charset="UTF-8">
<title>CSS声明</title>
<!-- 链接CSS文件 -->
<link rel="stylesheet" href="../css/cs.css">
<!-- CSS声明代码域 -->
<style>
hr{
width: 50%;
height: 10px;
color: blue;
background-color: blue;
}
</style>
<!-- CSS声明学习：
1、在head标签中声明，作用于当前网页的公共样式或者给某个标签的单独样式
2、在标签上使用style属性进行声明，作用会将CSS样式直接作用于当前标签
3、使用link标签引入外部声明好的CSS文件，相当于调用,一次声明，随处可用
注意：
三种声明操作了同一个样式，就近原则，那个越近显示哪个。
-->
</head>
<body>
<h1>CSS的声明学习</h1>
<hr>
<hr style="background-color: red; height: 36px;">
</body>
3. CSS选择器
CSS选择器的学习是非常重要的，采用不同的选择方式是可以让你的思路清晰，代码整齐，并且能减少代码的重复，CSS选择器用的是否合理可以看出你一定的开发水平。
选择器的分类：
- 标签选择器
- id选择器
- 类选择器
- 全部选择器
- 组合选择器
- 子标签选择器
- 属性选择器等
<head>
<meta charset="UTF-8">
<title>CSS的选择器</title>
<style>
/*标签选择器*/
table{
width: 300px;
height: 200px;
border: solid 1px;
background-color: red;
color: red;
}
/*id选择器*/
#t1{
background-color: gray;
}
/*类选择器*/
.common{
color: red;
}
/*全部选择器*/
*{
font: none;
}
/*组合选择器*/
.common,table{
background-color: blue;
}
/*子标签选择器*/
ul li a{
color: black;
}
/*属性选择*/
input[type=text]{
background-color: red;
}
</style>
<!-- CSS选择器的学习
1、标签选择器：标签名{样式} 作用：会将当前网页所有该标签增加相同的样式
2、id选择器：#id属性值{样式} 作用：给某个指定的标签添加相同的样式
3、类选择器：类属性值{样式} 作用：给不同的标签添加相同的样式
4、全部选择器：*{样式} 作用于所有html标签，并添加相同的样式
5、组合签选择器：选择器1，选择器2{样式} 作用:解决不同选择器间重复样式的问题
6、子标签选择器：选择器1 子标签选择器{样式}
7、属性选择器：标签名[属性名=属性值]{样式}
-->
</head>
<body>
<h1>选择器的学习</h1>
<hr>
<table id="t1" class="common">
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td>1</td>
<td>1</td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
<b class="common">css样式的学习</b>
<hr>
<ul>
<li><a href="">haha</a></li>
<li><a href="">hehe</a></li>
<li><a href="">heihei</a></li>
</ul>
<a href="">xixi</a>
<hr>
<input type="text">
<input type="password">
</body>
4. CSS的使用
CSS的使用过程：
-
声明CSS代码域
-
使用选择器选择要添加的样式的标签
一般情况：
使用*选择器来给整个页面添加基础样式
使用类选择器给不同的标签添加基础样式
使用标签选择给某类标签添加基础的样式
使用id、属性选择器、style属性声明方式给某个标签添加个性化样式 -
书写样式单
边框设置
border：solder 1px;
字体设置
font-family:“黑体”;
font-size:10px;
font-weight:bold;设置字体加粗
字体颜色设置
color:red;
背景图片设置
backgroud-img:url(路径);
backgroud-repeate:no-repeate;设置图片不重复
backgroud-size:over;图片平铺整个页面
背景颜色设置
backgroud-color:blue;
高和宽设置
width:10px;
height:10px;
浮动设置
float:left | right;
行高设置
line-height:10px;扫描二维码关注公众号，回复： 9972539 查看本文章
<head>
<meta charset="UTF-8">
<title>CSS样式的使用</title>
<style>
body{
background-image: url("../img/4.jpg");/*设置背景图片*/
background-repeat: no-repeat;/*设置背景图片不重复*/
background-size: cover;/*设置背景图片重复*/
}
/*标签选择器*/
table{
border: solid 0px;/*设置表格边框*/
border-radius:10px;/*设置表格角度*/
background-image: url("../img/1.jpg");/*设置背景图片*/
background-size: cover;/*设置图片平铺*/
}
tr{
height: 40px;/*设置高度*/
}
td{
width: 100px;/*设置宽度*/
border: solid 1px red;/*设置边框线条及颜色*/
border-radius: 15px;/*设置边框角度*/
text-align: center;/*设置字体居中*/
color: aliceblue;/*设置字体颜色*/
font-weight: bolder;/*设置字体粗细*/
letter-spacing: 10px;/*设置字间距*/
}
ul{
background-color: gray;/*设置背景*/
height: 90px;/*设置高度*/
}
li{
list-style-type: none;/*去除li的标识*/
/*float: left;!*设置左悬浮*!*/
display: inline;
}
li a{
color: black;/*字体颜色*/
text-decoration: none;/*设置去除超链接下划线*/
font-weight: bold;/*设置字体的粗细*/
font-size: 25px;/*设置字体的大小*/
margin-left: 10px;/*设置边框*/
position: relative;/*定位*/
top: 27px;
}
</style>
</head>
<body>
<h1>CSS样式的使用</h1>
<hr>
<table>
<tr>
<td width="100px">姓名</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>
</ul>
</body>
5. DIV盒子模型
div标签和盒子模型在布局中十分出色。
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
img{
width: 48.5%;
}
#shoudiv{
border: solid 3px white;
width: 40%;
height: 240px;
margin: 0px auto;/*外边距设置*/
padding: 20px ;/*内边距设置*/
}
#div01{
border: dashed 3px orange;
width: 40%;
height: 150px;
margin: auto;
}
</style>
</head>
<body>
<h1>盒子模型</h1>
<div id="shoudiv">
<img src="../img/2.jpg" alt="">
<img src="../img/3.jpg" alt="">
</div>
<div id="div01">
</div>
<!-- CSS盒子模型：
div标签：
块级标签：网络布局，会将其中的子元素内容作为一个独立的存在。
特点：
默认宽度是页面宽度，可以设置
高度默认没有，可以设置（可以顶开）
如果子元素设置了百分比的高或者宽，占据的是div的百分比，不是页面的
盒子模型：
外边距：margin
用来设置元素和元素之间的间隔。
居中设置：margin: 0px auto;上下0px，左右居中
边框：border
用来设置元素的边框大小
可以单独设置上下左右
内边距：padding
设置内容和边框之间的间距
内边距不会改变内容区域的大小
内容区域：
-->
</body>
6. CSS定位
合理的使用定位可以实现很多功能，例如网页中固定的窗口等。
<head>
<meta charset="UTF-8">
<title>CSS定位</title>
<style>
#div01{
border: solid 2px orange;
height: 200px;
width: 800px;
margin-top: 20px;
margin-bottom: 20px;
}
#div02{
border: dashed 1px gray;
height: 200px;
width: 800px;
margin-bottom: 20px ;
position: relative;/*相对定位*/
left: 50px;/*确定移动的方向和距离*/
z-index: 4;/*设置层级数*/
}
#div03{
border: solid 1px blue;
height: 200px;
width: 800px;
}
#showdiv{
border: solid 3px red;
height: 50px;
width: 50px;
position: absolute;/*绝对定位*/
top: 10px;/*设置移动*/
}
#div04{
border: solid 3px blue;
height: 200px;
width: 200px;
position: fixed;
top: 360px;
right: 10px;
}
</style>
</head>
<body>
<h1>CSS定位</h1>
<hr>
<div id="div01">
<div id="showdiv">
</div>
</div>
<div id="div02">
</div>
<div id="div03">
</div>
<div id="div04">
我是二维码
</div>
<!--CSS定位：
相对定位：relative
相对元素原有位置，移动指定的位置 top left right bottom
注意：其他元素的位置是不动的
绝对定位：absolute
可以使元素参照界面或父类元素进行移动
如果父级元素成为参照元素，必须使用相对定位属性
默认情况下以界面为基准移动
固定定位：fixed
将元素固定在页面的指定位置，不会随着滚动条的移动而改变
z-index：设置元素的显示层级
-->
</body>
7. 相关练习
7.1 照片墙
<head>
<meta charset="UTF-8">
<title>照片墙</title>
<style>
body{
text-align: center;/*设置图片居中*/
background-color: gray;/*设置背景*/
}
img{
width: 12%;/*设置高度*/
border: solid 1px red;/*设置图片边框*/
padding: 10px ;/*设置内边距*/
background-color: white;/*设置图片背景颜色*/
transform: rotate(-10deg);/*设置旋转角度*/
margin: 20px;/*设置外边距*/
}
/*伪类实现*/
img:hover{
transform: rotate(0deg) scale(1.5);/*设置旋转角度和缩放*/
z-index: 1;/*设置优先显示层级*/
transition: 2s;/*设置显示时间*/
}
</style>
</head>
<body>
<h1>照片墙</h1>
<hr>
<br><br><br><br>
<img src="../img/1.jpg" alt="">
<img src="../img/2.jpg" alt="">
<img src="../img/3.jpg" alt="">
<img src="../img/4.jpg" alt=""><br>
<img src="../img/5.gif" alt="">
<img src="../img/6.gif" alt="">
<img src="../img/7.gif" alt="">
<img src="../img/6.gif" alt="">
</body>
7.2 盒子模型练习
<head>
<meta charset="UTF-8">
<title>盒子模型</title>
<style>
div{
width: 300px;
height: 300px;
}
#header,#footer{
width: 650px;
margin: 20px auto;
}
#div01{
border: solid 1px red;
float: left;
margin-right: 20px;
}
#div02{
border: solid 3px blue;
float: left;
}
#div03{
border: dashed 1px orange;
float: left;
margin-right: 20px;
}
#div04{
border: solid 2px gray ;
float: left;
}
</style>
</head>
<body>
<h1>盒子模型简单练习</h1>
<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>
7.3 百度一下
<head>
<meta charset="UTF-8">
<title>百度一下</title>
<!--
模拟百度首页：
1、使用css+div进行页面布局
2、使用html进行每个模块的填充
-->
<!-- 链接css文件-->
<link rel="stylesheet" href="../css/百度一下.css">
<!-- 设置网站的URL前面的图标-->
<link href="../img/百度一下.ico" rel="shortcut icon">
</head>
<body>
<!-- 声明头部分-->
<div id="header">
<div id="header_nav">
<!-- 声明导航栏-->
<ul>
<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>
<!-- 声明主题-->
<div id="main">
<!-- 引入百度logo-->
<img id="img_logo" src="../img/logo.jpg" style="width: 270px;height: " alt="">
<br>
<!-- 声明搜索框-->
<input type="text">
<input type="submit" value="百度一下">
</div>
<!-- 声明底部-->
<div id="footer">
<!-- 声明网站声明-->
<img src="../img/footer.png" alt="">
</div>
</body>
/*百度一下CSS文件*/
/*设置界面*/
*{margin: 0px;padding: 0px;}
/*设置header*/
#header{width: 100%;height: 45px;}
/*设置导航栏样式*/
#header_nav{position: absolute;right: 92px;top: 23px;}
#header_nav li{float: left;list-style-type: none;margin-left: 24px;}
#header_nav li a{color: #333;font-size: 13px;font-weight: 700;line-height: 24px;}
/*设置main*/
#main{width: 100%;height: 270px;text-align: center;padding-top: 70px;}
#img_logo{margin-top: 30px;margin-bottom: 21px;}
/*设置搜索框样式*/
input[type=text]{height: 34px;width: 539px;border: solid #4992FF;background-image: url("../img/sousuo.png");background-repeat: no-repeat;background-position-x: 500px;}
input[type=submit]{width: 100px;height: 36px;font-size: 15px;color: #FFF;background-color: #2d78f4;border: solid #2d78f4;letter-spacing: 1px;position: relative;right: 5px;top: 1px;}
/*设置footer*/
#footer{width: 100%;height: 206px;; text-align: center;}
/*使用伪类设置*/
#header_nav li a:hover{color: blue;}
效果图：
8. 总结
CSS选择器，盒子模型，定位使页面变化丰富。
