CSS样式学习

吴家小妹 發表於 2022-4-8 11:41:00

<h2 class="md-end-block md-heading">CSS学习</h2>
<h2 class="md-end-block md-heading">1.三种样式</h2>
 
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>    <meta charset="UTF-8">    <title>Title</title>     <style> h1{    color: wheat; }    </style>          <link rel="stylesheet" href="css/style.css">     </head> <body>   <h1>我是个测试标题</h1>  </body> </html></pre>
 
链接式：
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"> <link rel="stylesheet" href="css/style.css"></pre>
 
<h2 class="md-end-block md-heading">2.选择器</h2>
作用：选择页面上的某一个或某一类元素
<h3 class="md-end-block md-heading">2.1基本选择器</h3>
1.标签选择器:选择一类标签标签{}
2.类选择器 class:选择所有class属性一致的标签，跨标签，类名{}
3.id选择器全局唯一 #id{}
<pre class="md-fences md-end-block ty-contain-cm modeLoaded"><!DOCTYPE html> <html lang="en"> <head>  <meta charset="UTF-8">  <title>Title</title>   <style> #zhangzhao{    color: #e51515; } .test{ color: #018aff; } h1{    color: #dcc522; } </style> </head> <body> <h1 class="test" id="zhangzhao">张老家学Java</h1> <h1 class="test">张老家学Java</h1> <h1 class="test02">张老家学Java</h1> <h1 class="test02">张老家学Java</h1>  </body> </html></pre>
<h3 class="md-end-block md-heading">2.2层次选择器</h3>
1.后代选择器：某个元素的后面祖爷爷爷爷爸爸你全部选中
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">  /*后代选择器 */ body p{            background: red;      }</pre>
2.子选择器，一代，儿子
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">    /*   子选择器 */        body>p{            background: #dcc522;      }</pre>
 
3.相邻兄弟选择器同辈，仅仅选择下面一个
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">    /*  相邻兄弟选择器只选择一个，对下不对上*/       .active + p{           background: #018aff;       }</pre>
 
4.通用兄弟选择器
<pre class="md-fences md-end-block ty-contain-cm modeLoaded">    /*通用兄弟选择器，当前选中元素的向下所有的兄弟元素 */        .active~p{            background: green;      }</pre>
 
  
来源：https://www.cnblogs.com/zhanglaojia233/p/16116175.html

頁: [1]

琼殿技术论坛's Archiver

CSS样式学习