CSS
书写方式
css的书写方式有三种：内敛样式(行内样式)、内部样式、外部样式
- 内敛样式(行内样式)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--
书写样式：内敛样式（行内样式）
在标签中加入一个style属性，CSS的样式为属性值
多个属性值之间用;进行拼接
-->
<h1 style="color: blue; font-family: '宋体';"> 这是一个h1标题</h1>
</body>
</html>
- 内部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--
书写方式：内部样式
head标签中加入一个style标签,在里面定位到需要修饰的元素，然后在{}中加入要修饰的样式
-->
<style type="text/css">
h1{
color: blueviolet;
font-family: "楷体";
}
</style>
</head>
<body>
<h1> 这是一个h1标题</h1>
</body>
</html>
- 外部样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入外部CSS资源
外部样式：首先创建一个CSS文件，css文件后缀为css
再创建HTML页面
-->
<link rel="stylesheet" type="text/css" href="css/mystyle.css"/>
</head>
<body>
<h1>这是一个标题</h1>
</body>
</html>
<!--实际开发中用的最多的是CSS
三种书写方式的优先级：就近原则
-->
选择器
选择器分为：基本选择器、关系选择器、属性选择器、伪类选择器
- 基本选择器：分为元素选择器、类选择器、id选择器
基本选择器的优先级：id选择器>class选择器>元素选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/**
* 基本选择器：元素选择器：
* 通过元素名字进行定位，它会获取页面上的所有这个元素，无论藏的多深都可以找到
* 格式：
* 元素名字{
* css样式;
* }
*/
h1{
color: red;
}
li{
color: green;
}
/*
* 2.基本选择器：类选择器
* 应用场合：不同类型的标签使用相同的类型
* 格式：
* .class的名字{
* css样式;
* }
*/
.mycls{
color: yellow;
}
/**
* id选择器：
* 应用场合：可以定位唯一的一个元素
* 不同的标签确实可以使用相同的id，但是我们一般要进行人为控制，让id可以唯一定位到一个元素
* #id名字{
* css样式;
* }
*/
#myid{
color: darkblue;
}
</style>
</head>
<body>
<h1>我是<li>一个</li>标题</h1>
<h1>我是一个标题</h1>
<h1 class="mycls">我是一个标题</h1>
<h1>我是一个标题</h1>
<h2 class="mycls">我是h2标题</h2>
<h2>我是h2标题</h2>
<h2 id="myid">我是h2标题</h2>
</body>
</html>
- 关系选择器：分为后代选择器和子代选择器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*关系选择器
后代选择器，只要是这个元素的后代，样式都会发生变化
div下面的所有h1都会改变*/
/*div h1{
color: red;
}*/
/*关系选择器：子代选择器
只改变字标签的样式*/
div>h1{
color: gray;
}
span>h1{
color: blue;
}
</style>
</head>
<body>
<div>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
<span>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
<h1>这是标题</h1>
</span>
</div>
</body>
</html>
- 属性选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*属性选择器*/
input[type="password"]{
background: red;
}
input[type="text"][value=admin1]{
background: yellow;
}
</style>
</head>
<body>
<form action="" method="post">
用户名：
<input type="text" name="" id="" value="admin" />
用户名2：
<input type="text" name="" id="" value="admin1" />
密码：
<input type="password" name="" id="" value="123456" />
<input type="submit" value="登陆"/>
</form>
</body>
</html>
- 伪类选择器：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*伪类选择器：向某些选择器添加特殊效果
一般用在超链接上*/
h1:hover{
color: red;
}
.mycls:hover{
color: red;
}
</style>
</head>
<body>
<h1 class="mycls" >我是标题</h1>
</body>
</html>
通过伪类选择器设置超链接
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*设置静止状态*/
a:link{
color: yellow;
}
/*设置鼠标悬浮状态*/
a:hover{
color: red;
}
/*设置触发状态*/
a:active{
color: blue;
}
/*设置完成状态*/
a:visited{
color: green;
}
</style>
</head>
<body>
<a href="index.html">超链接</a>
</body>
</html>
浮动效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*浮动的作用：
解决文字环绕图片，也可以做一些页面布局*/
img{
float: left;
}
</style>
</head>
<body>
<img src="img/狗.jpg" />
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
举个例子就是，老板想骂醒职场老手，那么“没互联网思维”就是很到位的方法了。毕竟人家名字
里带了个“思维”，毕竟是玄之又玄的思维，他们一时间没办法说话，只能是哑口无言，所以就非
常合适。
</body>
</html>
消除浮动影响：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--外层div-->
<!--用浮动要考虑影响，看看是不是对其他元素有影响-->
<!--消除浮动影响
方式1：给浮动的父节点加入一个属性，overflow:hidden
方式2：给父节点加一个高度,height: 600px
方式3：被影响的元素加属性，clear: both;
-->
<div style="background-color: pink; ">
<div id="div01" style="width: 100px; height: 100px; background-color: chartreuse; float: left;">11</div>
<div id="div01" style="width: 200px; height: 200px; background-color: crimson; float: left;">22</div>
<div id="div01" style="width: 300px; height: 300px; background-color: cyan; float: left;">33</div>
</div>
<div style="width:500px; height: 500px; background-color: purple; clear: both;">
</div>
</body>
</html>
定位效果
定位可分为4种：静态定位、相对定位、绝对定位、固定定位
- 静态定位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--静态定位：
如果不写position属性的话，相当于默认效果就是静态定位
静态效果：就是元素出现在本该出现的位置。一般使用静态定位可以直接省略不写
-->
<img src="img/狗.jpg" style="position: static;" />
</body>
</html>
- 相对定位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<!--相对定位
相对元素自身所在的原来位置进行定位。
可以设置left,right,top,bottom四个属性
效果：在进行相对定位后，元素原来所在的位置被保留，被占用了--》保留站位，其他元素的位置不会发生移动
一般情况下，left和right不会同时使用，bottom和top不会同时使用，选择一个方向即可
优先级：左上>右下
应用场合：
1.元素在小范围移动的时候
2.会结合绝对定位使用
z-index属性：设置堆叠顺序，设置元素谁上谁下,要设置在定位的元素上
-->
<div style="width: 500px; height: 500px; background-color: pink;">
<div style="width: 100px; height: 100px; background-color: yellow; position: relative;left: 10px; z-index: 15;"></div>
<div style="width: 100px; height: 100px; background-color: blueviolet; position: relative; left: 10px; bottom: 20px; z-index: 10;"></div>
<div style="width: 100px; height: 100px; background-color: brown;"></div>
</div>
</body>
</html>
- 绝对定位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#outer{
width: 500px;
height: 500px;
background-color: pink;
margin-left: 300px;
position: relative; /*直接设置相对定位*/
}
#div01{
width: 100px;
height: 100px;
background-color: cornflowerblue;
position: absolute;
left: 30px;
top: 50px;
}
#div02{
width: 100px;
height: 100px;
background-color: chartreuse;
}
</style>
</head>
<body>
<!--总结：
当给一个元素设置了绝对定位的时候，它会向上一层一层的找父级节点是否有定位，
如果找到body了也没有定位，那么就相对body进行变化，如果父级节点有定位（绝对定位、
相对定位、固定定位），但是一般我们会配合使用父级为相对定位，当前元素为绝对定位，
这个元素就会相对父级位置产生变化，无论是上面哪一种，都会释放原来的位置，然后其他
元素会占用这个位置。
开发中建议：父级节点使用relative定位，子级节点使用绝对定位
（相对定位），
-->
<div id="outer">
<div id="div01">111</div>
<div id="div02">222</div>
</div>
</body>
</html>
- 固定定位：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#mydiv{
width: 50px;
height: 400px;
background-color: blue;
/*设置固定定位*/
position: fixed;
right: 0px;
top: 100px;
}
</style>
</head>
<body>
<!--应用场合：在页面过长的时候，将某个元素固定在浏览器的某个位置上，在拉动滚动条的
时候，这个元素位置不动。-->
<div id="mydiv"></div>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
<p>你好</p>
</body>
</html>
盒子模型
盒子模型包括：margin，border，padding，content
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
/*将所有元素的样式：外边距，边框，内边框全部设置为0*/
*{
margin: 0px;
border: 0px;
padding: 0px;
}
#outer{
width: 440px;
height: 450px;
background-color: lightblue;
margin-left: 100px;
margin-top: 100px;
padding-top: 50px;
padding-left: 60px;
}
#mydiv{
width: 170px;
height: 150px;
background-color: pink;
padding-top: 50px;
padding-left: 30px;
}
</style>
</head>
<body>
<div id="outer">
<div id="mydiv">我是div</div>
</div>
</body>
</html>
扫一扫
120
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
