复合选择器

后代选择器

子代选择器

并集选择器

交集选择器

hover悬浮效果

Emmet语法

记忆	示例	效果
标签名	div	<div></div>
类选择器	.red	<div class="red"></div>
id选择器	#one	<div id="one"></div>
交集选择器	p.red#one	<p class="red" id="one"></p>
子代选择器	ul>li	<ul><li></li></ul>
内部文本	ul>li(li的内容)	<ul><li>li的内容</li></ul>
创建多个	ul>li*3	<ul><li></li><li></li><li></li></ul>

背景

background-color

background-image

<div>文字</div>

div {
  width: 200px;
  height:200px;
  /* 会被下面的image属性覆盖掉 */
  background-color: orange;
  background-image: url(/html/dog.gif);
}

background-repeat

<div>文字</div>

div {
  width: 400px;
  height:200px;
  background-image: url(/css/quanquan.png);
  background-repeat: repeat-x;
}

background-position

<div>文字</div>

div {
  width: 600px;
  height:200px;
  background-image: url(/html/dog.gif);
  /* 禁止重复 */
  background-repeat: no-repeat;
  background-position: -50px -100px;
}

background复合写法

/* 不分先后顺序 背景色  背景图  背景图平铺  背景图位置 */
/* background: pink url(/html/dog.gif) no-repeat center bottom; */
/* 背景图位置如果是英文单词可以颠倒顺序 */
background: pink url(/html/dog.gif) no-repeat bottom center ;

/* 测试背景图位置如果是数值 不要颠倒顺序 */
/* 水平50px, 垂直100px */
/* background: pink url(/html/dog.gif) no-repeat 50px 100px; */
background: pink url(/html/dog.gif) no-repeat 100px 50px;

display

行内

块

行内块

img {
    width: 100px;
    height: 100px;
}

<img src="/css/quanquan.png" alt="">
<img src="/css/quanquan.png" alt="">

警告

标签嵌套

• p 和 h标题不能相互嵌套

• p里面不能包含div

:::

注意

CSS继承性并不能全部继承父级全部属性

更新日志

2025/3/17 09:50

查看所有更新日志

• 71d75-fix(theme): 🐛 修复主题升级后的新配置选项导致的部署失败于 2025/3/17
• 9f65c-feat: ✨ demo于 2025/2/27
• 0e103-fix:全文搜索样式于 2025/2/16
• 98593-feat(408): ✨ 移除408内容，替换为980于 2024/12/15
• 1946f-添加布尔运算于 2024/12/9
• 54429-feat: ✨ 添加PPT模块于 2024/12/7
• 51ebd-docs: 初始版本于 2024/9/22

版权所有

版权归属：passwordgloo

许可证：署名-相同方式共享 4.0 国际 (CC-BY-SA-4.0)