复合选择器

后代选择器

子代选择器

并集选择器

交集选择器

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继承性并不能全部继承父级全部属性