CSS

.css

/*
  author: weiyupeng
  date: 2023/7/8 10:09
*/

#para2 {
  font-size: xxx-large;
}

/*背景样式*/
body {
  /*背景色*/
  background-color: mintcream;
  /*背景图*/
  background-image: url("../image/img1.png");
  /*背景图是否重复*/
  background-repeat: repeat-x;
  /*背景图是否随浏览器的滚动而滚动*/
  /* scroll 随页面滚动（默认），fixed 固定的，local 随元素滚动 */
  background-attachment: fixed;
  /*背景图位置*/
  background-position: center top;
}

/*文本格式*/
#para3 {
  /*颜色*/
  color: red;
  color: #ff0000;
  color: rgba(255,0,0);
  color: rgba(255,0,0,0.6);
  /*对齐方式*/
  text-align: left;
  /*文本修饰*/
  text-decoration: overline line-through underline;
  /*文本转换*/
  text-transform: capitalize; /* 大小写 uppercase lowercase */
  /*文本首行缩进*/
  text-indent: 50px;
  /*文本方向*/
  direction: revert;
  /*字符间距*/
  letter-spacing: 5px;
  /*行高*/
  line-height: 25px;
  /*文本阴影*/
  text-shadow: 1px 1px #ff00c8;
  /*处理空白部分*/
  /*
    pre	空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
    nowrap	文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
    pre-wrap	保留空白符序列，但是正常地进行换行。
    pre-line	合并空白符序列，但是保留换行符。
    inherit	规定应该从父元素继承 white-space 属性的值。
  */
  white-space: normal;
}

/*字体*/
#para4 {
  /*字体*/
  font-family: Monospaced, "Lucida Console", serif;
  /*样式 italic 斜体，oblique 斜体(倾斜角度)，normal 正常 */
  font-style: oblique 2deg;
  /*绝对大小*/
  /*font-size: 30px;*/
  /*font-size: 0.5em;*/
  /*相对大小*/
  font-size: 200%;
  /*粗细*/
  font-weight: bolder;
}

/*链接*/
/* 未访问链接 */
a:link {

}
/* 已访问链接 */
a:visited {

}
/* 鼠标聚焦，鼠标点击 */
a:hover, a:active {

}

/*列表*/
ul.class1 {
  list-style-type: square;
  color: red;
  list-style-image: url("../image/img2.png");
  /*位置 默认outside*/
  list-style-position: inside;
}
ol.class1 {
  list-style-type: upper-roman;
  color: green;
}

/*表格*/
table {
  border-collapse: collapse;

}
th {
  border: 2px solid blue;
  width: 200px;
}
td {
  border: 2px solid green;
  height: 50px;
  text-align: right;
  vertical-align:bottom;
  /*填充*/
  padding:25px;
}

/*盒子模型 margin边距、border边框、padding填充、content内容 */
div {
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
}

/* border 边框 */
/*无边框*/
p.none {border-style: none}
/*点线边框*/
p.dotted {border-style: dotted; border-width: 5px; border-color: red}
/*实线边框*/
p.solid {border-style: solid; border-width: 5px}
/*虚线边框*/
p.dashed {border-style: dashed; border-width: 5px}
/*双线边框*/
p.double {border-style: double; border-width: 5px}
/*3D沟槽边框*/
p.groove {border-style: groove; border-width: 5px}
/*3D脊边框*/
p.ridge {border-style: ridge; border-width: 5px}
/*3D嵌入边框*/
p.inset {border-style: inset; border-width: 5px}
/*3D突出边框*/
p.outset {border-style: outset; border-width: 5px}
p.class3 {
  border-top-style:dotted;
  border-right-style:solid;
  border-bottom-style:dashed;
  border-left-style:double;
  border-width: 10px;
  border-right-color: red;
  border-color: blue; /*后写blue样式能把前面的red覆盖*/
  border-bottom-color: red;
  /*圆角*/
  border-radius: 30px;
}

/* outline 轮廓，在 border 外面一圈 */
/* 属性和 border 类似 */
p.class4 {
  outline-color: green; /*虽然是先写的，但是粒度小，所以优先级高，覆盖了下边的 outline*/
  outline: #42b983 dotted thick;
}

