CSS:
1.css的引入方式
2.基础选择器
3.高级选择器
4.选择器的优先级
5.伪类选择器
6.字体样式
7.文本样式
8.背景
9.盒模型border
10.margin
11.padding
1.css的引入方式
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>css的引入方式</title>
<!--内链式-->
<style type="text/css">
h2{
font-size: 30px;
color: red;
}
</style>
<style type="text/css">
/* 外链式：导入式 实际用的少
使用import是 先加载html 在加载css
import 是css2.1特有的，对于不兼容css2.1的浏览器是无效的eg:IE5以下
*/
@import url('./css/index.css');
</style>
<!--外链式：链接式
使用link是html css同时加载的！！
link 是XHTML
-->
<link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
<div>
<!--内嵌式
优先级：内嵌式 > 内链式； 一般不写内嵌式，以后不好维护！
-->
<h1 style="font-size: 10px;color: yellow">我是h1路飞学城</h1>
<h2>我是h2路飞学城</h2>
</div>
</body>
</html>
2.基础选择器
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>基础选择器</title>
<style type="text/css">
/*通配符选择器*/
*{
padding: 0;
margin: 0;
color: #868686;
}
/*id选择器*/ /* 父内容一般不设 高度 子内容填充*/
#container{
width: 968px;
background-color: antiquewhite;
margin: 0 auto; /*内容居中显示*/
}
/* 标签选择器*/
h1{
color: rgba(158,232,149,0.73)
}
/*类选择器*/
.content{
width: 968px;
background-color: red;
}
img{
width: 968px;
}
/*子代选择器*/
ul>li{
color: aqua;
}
/*后代选择器*/
ul a{
color: green;
}
</style>
</head>
<body>
<!-- 上中下 布局 -->
<div id="container">
<div class="header">
<h1>路飞学城</h1>
</div>
<div class="content">
<h3>我是内容</h3>
<img src="./images/homesmall1.png" alt="图片1">
</div>
<div class="header">
<ul>
<li>1 <a href="javascript:">哈哈</a></li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</div>
</div>
</body>
</html>
3.高级选择器
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>高级选择器</title>
<style type="text/css">
/*群组选择器*/
.title,.content,.footer{
width: 968px;
/*height: 300px;*/
margin: 0 auto;
background-color: beige;
border: 1px solid red;
}
/*交集选择器*/
p.p1{
color: green;
}
p#title1{
font-size: 30px;
color: red;
}
/* 毗邻标签 紧跟着h3标题的标签*/
h3+p{
color: aqua;
}
/*兄弟选择器*/
h3~p{
color: rgba(120,46,232,0.73)
}
/*属性选择器
找到所有class=baidu的选择器
*/
[class='baidu']{
color: green;
}
/*找到所有class开头是btn 的选择器*/
[class^='btn']{
font-size: 20px;
color: yellow;
}
/*找到以...结尾的选择器*/
[class$='ault']{
font-size: 40px;
color: red;
}
</style>
</head>
<body>
<div class="title">
<p class="p1" id="title1">我是一个段落</p>
</div>
<div class="content">
<h3>我是三级标题</h3>
<a href="javascript:">百度一下</a>
<p>我是另一个段落</p>
<h3>我是三级标题</h3>
<p>我是另一个段落</p>
<h3>我是三级标题</h3>
<p>我是另一个段落</p>
<p>我是另一个段落</p>
<p>我是另一个段落</p>
</div>
<div class="footer">
<a href="https://www.baidu.com" class="baidu">百度</a>
<a href="https://www.baidu.com" class="btn-default">百度一下</a>
<a href="https://www.baidu.com" class="baidu">百度</a>
<a href="https://www.baidu.com" class="btn-index">百度二下</a>
</div>
<!--
总结：
基础选择器：
1.标签选择器 div
2.类选择器 .div1
3.id选择器 #box
4.通配符选择器 *
高级选择器：
1.群组选择器 中间用,
.title,.content,.footer{}
2.交集选择器 选择器之间不能有空格，第一个标签必须是标签选择器，第二个标签可以是id或者类选择器
p.p1{} p#title1{}
3.后代选择器 选择器之间用 空格
ul a{}
4.子代选择器 选择器之间用 >
ul>li{}
5.毗邻选择器 选择器之间用 + 紧跟着h3标题的标签
h3+p{}
6.兄弟选择器 选择器之间用~
h3~p{}
7.属性选择器
[class='baidu']{}
[class^='btn']{}
[class$='ault']{}
css样式优先级：
行内样式 > 内部样式表 > 外部样式表
ID选择器 > 类选择器 > 标签选择器
-->
</body>
</html>
4.选择器的优先级
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>优先级</title>
<style type="text/css">
#div1{
background-color: yellow;
}
.box{
background-color: green;
}
div{
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<!-- 选择器的优先级 id > 类 > 标签-->
<div id="div1" class="box">哈哈</div>
</body>
</html>
5.伪类选择器
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>伪类选择器</title>
<style type="text/css">
/*超链接未被访问时的状态*/
a:link{
background-color: yellow;
}
/*鼠标单击时超链接的状态*/
a:visited{
color: green;
}
/*鼠标悬停时超链接的状态*/
a:hover{
font-size: 30px;
color: aqua;
}
/*鼠标点击不松手超链接的状态*/
a:active{
color: blue;
}
/*获取焦点时的样式*/
input:focus{
background-color: red;
}
/*
总结：
爱恨情仇原则：love / hate
*/
/*伪元素选择器*/
p:first-letter{
font-size: 30px;
}
p:before{
content: '哈哈';
color: red;
}
p:after{
content: "$$";
color: green;
}
</style>
</head>
<body>
<ul>
<li><a href="#">百度一下</a></li>
<li><a href="#">hao123</a></li>
<li><a href="#">博客</a></li>
</ul>
<form action="">
<input type="text" name="">
</form>
<p>来呀，你好啊！</p>
</body>
</html>
6.字体样式
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>字体样式</title>
<!--内链式 -->
<style type="text/css">
p{
/*设置字体大小*/
font-size: 30px;
/*推荐设置斜体的时候使用oblique*/
/*font-style: italic;*/
font-style: oblique;
/*设置字体的粗细*/
font-weight: bolder;
/*设置字体的类型*/
font-family:"微软雅黑";
/*设置字体的颜色*/
color: red;
}
</style>
</head>
<body>
<!--
默认字体大小是 16px = 1em
0.75em = 12px
-->
<p>这里是个p!!</p>
</body>
</html>
7.文本样式
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>文本样式</title>
<style type="text/css">
.box1{
width: 500px;
height: 200px;
background-color: red;
color: rgba(85,26,139,0.73);
/*上下删除线 overline line-through */
text-decoration: underline;
/*设置鼠标的形状*/
cursor: pointer;
/*设置首行缩进*/
text-indent: 20px;
font-size: 20px;
/*left right center justify 两端对齐只针对英文 */
text-align:justify;
/*设置阴影 左右 上下 0-1 color */
text-shadow:0px 0px 1px #fff;
/*行高
规律： 当行高=盒子的高度时，文本会垂直居中
*/
line-height: 200px;
text-align: center;
}
</style>
</head>
<body>
<div class="box1">
my name is alice
</div>
<a href="">天空飘个五个字</a>
</body>
</html>
8.背景
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>背景</title>
<style type="text/css">
#img{
width: 990px;
height: 980px;
/*设置背景颜色*/
/*background-color: yellowgreen;*/
/*background-image: url("./images/homesmall1.png");*/
/*!* repeat-x repeat-y no-repeat *!*/
/*background-repeat: no-repeat;*/
/*background-position: 10px 20px;*/
/*简写*/
/*background:url("./images/homesmall1.png") no-repeat 20px 30px yellowgreen;*/
background: red;
padding-top:10px;
border: 5px solid blue;
}
</style>
</head>
<body>
<div id="img">
</div>
</body>
</html>
9.盒模型border
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>border</title>
<style type="text/css">
.wrap{
width: 200px;
height: 200px;
background-color: #000000;
/*
border-top-width: 5px;
border-bottom-width: 10px;
border-left-width: 15px;
border-right-width: 20px;
border-top-color: red;
border-bottom-color: yellowgreen;
border-left-color: yellow;
border-right-color: blue;
border-top-style: solid;
border-bottom-style: dashed;
border-left-style: dotted;
border-right-style: double;
*/
/* 四个值 上 右 下 左 */
/*
border-style: dotted dashed double solid;
border-width: 5px 10px 15px 20px;
border-color: blue red yellow slateblue;
*/
/* 三个值 上 左右 下*/
/*
border-style: dotted double solid;
border-width: 5px 10px 20px;
border-color: blue yellow slateblue;
*/
/* 两个值 上下 左右 */
/*
border-style: dotted solid;
border-width: 5px 20px;
border-color: blue yellow;
*/
/* 一个值 上下左右 */
/*
border-style: dotted;
border-width: 20px;
border-color: blue;
*/
/*简写*/
/*border: 10px solid yellow;*/
}
</style>
</head>
<body>
<div class="wrap"></div>
</body>
</html>
10.margin
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>margin</title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: #ff5776;
/*
margin-top: 20px;
margin-left: 40px;
margin-bottom: 20px;
margin-right: 40px;
*/
/* 上 右 下 左*/
/*margin: 20px 30px 40px 50px;*/
/* 上 左右 下*/
/*margin: 20px 30px 40px;*/
/* 上下 左右*/
/*margin: 20px 40px;*/
/*margin-bottom: 50px;*/
/* margin: 0 auto;使盒子元素水平居中 */
margin: 0 auto;
}
/*
总结：
垂直方向的特殊性；水平方向没有这种特性；
当两个垂直外边距相遇时，会形成一个外边距，称为 外边距合并，已大的为基准！！
注意：父子级盒子 嵌套 设置外边距 会形成外边距合并，影响页面布局，
解决办法：给父元素添加 border
解释：
所有毗邻的两个或更多盒元素的margin将会合并为一个margin共享之（以最大的为基准）。
毗邻的定义为：
同级或者嵌套的盒元素，并且他们之间没有非空内容，padding或者border分割。
解决办法：（子债父还）
1.父级或子元素使用浮动或者绝对定位absolute,浮动或绝对定位不参与margin的折叠。
2.父级overflow:hidden
3.父级设置padding(破坏非空白的折叠条件)
4.父级设置border
*/
.box2{
width: 200px;
height: 200px;
background-color: yellow;
margin-top: 100px;
border: 1px solid chartreuse;
/*padding: 1px;*/
/*overflow: hidden;*/
}
.child{
width: 100px;
height: 100px;
background-color: #868686;
margin-top: 150px;
}
span{
background-color: #ff5776;
}
.span1{
margin-left: 40px;
}
.span2{
margin-left:20px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2">
<div class="child"></div>
</div>
<span class="span1">12345</span>
<span class="span2">54321</span>
</body>
</html>
11.padding
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>padding</title>
<style type="text/css">
.box1{
width: 100px;
height: 200px;
background-color: #ff5776;
/*
内边距：内容区域到边框的距离
内边距会扩大元素所在的区域
注意：
为元素设置内边距 只能影响自己，不会影响其他的元素；
*/
/*
padding-left: 20px;
padding-top: 30px;
padding-right: 40px;
padding-bottom: 40px;
*/
/*
padding: 10px 20px 30px 40px;
padding: 10px 30px 50px;
padding: 10px 20px;
*/
padding: 10px;
}
</style>
</head>
<body>
<div class="box1">
12345
</div>
</body>
</html>
