CSS3
在线运行 html、css、js
https://www.json.cn/run/html5/?filename=tryjsref_link_type
https://code.dk82.com/
https://tool.getman.cn/runjs/
https://htmlcssjs.57cha.com/
css内容格式
/* css注释，可有可无 */
【属性名】: 【属性值】;
【属性名】: 【属性值】;
......
css书写位置和引入方式
内部书写无需引入：
<html>
<head>
<title>【窗口标签内容】</title>
<style>
【css内容】
</style>
</head>
<body>
【窗口页面内容】
</body>
</html>
行内书写无需引入：
<html>
<head>
<title>【窗口标签内容】</title>
</head>
<body>
<html左标签 style="【css内容】">【窗口页面内容】<html右标签>
</body>
</html>
点击查看例子
<html>
<head>
<title>测试行内css</title>
</head>
<body>
<p style="color: purple; font-size: 40px;">测试内容</p>
</body>
</html>
外部书写需要引入：
<html>
<head>
<title>【窗口标签内容】</title>
<!-- 引入css -->
<link rel="stylesheet" href="【css文件的url】">
</head>
<body>
【窗口页面内容】
</body>
</html>
css选择器
标签选择器
【标签名】 {
}
id选择器
# 【id值】 {
}
类选择器
. 【class值】 {
}
通配符选择器
* {
}
后代选择器
<!-- xx标签内部所有层级中的xxxx标签-->
【xx标签名】 【xxxx标签名】 {
}
点击查看例子
<html>
<head>
<title>测试后代选择器</title>
<style>
div span {
color: purple;
}
</style>
</head>
<body>
<div>
<span>测试内容1</span>
<p>
<span>测试内容2</span>
</p>
<p>
<i>
<span>测试内容3</span>
</i>
</p>
</div>
</body>
</html>
子代选择器
<!-- xx标签内部的第一层级中xxx标签 -->
【xx标签名】 > 【xxx标签名】 {
}
点击查看代码
<html>
<head>
<title>窗口标签内容</title>
<style>
div > span {
color: purple;
}
</style>
</head>
<body>
<div>
<span>测试内容1</span>
<p>
<span>测试内容2</span>
</p>
<p>
<i>
<span>测试内容3</span>
</i>
</p>
</div>
</body>
</html>
伪类选择器(动作选择器)
<!-- link表示访问前 -->
<!-- visited表示访问后 -->
<!-- hover表示鼠标悬停 -->
<!-- active表示点击 -->
<!-- 选择同一个内容的多个动作时，选择器的书写顺序遵循lvha -->
【标签名/#id值/.class值/*】:【link/visited/hover/active】 {
}
点击查看代码
<html>
<head>
<title>测试伪类选择器</title>
<style>
/* 选中div标签的鼠标悬停动作 */
div:hover {
color: purple;
}
/* 选中id值为box的标签的鼠标悬停动作 */
#box:hover {
color: green;
}
/* 选中class值为sts的标签的鼠标悬停动作 */
.sts:hover {
color: orange;
}
</style>
</head>
<body>
<div>测试内容1</div>
<p id="box">测试内容2</p>
<p class="sts">测试内容3</p>
</body>
伪元素选择器（标签内容前后选择器）
/* before表示之前 */
/* after表示之后 */
【标签名/#id值/.class值/*】:【before/after】 {
/* content表示要添加的文本 */
/* 即使没有要添加的文本也要加content: "" 否则伪元素选择器不生效 */
content: "";
}
点击查看代码
<html>
<head>
<title>测试伪元素选择器</title>
<style>
p:before {
content: "之前---";
color: purple;
/* 背景色 */
background-color: green;
/* 内边距 */
padding: 10px;
}
p:after {
content: "--之后";
color: purple;
}
</style>
</head>
<body>
<div>测试内容1</div>
<p>测试内容2</p>
</body>
</html>
结构伪类选择器（内结构标签选择器）
/* 外结构标签中的第一个xxx内结构标签 */
【xxx标签名】:first-child {
}
/* 外结构标签中的最后一个xxx内结构标签 */
【xxx标签名】:list-child {
}
/* 外结构标签中的指定哪几个xxx内结构标签 */
【xxx标签名】:nth-child(【公式/数字】) {
}
点击查看代码
<html>
<head>
<title>测试结构伪类选择器</title>
<style>
li:first-child {
color:purple;
}
li:last-child {
color:green;
}
li:nth-child(2n) {
color:orange;
}
</style>
</head>
<body>
<ul>
<li>测试内容1</li>
<li>测试内容2</li>
<li>测试内容3</li>
<li>测试内容4</li>
<li>测试内容5</li>
</ul>
</body>
交集选择器
<!-- 同时满足多个条件的标签被选中 -->
【标签名/.class值】【标签名/.class值】... {
}
点击查看代码
<html>
<head>
<title>测试交集选择器</title>
<style>
p.box.sts {
color: purple;
}
</style>
</head>
<body>
<p class="box sts">测试内容1</p>
<p class="box">测试内容2</p>
<p class="sts">测试内容3</p>
</body>
并集选择器
......
【标签名/#id值/.class值】,
【标签名/#id值/.class值】 {
}
点击查看代码
<html>
<head>
<title>测试并集选择器</title>
<style>
div,
#sts,
.box {
color:purple;
}
</style>
</head>
<body>
<div>测试内容1</div>
<p id="sts">测试内容2</p>
<p class="box">测试内容3</p>
</body>
css盒子模型
css常用属性
/* 背景宽度 */
width: 100px;
/* 背景高度 */
height: 100px;
/* 背景色 */
background-color: purple;
/* 字体大小 */
font-size: 30px;
/* 文字颜色 */
color: blue;
/* 字体粗细 */
/*
属性值：
100 200 300 400 500 600 700 800 900
normal bold
*/
font-weight: normal;
/* 字体倾斜 */
/* 属性值：normal不倾斜 italic倾斜 */
font-style: italic;
/* 字体族 */
font-family: 楷体;
/* 字体复合属性 */
/* 字体不倾斜 字体不加粗 字体大小30px 字体行高2倍 字体族楷体 */
font: normal normal 30px/2 楷体;
/* 文字修饰线 */
/*
属性值：
none无修饰线
underline下划线
line-through删除线
overline上划线
*/
text-decoration: none;
/* 行高/行间距 */
/*
属性值：
数字 //2表示2倍行高，也就是32px
数字px //20px表示行高为20px
*/
line-height: 2;
/* 内容首行缩进 */
/*
属性值：
数字em //2em表示首行缩进2个字
数字px
*/
text-indent: 2em;
/* 内容横向对齐方式 */
/* 属性值：center与窗口居中对齐 left与窗口左对齐 rigth与窗口右对齐 */
text-align: center;
------------待续--------------------
浙公网安备 33010602011771号