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>

#当我想要修改<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>

转载于:https://www.cnblogs.com/sexiaoshuai/p/7568894.html