css 的样式选择器

2023-09-14 15:14:28 +08:00 · 2023-09-14 15:14:28 +08:00 · 8038f02f30
parent 10312f0ada
commit 8038f02f30
1 changed files with 149 additions and 0 deletions
--- a/www/css2.html
+++ b/www/css2.html
@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<!-- 外联样式测试 -->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <title>样式选择器</title>
+    <style>
+      #main {
+        color: cornflowerblue;
+        font-size: 20px;
+      }
+
+      .item {
+        color: red;
+        /* display 修改标签类型
+                  block 块级标签，占一行
+                  inline 行内标签，无宽和高
+                  inline-block 行内快标签，有宽和高
+              */
+        display: inline-block;
+        width: 100px;
+        height: 100px;
+        /* border: 2px solid red; */
+        text-align: center;
+        line-height: 100px;
+        border-radius: 20px;
+        margin: 10px;
+        box-shadow: 10px 10px 20px gray;
+      }
+
+      .item2 {
+        /* display 修改标签类型
+                  block 块级标签，占一行
+                  inline 行内标签，无宽和高
+                  inline-block 行内快标签，有宽和高
+              */
+        display: inline-block;
+        border-radius: 10px;
+        color: rgba(255, 71, 71, 0.555);
+        font-size: 18px;
+        font-family: "宋体";
+        box-shadow: 5px 5px 10px rgb(220, 238, 130);
+      }
+      /*      
+        父选择器 > 子选择器 {
+        > 表示父子关系，只会选择子选择器 
+            
+        父选择器 子选择器 {
+        空格表示父子关系，会选择子选择器和子选择器的子选择器
+        */
+      #content > div {
+        /* dashed 虚线，solid 实线，dotted 点线 */
+        border: 1px dotted blueviolet;
+        margin: 5px;
+        border-radius: 10px;
+      }
+
+      i,
+      b,
+      u,
+      .c1,
+      .c2 {
+        margin-right: 10px;
+        box-shadow: 2px 2px 5px grey;
+        border-radius: 5px;
+        border-top: 2px dashed yellowgreen;
+        border-width: 5px;
+      }
+
+      [type] {
+        color: rgb(132, 9, 255);
+        border-radius: 50%;
+        box-shadow: 2px 2px 5px aquamarine;
+      }
+
+      input[type="time"][value="12:10"] {
+        padding: 10px;
+        color: red;
+      }
+
+      /* content 子后代的第一个元素 */
+      #content > div:first-child,
+      #content > div:last-child {
+        color: darkgoldenrod;
+        font-size: 18px;
+      }
+
+      #content:hover {
+        padding: 20px;
+        border: 1px solid green;
+      }
+
+      .circle {
+        border-radius: 50%;
+      }
+
+      .circle:hover {
+        width: 90px;
+        height: 90px;
+        /* border: 1px solid yellow; */
+        box-shadow: 0 0 100px rgb(0, 128, 163);
+      }
+    </style>
+  </head>
+
+  <body>
+    <p>ID 不是 main</p>
+    <p id="main">ID 是 main</p>
+    <div class="item">ABC</div>
+    <div class="item">BCD</div>
+    <div class="item">FFF</div>
+    <div class="item">LLL</div>
+    <div>
+      <form>
+        <input value="123" /><br />
+        <input type="text" value="123" /><br />
+        <input type="time" value="12:10" /><br />
+        <input type="time" value="12:17" /><br />
+
+        <input class="item2" /> <button class="item2">提交</button>
+      </form>
+    </div>
+    <br /><br />
+    <div id="content">
+      <div class="title">标题</div>
+      <div class="text">
+        <h3>精彩即将到来</h3>
+        <div>
+          <p>内容</p>
+          <p>内容2</p>
+        </div>
+      </div>
+      <div>这是最后一段内容</div>
+    </div>
+    <p class="title">外部标题</p>
+    <p>
+      <b>加粗的文字</b>
+      <i>倾斜的文字</i>
+      <u>带下划线的文字</u>
+      <span class="c1"> 自定义c1类的文字 </span>
+      <span class="c2"> 自定义c2类的文字 </span>
+    </p>
+
+    <div>
+      <img class="circle" src="images/head_w1.png" width="100px" height="100px" />
+    </div>
+  </body>
+</html>