Day02 了解Html+CSS的学习内容Css属性内边距外边距呀边框选择器实操（二）

2023-07-16 210

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： Day02 了解Html+CSS的学习内容Css属性内边距外边距呀边框选择器实操（二）

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

Day02 了解Html+CSS的学习内容Css属性内边距外边距呀边框选择器实操（二）

CSS基础选择器的学习

Maragin内边距案例同心圆

外边距Padding

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

Day02 了解Html+CSS的学习内容Css属性 内边距 外边距呀 边框 选择器 实操（二）

CSS基础选择器的学习

Maragin内边距 案例同心圆

外边距Padding

热门文章

最新文章

相关课程

相关电子书

相关实验场景

Day02 了解Html+CSS的学习内容Css属性内边距外边距呀边框选择器实操（二）

Maragin内边距案例同心圆