<!doctype html><html><head> <meta charset="utf-8"> <title></title></head><style type="text/css"> /* “*”代表所有元素，一般情况下会提前定义全局选择符 */ * { color: pink; font-size: 12px; border: 1px solid blue; } /*类选择符链：只有同时出现 www dreamdu com的类才可以使用*/ .www.dreamdu.com { color:blue; } /*一一个元素可以有多个类选择符*/ .dreamdu-red { color:red; } p.dreamdu-12px { font-size:12px; } p.dreamdu-bold { font-weight:bold; } #btw{ border: 2px; width: auto; /*定义边框宽度*/ border-top-width: 10px; border-right-width: 5px; border-left-width: 2px; border-bottom-width: 7px; /*定义边框颜色*/ border-top-color: #006486; border-right-color: #f8ae11; border-left-color: #3080cb; border-bottom-color: #464646; /*定义边框样式*/ border-right-style: solid; border-left-style: double; border-bottom-style: dashed; border-top-style: groove; /*border属性 是以上几个属性的集合 但是他也分为 top,right,left bottom*/ /**border: border-width border-style border-color;*/ } #mg{ border-style: solid; border-color: red; /*margin:表示外边框外面可以有一层补白，他可以把块级元素分开，边外补白定义了围绕某种元素的空白*/ margin-top: 10px; } #pdp{ border-style: solid; border-color: #3080cb; margin-top: 10px; /*padding:表示一个边框的的内部补白区，边内补白*/ padding-left: 40px; /*相对于当前对象单位，相对长度单位可以随着当前为本属性进行调整*/ font-size: 2em; /*相对百分比*/ width: 10%; } h1:before{ /**/ content: "test"; display: inline; } h1:after{ content: "背景"; } /* 选择符是从上往下执行的，并向下覆盖属性 选择符1，选择符2{ color:red; } */ h2{ color: #3080cb; } h1,h2,h3{ color: #ff0000; border-style: solid; } /*只要是 p 被 div包含时候，无论p是他的什么子类，还是孙类 只要是后裔就行*/ div p{ font-size: 40px; color: saddlebrown; } /*定义某一个或某一类元素的子类样式，仅仅限于子类*/ #son>p{ color: #ff0000; } #brother+p{ color: #ff0000; } /*属性选择器表示具有某种属性的选择器*/ /*表示具有type属性的input元素*/ input[type]{ color: #ff0000; } /*表示input标签某一个类的,某一个值*/ input[class='cd']{ color: #3080cb; } /*表示匹配input标签中class属性中其中具有某一个值的元素*/ input[class~='cd']{ color: #3080cb; } /*表示匹配input标签class属性值为cd或者跟在cd后面的链接符是-的*/ input[class|='cd']{ color: #3080cb; } /*表示匹配input标签class属性值中以cd开头的所有元素*/ input[class^='cd']{ color: #3080cb; } /*表示匹配input标签class属性值中以cd结尾的所有元素*/ input[class$='cd']{ color: #3080cb; } /*表示匹配input标签class属性值中具有cd值的所有元素*/ input[class*='cd']{ color: #3080cb; }</style><!--标签元素等级之间是有继承关系的，或兄弟关系的--><!--祖类元素--><body> <p class="dreamdu-bold dreamdu-12px dreamdu-red">梦之都 红色12px的粗体</p> <!--父类元素--> <h1>dfafa</h1> <h2>dsfaf</h2> <h3>dsfafsdaf</h3> <!--父类元素--> <div id="btw"> <!--子类元素--> <span> <!--孙类元素--> <p id="p">在乎</p> </span> </div> <div id="mg"> <p id="pdp">在乎</p> </div> <div id="son"> <div> <p>在乎地方</p> </div> <p>你是</p> </div> <div> <span id="brother">fafa</span> <p>兄弟</p> <p>隔离</p>
<div class="aritcle_card">
<a class="aritcle_card_img" href="/ai/1842">
<img src="https://img.php.cn/upload/ai_manual/000/000/000/175680380570675.jpg" alt="MagicStudio">
</a>
<div class="aritcle_card_info">
<a href="/ai/1842">MagicStudio</a>
<p>图片处理必备效率神器！为你的图片提供神奇魔法</p>
<div class="">
<img src="/static/images/card_xiazai.png" alt="MagicStudio">
<span>102</span>
</div>
</div>
<a href="/ai/1842" class="aritcle_card_btn">
<span>查看详情</span>
<img src="/static/images/cardxiayige-3.png" alt="MagicStudio">
</a>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p> </div> <input type="text"> <input></body></html>
HTML怎么学习？HTML怎么入门？HTML在哪学？HTML怎么学才快？不用担心，这里为大家提供了HTML速学教程(入门课程)，有需要的小伙伴保存下载就能学习啦！
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
703
收藏