/* margin 外边距 */
p.class5 {
  /* 上右下左*/
  margin: 20px 30px 50px 10px;
  margin-left: 50px;
}

/* padding 填充 */
p.class6 {
  padding: 20px 30px 50px 10px;
}

/*
  分组和嵌套选择器
    p{ }: 为所有 p 元素指定一个样式
    .class-1{ }: 为所有 class="class-1" 的元素指定一个样式
    .class-1 p{ }: 为所有 class="class-1" 元素内的 p 元素指定一个样式
    p.class-1{ }: 为所有 class="class-1" 的 p 元素指定一个样式（只有p元素能用）
*/

/*尺寸*/
p.class7 {
  /*元素高度*/
  height: 100px;
  /*行高*/
  line-height: 40px;
  /*元素最大高度*/
  max-height: 100px;
  /*元素最大宽度*/
  max-width: 1000px;
}

/*隐藏*/
p.class8 {
  /*仍占用空间*/
  visibility: hidden;
  /*彻底消失*/
  display: none;
}

/* position 定位 */
/* static 默认值 正常显示 */
div.static {
  position: static;
  border: 3px solid rgba(139, 0, 0, 0.8);
}
/* fixed 绝对位置 不随页面滚动 */
div.fixed {
  position: fixed;
  border: 3px solid rgba(139, 0, 0, 0.8);
  top:30px;
  right:5px;
}
/* relative 相对位置 相对于原来的位置 */
div.relative {
  position:relative;
  left: 50px;
  bottom: 32px;
  border: 3px solid rgba(139, 0, 0, 0.8);
}
/* absolute 相对位置 相对于父元素，没有父元素则相对于整个html页面*/
p.absolute {
  border: 3px solid rgba(139, 0, 0, 0.8);
  position: absolute;
  left: 10px;
  top: 15px;
}
/* sticky 定位，滚动到其它地方时不会消失，悬浮到设置的位置 */
div.sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 10px;
  background-color: green;
  z-index: -1;
}
/*重叠的元素，覆盖顺序*/
div.class2 {
  /*数字大的显示在上面*/
  z-index: -2;
}

/*
overflow 元素溢出布局时策略
  visible	默认值。内容不会被修剪，会呈现在元素框之外。
  hidden	内容会被修剪，并且其余内容是不可见的。
  scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
  inherit	规定应该从父元素继承 overflow 属性的值。
*/
div.overflow {
  width: 400px;
  height: 50px;
  background-color: #42b983;
  overflow: scroll;
}

/* float 浮动 */
img.class1 {
  float: left;
}
img.class2 {
  /* 取消浮动 按正常顺序显示 */
  clear: both;
}

/* 对齐 */
.center {
  /*元素对齐*/
  margin: auto;
  width: 50%;
  border: 3px solid green;
  padding: 10px;
  /*文字对齐*/
  text-align: right;
}

/*
组合选择符
  后代选择器(以空格   分隔)：div p 选取所有 <p> 元素插入到 <div> 元素中
  子元素选择器(以大于 > 号分隔）：div>p 选取 <div> 元素中所有直接/一级子元素 <p>
  相邻兄弟选择器（以加号 + 分隔）：div+p 选取了所有位于 <div> 元素后的第一个 <p> 元素
  普通兄弟选择器（以波浪号 ~ 分隔）：div~p 所有 <div> 元素之后的所有相邻兄弟元素 <p>
*/

/*
伪类、伪元素：添加一些选择器的特殊效果，css自带一些函数
*/

/*导航栏 = 链接列表*/
#ul1 {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
a.a1 {
  display:block;
  width:60px;
}

/*下拉菜单*/
.dropdown-content {
  display: none;
  position: absolute;
  background-color: red;
  min-width: 16px;
  box-shadow: 0 8px 8px 0 rgba(0,99,210,0.8);
  padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
  display: block;
}

