当我想要将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相同。
背景属性:
宽度
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{ 200px; height: 200px; /*border-style: solid;*/ #solid是实现的意思 /*border- 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{ 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{ 100%; height: 600px; background-color: wheat; overflow: hidden;
#定义图片顶着最上边,无边界 } .inner{ 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{ 100px; height: 170px; background-color: #53868B; float: left; } .c2{ 200px; height: 70px; background-color: cornflowerblue; float: left; } .c3{ 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>