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

2023-07-16 77

版权

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

简介： 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', Geneva, Verdan
        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>
<div id="one">
<h1><i>我是id选择器字体大小为40px</i></h1>
</div>
<hr color="red"> 
<div id="two">
<h2><i>我是Class选择器</i></h2>
</div>
<body>
    <div>
        <span>我是在div元素后的元素信息</span>
        <p>我是p中编号为1
            <span>我是p元素的第一个汉子</span>
        </p>
        <p>我是p中编号为2</p>
        <p>我是p中编号为3
            <span>选择p元素内的元素a</span>
            <span>选择p元素内的元素b</span>
        </p>
    </div>
<h1>我是元素</h1>
    <div>
        <h2>My name is Donald</h2>
        <p>I live in Duckburg.</p>
        </div>
 <hr color="green">        
    <div>
        <i><b><a href="#">2111111111111111111111111111</a></b></i>
        <i><b><a href="#">3111111111111111111111111111</a></b></i>
        <i><b><a href="#">4111111111111111111111111111</a></b></i>
        <i><b><a href="#">5111111111111111111111111111</a></b></i>
        <i><b><a href="#">6111111111111111111111111111</a></b></i>
        <i><b><a href="#">7111111111111111111111111111</a></b></i>
        <i><b><a href="#">8111111111111111111111111111</a></b></i>
        <i><b><a href="#">9111111111111111111111111111</a></b></i>
        <i><b><a href="#">20111111111111111111111111111</a></b></i>
        <i><b><a href="#">1111111111111111111111111111</a></b></i>
    </div>
    <!--  1）.使用id选择器设置div(宽高自定义)内文字的颜色为蓝色，字体为25px，垂直居中，文字加粗(不能使用语义标签)
  2）.使用类选择器设置5个div的背景颜色为红色，文字颜色为白色(宽高自定义，文字自定义)
 3）.使用标签选择+并集选择器设置一个a标签，一个p标签，一个span标签，一个div标签，的字体大小为18px，
颜色为橙色，字体加粗900 -->
<hr>
<style>
#div1{
    color: blue;
    font-size: 25px;
    line-height: auto;
    font-weight: bolder;
}
.sd{
    background-color: red;
    color: aliceblue;
}
a ,p ,span, div{
    background-color: azure;
    font-size: 18px;
    color: orange;
    font-weight: 900;
}
</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>

<!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>

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

选择器

CSS 选择器

热门文章

最新文章

相关课程

相关电子书

相关实验场景

热门

活动广场

任务中心

开发者评测

高校计划

乘风者计划

训练营

阿里云MVP

话题

直播

下载

镜像站

技术资料

插件

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

选择器

CSS 选择器

热门文章

最新文章

相关课程

相关电子书

相关实验场景

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