/*提示工具*/
/* Tooltip 容器 */
.tooltip {
  position: relative;
  display: inline-block;
  border: 1px dotted black; /* 悬停元素上显示点线 */
}
/* Tooltip 文本 */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
  /* 定位 */
  position: absolute;
  z-index: 1;
}
/* 鼠标移动上去后显示提示框 */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*计数器*/
body {
  counter-reset: Section;
}
h2::before {
  counter-increment: Section;
  content: "Section " counter(section) ": ";
}

/*嵌套计时器*/
body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}
h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}
h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="author" content="weiyupeng">
  <meta name="time" content="2023/7/8 10:31">
  <meta charset="UTF-8">
  <title>CSS</title>
  <link rel="stylesheet" type="text/css" href="../css/demo01.css">
</head>

<!--内部样式表-->
<!-- 优先级：内联样式 > 内部样式 > 外部样式 -->
<style>
  /*
    css 基本语法：
      选择器 {属性1:值1; 属性2:值2; ...}
  */
  /**/
  h4 {
    color: red;
    text-align: center;
    font-family: Arial, serif;
  }

  /* id 选择器 */
  #para1 {
    color: #42b983;
  }

  /* class 选择器 */
  .para-class1 {
    color: forestgreen;
    font-size: large;
  }
  .class2 {
    text-align: right;
  }

</style>

<body>
<h4>H4</h4>
<p id="para1">para1段落</p>
<p class="para-class1">para-class1段落</p>
<!-- 两个类选择器，用空格分开 -->
<p class="para-class1 class2">para-class1段落</p>
<p id="para2">para2段落，样式引用外部样式表</p>
<p id="para3">para3段落，样式引用外部样式表<br>para3段落，样式引用外部样式表</p>
<p id="para4">para4段落，样式引用外部样式表</p>
<ul class="class1">
  <li>la</li>
  <li>lb</li>
  <li>lc</li>
</ul>
<ol class="class1">
  <li>la</li>
</ol>

<table>
  <tr>
    <th>姓名</th>
    <th>年龄</th>
  </tr>
  <tr>
    <td>weiyupeng</td>
    <td>27</td>
  </tr>
</table>

<p class="dotted">段落</p>
<p class="solid">段落</p>
<p class="dashed">段落</p>
<p class="double">段落</p>
<p class="groove">段落</p>
<p class="ridge">段落</p>
<p class="inset">段落</p>
<p class="outset">段落</p>
<p class="class3 class4 class5 class6">段落<br>段落<br>段落</p>
<p class="class7">段落<br>段落<br>段落</p>

<div class="static">
  <p>static段落</p>
</div>
<div class="fixed">
  <p>fixed段落</p>
</div>
<div class="relative">
  <p>relative段落</p>
  <p class="absolute">
    absolute段落
  </p>
</div>
<p class="absolute">
  absolute段落
</p>
<div class="sticky">
  <p>sticky段落</p>
</div>
<div class="overflow">
  <img class="class1" src="../image/logo.png"/>
  <p>overflow段落<br>overflow段落<br>overflow段落<br>overflow段落<br>overflow段落<br></p>
</div>
<div class="overflow">
  <img class="class2" src="../image/logo.png"/>
  <p>overflow段落<br>overflow段落<br>overflow段落<br>overflow段落<br>overflow段落<br></p>
</div>

<div class="center">
  <p>段落段落段落段落段落段落</p>
</div>

<ul id="ul1">
  <li><a class="a1" href="#home">主页</a></li>
  <li><a class="a1" href="#discover">发现</a></li>
  <li><a class="a1" href="#mine">我的</a></li>
</ul>

<div class="dropdown">
  <span>我是下拉菜单</span>
  <div class="dropdown-content">
    <p>选项1</p>
    <p>选项2</p>
  </div>
</div>

<div class="tooltip">鼠标移动到这
  <span class="tooltiptext">提示文本</span>
</div>

<h1>CSS 计数器</h1>
<h2>HTML</h2>
<h2>CSS</h2>
<h2>JavaScript</h2>

<h1>HTML 教程:</h1>
<h2>HTML 教程</h2>
<h2>CSS 教程</h2>
<h1>Scripting 教程:</h1>
<h2>JavaScript</h2>
<h2>VBScript</h2>
<h1>XML 教程:</h1>
<h2>XML</h2>
<h2>XSL</h2>

</body>
</html>