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>
