diff --git a/吴光慧学习笔记/10.30/mystyle.css b/吴光慧学习笔记/10.30/mystyle.css
new file mode 100644
index 0000000..cab7951
--- /dev/null
+++ b/吴光慧学习笔记/10.30/mystyle.css
@@ -0,0 +1,8 @@
+body {
+  background-color: lightblue;
+}
+
+h1 {
+  color: navy;
+  margin-left: 20px;
+}
\ No newline at end of file
diff --git a/吴光慧学习笔记/10.30/study1 b/吴光慧学习笔记/10.30/study1
new file mode 100644
index 0000000..1fa214d
--- /dev/null
+++ b/吴光慧学习笔记/10.30/study1
@@ -0,0 +1,168 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+     <!--外部CSS
+     只需修改一个文件即可改变整个网站的外观
+     -->
+     <link rel="stylesheet" type="text/css" href="mystyle.css">
+
+    <style>
+    /*内部CSS
+    在 head 部分的 <style> 元素中进行定义
+    */
+    /*元素选择器*/
+    p {
+    text-align: center;
+    color: red;
+    border: 2px solid red;
+    border-radius: 5px;/*圆角边框*/
+    } 
+
+    /*id选择器*/
+    #para1 {
+    text-align: center;
+    color: red;
+    }
+
+    /*类选择器*/
+    .center {
+    text-align: center;
+     color: red;
+    }
+
+    /*通配符选择器  * { } */
+
+    /*分组选择器*/
+    h1, h2, p {
+    text-align: center;
+    color: red;
+    }
+    
+    /*设置背景颜色
+    有效的颜色名称 - 比如 "red"
+    十六进制值 - 比如 "#ff0000"
+    RGB 值 - 比如 "rgb(255,0,0)"
+    */
+    body {
+    background-color: lightblue;
+    /*background: rgba(0, 128, 0, 0.3)  30% 不透明度的绿色背景 */
+    background-image: url("paper.gif");/*背景图像*/
+    background-repeat: repeat-x;/*背景图像重复方式  repeat-y垂直*/
+    background-position: right top;/*背景图像位置*/
+    background-attachment: fixed;/*背景图像是否随内容滚动  scroll*/
+
+    /*简写属性顺序：
+    background-color
+    background-image
+    background-repeat
+    background-attachment
+    background-position
+    */
+    }
+
+    /*盒模型
+    每个 HTML 元素都可以看作是一个盒子
+    总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距
+
+    盒子模型由四个部分组成：
+    边距（margin）：清除元素周围的区域，外边距是透明的
+    边框（border）：围绕内边距和内容的边框      
+    内边距（padding）：清除内容周围的区域，内边距也是透明的
+    内容（content）：包含文本和图像的实际内容
+    */
+    div {
+    width: 300px;
+    border: 25px solid green;
+    padding: 25px;
+    margin: 25px; /*水平居中用 auto*/
+    }
+
+    p.ex {
+    outline: 5px solid yellow; /*轮廓线，不占空间*/
+    outline-offset: 25px;/*轮廓线与元素边框的距离*/
+    } 
+
+    a {
+    text-decoration: none;
+    }
+
+    /* unvisited link */
+    a:link {
+    color: red;
+    }
+
+    /* visited link */
+    a:visited {
+      color: green;
+    }
+
+    /* mouse over link */
+    a:hover {
+     color: hotpink;
+    }
+
+    /* selected link */
+    a:active {
+     color: blue;
+    }
+    </style>
+
+    
+    
+</head>
+<body>
+    <!--
+    CSS 指的是层叠样式表* (Cascading Style Sheets)
+    CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
+    CSS 节省了大量工作。它可以同时控制多张网页的布局
+    外部样式表存储在 CSS 文件中-->
+
+    <p>每个段落都会受到样式的影响。</p>
+    <p id="para1">1111111</p>
+
+    <h1 class="center">居中的红色标题</h1>
+    <p class="center">居中的红色段落。</p> 
+
+    <!--行内CSS
+    在相关元素的 "style" 属性中定义
+    -->
+    <h1 style="color:blue;text-align:center;">This is a heading</h1>
+
+    <!--如果在不同样式表中为同一选择器（元素）定义了一些属性
+    则将使用最后读取的样式表中的值。
+    层叠顺序:行内样式（在 HTML 元素中）
+            外部和内部样式表（在 head 部分）
+            浏览器默认样式
+    -->
+
+    <!--边框颜色-->
+    <h1 style="border:2px solid Tomato;">Hello World</h1>
+    <h1 style="background-color:rgb(255, 99, 71);">...</h1><!--红绿蓝-->
+    <h1 style="background-color:#ff6347;">...</h1><!--十六进制-->
+    <h1 style="background-color:hsl(9, 100%, 64%);">...</h1><!--色相、饱和度和明度-->    
+
+    <p class="ex">5 像素的黄色实线轮廓。</p>
+
+    <p>没有下划线的链接：
+        <a href="https://www.w3school.com.cn">W3School.com.cn</a>
+    </p>
+
+    <h1>CSS 链接</h1>
+    <p><b><a href="/index.html" target="_blank">这是一个链接</a></b></p>
+    <!--在 CSS 定义中
+    a:hover 必须位于 a:link 和 a:visited 之后才能生效。
+    a:active 必须位于 a:hover 之后才能生效。-->
+
+    <!--导航菜单=链接列表-->
+    <ul>
+     <li><a href="#home">Home</a></li>
+    <li><a href="#news">News</a></li>
+    <li><a href="#contact">Contact</a></li>
+    <li><a href="#about">About</a></li>
+    </ul>
+
+</body>
+</html>
\ No newline at end of file
