css三种引入方式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1、通过link标签引入外部的css文件
2、在head中通过style标签定义样式
3、在标签中通过style属性定义样式
-->
<!-- <link rel="stylesheet" href="./css/mian.css">-->
<style type="text/css">
div {
color: #fff;
background: blue;
font-size: 24px;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<!--<div id="box1">-->
<!-- python天下无敌-->
<!--</div>-->
<div id="box2" style="height: 300px;width: 100px;background: yellow">
python天下无敌
</div>
</body>
</html><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--
1、通过link标签引入外部的css文件
2、在head中通过style标签定义样式
3、在标签中通过style属性定义样式
-->
<!-- <link rel="stylesheet" href="./css/mian.css">-->
<style type="text/css">
div {
color: #fff;
background: blue;
font-size: 24px;
height: 100px;
width: 200px;
}
</style>
</head>
<body>
<!--<div id="box1">-->
<!-- python天下无敌-->
<!--</div>-->
<div id="box2" style="height: 300px;width: 100px;background: yellow">
python天下无敌
</div>
</body>
</html>
css选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
/*
css选择器
1、标签选择器： 通过标签名进行选择
2、id选择器： 通过标签的id属性进行选择 (#id)
3、类选择器： 通过标签的class属性进行选择(.class属性)
*/
li {
color: red;
}
#sp01 {
color: yellow;
}
.box {
height: 300px;
width: 200px;
background: royalblue;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>111</li>
<li>22</li>
<li>33</li>
<li>44</li>
</ul>
<span id="sp01">python001</span>
</div>
<hr>
<div class="box"></div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 组选择器 */
a,div,p{
color: #FF0000;
font-size: 30px;
}
li{
list-style: none;
}
/* 伪类选择器 */
li:hover{
background: #00FFFF;
}
</style>
</head>
<body>
<a href="">python</<!-- a>
<div>java</div>
<p>python0001</p> -->
<ul>
<li>菜单1</li>
<li>菜单2</li>
<li>菜单3</li>
<li>菜单4</li>
</ul>
</body>
</html>
css背景设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/* 设置背景颜色 */
/* body{
background: yellow;
} */
/* 设置图片作为背景
background-repeat:
no-repeat; 不进行平铺
repeat-y; y轴平铺
repeat-x; x轴平铺
/* 设置图片作为背景 */
/* background-image: url('./images/bj.png'); */
/* 设置背景是否平铺 */
/* background-repeat: no-repeat; */
/* 设置背景的定位 */
/* background-position:50px 100px; */
/* 固定背景位置 */
/* background-attachment:fixed; */
/* 设置背景大小 */
/* background-size:200px 100px ; */
*/
body{
height: 10000px;
/* 设置图片作为背景 */
background-image: url('./images/bj.png');
/* 设置背景是否平铺 */
background-repeat: no-repeat;
/* 设置背景的定位 */
background-position:50px 100px;
/* 固定背景位置 */
background-attachment:fixed;
/* 设置背景大小 */
background-size:200px 100px ;
}
.box{
background: red;
}
</style>
</head>
<body>
<div class="box">
musen123
</div>
</body>
</html>
css 文本样式的设置
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
color: #FF0000; 字体颜色
font-size: 36px; 大小
font-weight: bold; 是否加粗
font-style: italic; 是否倾斜
font-family: '微软雅黑'; 字体样式
line-height 行高
font： 字体是否加粗 字体大小/行高 字体样式
text-indent: 36px; 设置文字首行缩进
text-align:设置文件对齐位置
*/
ul li {
/* color: #FF0000;
font-size: 36px;
font-weight: bold;
font-style: italic;
font-family: '微软雅黑';
line-height: 100px; */
/* font： 字体是否加粗 字体大小/行高 字体样式 */
font: bold 24px/50px "microsoft yahei";
color: aqua;
}
p {
text-indent: 36px;
}
.box2{
width: 300px;
height: 200px;
background: yellowgreen;
text-align: center;
line-height: 200px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
<li>444</li>
<li>5555</li>
</ul>
<p>
CSS：层叠样式表(英文全称：Cascading Style
Sheets)是一种用来表现[HTML](https://baike.baidu.com/item/HTML)或[XML](https://baike.baidu.com/item/XML)（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化，CSS
能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力
</p>
<div class="box2">
python
</div>
</div>
</body>
</html>
css盒模型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
盒模型：
边框：border
内边距：padding
外边距：margin
*/
.box1,.box2,.box3{
background: #00FFFF;
height: 200px;
width: 200px;
margin: auto;
}
.box1{
border: 2px solid #FF0000;
padding: 20px;
}
.box2{
border: 2px double #9ACD32;
/* margin-top: 20px; */
}
.box3{
border-right:3px solid antiquewhite ;
}
</style>
</head>
<body>
<div class="box1">
1111
</div>
<div class="box2">
222
</div>
<div class="box3">
3333
</div>
</body>
</html>
css页面布局浮动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
浮动：
为什么要进行浮动：页面横向布局
float: left right
浮动塌陷的问题：
父级元素在没有设置高度的情况下，子元素浮动会造成浮动塌陷（父元素后面的元素会显示到浮动的元素下面）
解决方案1、：给父元素设置：/* overflow: hidden; */
/* 解决方案2: 在父元素中，最后一个浮动元素后面添加一个块元素（div）,给这个元素设置clear:both */
*/
.box1,
.box2,
.box3 {
height: 200px;
width: 200px;
float: left;
margin-left: 20px;
}
.box1 {
background: #00FFFF;
}
.box2 {
background: yellow;
}
.box3 {
background: red;
}
#app{
/* height: 900px; */
/* 缺陷：父元素中子元素内容量不确定的情况，此方案会有bug */
/* overflow: hidden; */
}
.content{
height: 300px;
background: #000;
}
.clear{
clear: both;
}
</style>
</head>
<body>
<div id="app">
<div class="box1">
1111
</div>
<div class="box2">
222
</div>
<div class="box3">
3333
</div>
<div class="box1">
3333
</div>
<div class="box2">
3333
</div>
<div class="clear"></div>
</div>
<div class="content">
python8888
</div>
</body>
</html>
css定位
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
相对定位 relative:相对于原来在文档流的位置进行偏移
绝对定位： 根据已经进行定位的父级元素进行偏移
注意点：通常在使用决定定位时 会将腹肌元素设置为相对定位
固定位置定位
*/
.box11{
height: 200px;
position: relative;
background: yellowgreen;
}
.box1,
.box2,
.box3 {
height: 200px;
width: 200px;
margin-left: 20px;
}
.box1 {
background: #00FFFF;
position: fixed;
left: 20px;
top: 100px;
}
.box2 {
background: yellow;
/* position: relative; */
position: absolute;
left: 200px;
top: 50px;
}
.box3 {
background: red;
}
#app{
position: relative;
height: 2000px;
}
.left,.right{
height: 50px;
width: 20px;
background: blue;
}
.left{
position: absolute;
left: 20px;
top: 40%;
}
.right{
position: absolute;
right: 20px;
top: 40%;
}
</style>
</head>
<body>
<div class="box11">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="app">
<div class="box1">
1111
</div>
<div class="box2">
222
</div>
<div class="box3">
3333
</div>
<div class="clear"></div>
</div>
</body>
</html>
css页面布局案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
/*
相对定位 relative:相对于原来在文档流的位置进行偏移
绝对定位： 根据已经进行定位的父级元素进行偏移
注意点：通常在使用决定定位时 会将腹肌元素设置为相对定位
固定位置定位
*/
.box11{
height: 200px;
position: relative;
background: yellowgreen;
}
.box1,
.box2,
.box3 {
height: 200px;
width: 200px;
margin-left: 20px;
}
.box1 {
background: #00FFFF;
position: fixed;
left: 20px;
top: 100px;
}
.box2 {
background: yellow;
/* position: relative; */
position: absolute;
left: 200px;
top: 50px;
}
.box3 {
background: red;
}
#app{
position: relative;
height: 2000px;
}
.left,.right{
height: 50px;
width: 20px;
background: blue;
}
.left{
position: absolute;
left: 20px;
top: 40%;
}
.right{
position: absolute;
right: 20px;
top: 40%;
}
</style>
</head>
<body>
<div class="box11">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="app">
<div class="box1">
1111
</div>
<div class="box2">
222
</div>
<div class="box3">
3333
</div>
<div class="clear"></div>
</div>
</body>
</html>
