CSS基础选择器的学习
<style> /* 全选选择器 */ *{ /* background-color: rgb(81, 171, 81); */ } /* id选择器 */ #one{ width: 50%; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Ge font-size: 40px; color: rgb(24, 185, 185); } /* class选择器 */ .two{ width: 50%; background-color: black; color: aliceblue; font-family: 宋体; font-weight: 900; } /* 元素选择器 选择所有的p标签*/ p{ width: 50%; height: 300px; width: 300px; border: 3px solid red; font-size: medium; font-size:18px; color: green; line-height: 300px; text-align: center; } /* 选择两者都有的选择器 */ div, p{ width: 50%; background-color: rgb(23, 155, 111); border: 2px dotted rgb(35, 36, 35); } /* 选择p元素内的元素span */ p span{ width: 200px; height: 200px; border:2px solid lightblue; background-color: black; color: rgb(15, 197, 197); } /* 选择所有父级是 <div> 元素的 <p> 元素 */ div>p{ height: 400px; width: 400px; border: 10px solid palevioletred; } /* a标签的特有的属性 */ a{ border: 4px dotted rgb(2, 5, 168); font-size: 30px; background-color: rgb(243, 236, 234); display: block; } /* 选择所有未访问链接 */ a:link{ background-color: green; } /* 选择每个<P>元素的第一行 */ p:first-line{ background-color: aqua; } /* 选择第一个孩子 */ p:first-child{ background-color: darkcyan; color: white; font-size: 40px; } </style>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>div后的元素p</title> <style> div+p { background-color:yellow; font-size: 30px; } </style> </head> <body> <h1>Welcome to My Homepage</h1> <div> <h2>My name is Donald</h2> <p>I live in Duckburg.</p> </div> <p>Div后的元素为p My best friend is Mickey.</p> <p>I will not be styled.</p> <hr color="red"> </body> </html>
选择div后的p元素
<!DOCTYPE html> <html> <head> <title>属性选择器</title> <style> a[target] { background-color:rgb(233, 233, 10); font-size: 45px; } </style> </head> <body> <p>The links with a target attribute gets a yellow background:</p> <a href="http://www.javascriptcn.com">javascriptcn.com</a> <a href="http://www.disney.com" target="_blank">disney.com</a> <a href="http://www.wikipedia.org" target="_top">wikipedia.org</a> <p><b>Note:</b> For [<i>attribute</i>] to work in IE8 and earlier, a DOCTYPE must be declared.</p> <a href="http://www.badu.com" target="_parent">百度一下</a> </body> </html>
Maragin内边距 案例同心圆
margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。
实例:
margin:10px 5px 15px 20px;
上边距是 10px
右边距是 5px
下边距是 15px
左边距是 20px
margin:10px 5px 15px;
上边距是 10px
右边距和左边距是 5px
下边距是 15px
margin:10px 5px;
上边距和下边距是 10px
右边距和左边距是 5px
margin:10px;
所有四个边距都是 10px
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>maragin内边距</title> <style> p { height: 200px; width: 200px; background-color:rgb(242, 250, 2); border: 10px double rgb(150, 20, 20); /* 外扩线 所有CSS 轮廓（outline）属性 */ outline:#2c16ce dotted thick; outline-style: dotted; outline-width: 10px; outline-color: aquamarine; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; font-size: 20px; } p.margin { /* 内边距 */ margin: 200px; } p.margin1{ margin-top: 100px; margin-left: 100px; margin-right: 300px; margin-bottom: 120px; } </style> </head> <body> <p>这是一个没有指定边距大小的段落。</p> <p class="margin">这是一个指定边距大小的段落。</p> <p class="margin1">自己定义的一个你内部边框</p> </body> </html>
maragin内边距
外边距Padding
padding 简写属性在一个声明中设置所有填充属性。该属性可以有1到4个值。
实例:
padding:10px 5px 15px 20px;
上填充是 10px
右填充是 5px
下填充是 15px
左填充是 20px
padding:10px 5px 15px;
上填充是 10px
右填充和左填充是 5px
下填充是 15px
padding:10px 5px;
上填充和下填充是 10px
右填充和左填充是 5px
padding:10px;
所有四个填充都是 10px
<style> body { padding: 0px; margin: auto; font-size: 40px; color: rgb(185, 18, 85); background-color: aliceblue; } #one{ background-color: gainsboro; border: dotted 2px red; border-radius: 50%; } div { margin: auto; width: 800px; height: 800px; border-radius: 50%; border: 6px double pink; } span { display: block; border-radius: 50%; width: 600px; height: 600px; border: 10px double rgb(232, 9, 46); /* margin: auto; */ margin-top: 67px; margin-left: 90px; text-align: center; line-height: 600px; } span1 { display: block; border-radius: 50%; width: 600px; height: 600px; border: 5px solid rgb(99, 202, 15); /* margin: auto; */ margin-top: -5px; margin-left: -4px; padding-top: 40px; padding-right: 30px; padding-bottom: 20px; padding-left: 10px; text-align: center; line-height: 600px; } span2 { display: block; border-radius: 50%; width: 600px; height: 600px; border: 5px solid rgb(99, 202, 15); /* margin: auto; */ margin-top: -5px; margin-left: -4px; padding: 80px; text-align: center; line-height: 600px; } span3 { display: block; border-radius: 50%; width: 600px; height: 600px; border: 5px solid rgb(208, 255, 0); /* margin: auto; */ margin-top: -5px; margin-left: -4px; padding: 100px,100px; text-align: center; line-height: 600px; } span4 { display: block; border-radius: 50%; width: 500px; height: 500px; border: 5px solid lawngreen; margin-top: -5px; margin-left: -4px; padding: 50px,30px,20px; text-align: center; line-height: 600px; /* margin: auto; */ } span:hover{ color: red; font-size: 40px; } div:hove{ background-color: pink; } span:hover{ background-color: cornflowerblue; } .a:hover{ background-color: green; color: white; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } </style>
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>外边距</title> </head> <body> <div id="one"> <div> <span> <span1 class="a"> 写四个外边距的值 </span1> </span> </div> <div> <span> <span2 class="a"> 写一个边距的值 </span2> </span> </div> <div> <span> <span3 class="a"> 写二个边距的值 </span3> </span> </div> <div> <span> <span4 class="a"> 写三个边距的值 </span4> </span> </div> </div> </body> </html>
外边距Padding
