Day12 CSS简单用法
当我想要将html中的部分属性修改的时候，如果单个改的话，费时费力，这时候我就需要利用css和html结合起来了。
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
1 按标签名选择
p{
color: red;
}
div{
background-color: green;
}
2 按id属性选择
#c1{
font-size: 40px;
}
3 按class属性选择
.c2{
background-color: rebeccapurple;
}
4 * 代值的是所有标签
*{
color: red;
}
</style>
</head>
<body>
<p class="c2">hello1</p>
<p id="c1">hello2</p>
<p class="c2">hello3</p>
<div>DIV</div>
<!--<p style="color: red">hello3</p>-->
</body>
CSS的组合选择器：
当代码中有
<div class="outer">
<p>P</p>
<div>
<p>P</p>
#当我想要修改<div>里边的<p>标签的时候，我们可以利用后代标签，可以这么写。
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*!*1 后代选择器*!*/
/*.outer p{*/
/*color: red;*/
/*}*/
/*2 子代选择器*/
/*.outer>p{*/
/*color: red;*/
/*}*/
/*.outer .c2 p{*/
/**/
/*}*/
/*3 多元素选择器*/
/*.outer>p,.c3{*/
/*color: red;*/
/*}*/
</style>
</head>
<body>
<div class="outer">
<p>P</p>
<div class="c2">
<p>PP</p>
</div>
</div>
<div class="c3">P</div>
</body>
</html>
CSS的属性操作：
块级标签：可以设置长宽
内联标签：设置长宽无效
width：设置宽度
height：设置高度
backgroud-color:设置背景颜色
color：字体或者文字颜色
font-size：字体大小
text-align：center 设置居中
line-height：90px 这里如果想设置居中的话，数值需要跟上面的height相同。
背景属性：
width:宽度
height：高度
background-color:颜色
backgroup-img:url()加载图片
backgroup-repeat：no-repeat 不在两边留空白距离
backgroup-position：距离左边和上边的距离（可填center，center）
background: url("http://img2.imgtn.bdimg.com/it/u=4289651615,1500379285&fm=11&gp=0.jpg") no-repeat -200px -100px;
#上面的3个属性可以利用这一条来显示
边框属性：
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1{
width: 200px;
height: 200px;
/*border-style: solid;*/
#solid是实现的意思
/*border-width: 10px;*/
#边框厚度，在200之外加了多大的空间
/*border-color: red;*/
#边框颜色
border: solid red 2px;
border-radius: 20%;
#让边框变的曲线，不直角
}
</style>
</head>
<body>
<div class="c1">sadfsda</div>
</body>
边框属性之内外边距：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.c1,.c2{
width: 300px;
height: 300px;
padding: 50px;
/*padding: 50px 20px 20px;*/
/*顺时针数*/
/*padding-top: 50px;*/
border: dashed 2px red;
}
.c1{
background-color: wheat;
margin-bottom: 20px;
/*#调的是盒子和盒子之间的距离*/
}
.c2{
background-color: dodgerblue;
margin-top: 50px;
}
/*内联标签无法设置长宽*/
.s1,.s2{
color: white;
padding: 10px;
}
.s1{
background-color: rebeccapurple;
}
.s2{
background-color: darkmagenta;
margin-left: 100px;
}
.outer{
width: 100%;
height: 600px;
background-color: wheat;
overflow: hidden;
#定义图片顶着最上边，无边界
}
.inner{
width: 80%;
height: 300px;
background-color: gray;
margin: 100px auto;
#margin：auto是居中的意思，定位的参照是父级。如果父集没有会继续往上找
}
</style>
</head>
<body>
<!--<div class="c1">Yuan</div>-->
<!--<div class="c2">Yuan2</div>-->
<!--<span class="s1">111</span>-->
<!--<span class="s2">222</span>-->
<div class="outer">
<div class="inner"></div>
</div>
</body>
</html>
float属性操作：
怎么把多个元素在一行上去显示？
float会将图片或者文本悬浮，假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的框之后的block元素元素会认为这个框不存在，但其中的文本依然会为这个元素让出位置。 浮动的框之后的inline元素，会为这个框空出位置，然后按顺序排列。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
}
.c1{
width: 100px;
height: 170px;
background-color: #53868B;
float: left;
}
.c2{
width: 200px;
height: 70px;
background-color: cornflowerblue;
float: left;
}
.c3{
width: 300px;
height: 120px;
background-color: darkmagenta;
float: right;
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
<div class="c3"></div>
</body>
</html>
