【初入前端】第三课 课前预习

---

一、css高级选择器

1.后代选择器

后代选择器又称为包含选择器，其语法如下（表示选择元素1里面的所有元素2）：
元素1 元素2 { 样式声明 }

<style>
	ol li { color:pink; }
	ol li a { color:red;}
</style>

• 中间用空格隔开；
• 最终是元素2使用该样式；
• 元素2可以是儿子，也可以是孙子等，只要是元素1的后代即可；
• 元素1和元素2可以是任意基础选择器。

2.子选择器

子选择器只能选择某元素的最近一级子元素，简单理解就是选择亲儿子元素。其语法如下：
元素1 > 元素2 { 样式声明 }

<style>
	.son>a {color:pink;} /类选择器
</style>

• 中间用 “>” 隔开；
• 最终是元素2使用该样式；
• 元素2必须是亲儿子，其孙子辈的都不归他管。

3.并集选择器

并集选择器可以选择多组标签，同时为他们定义相同的样式，通常用于集体声明。其语法如下：
元素1，元素2 { 样式声明 }

<style>
	div,
	p,
	.and { color:pink; }
</style>

• 中间用 “，” 隔开，可以理解为和的意思；
• 并集选择器通常用于集体声明。

---

二、伪类选择器

1.链接伪类选择器

• a:link 选择所有未被访问的链接；
• a:visited 选择所有已被访问的链接；
• a:hover 选择鼠标指针位于其上的链接；（常用）
• a:active 选择活动链接；

<style>
	a { color: black; }     <--原：黑色-->
	a:hover { color:pink; } <--鼠标位于其上：粉色-->
</style>

2.focus伪类选择器

• focus伪类选择器用于获取焦点的表单元素；
• 一般情况，<input>类表单元素才能获取光标，此选择器主要针对表单元素来表示。
• 其语法如下：

input:focus {
	background-color:yellow; /点击文本框等即变为黄色
}

3.总结

复合选择器总结如下：

---

三、盒子模型

1.边框 border

• -width: px; --设置边框宽度
• -style: none /dotted（点）/dashed（虚线）/solid（实线）; --设置边框线条类型
• -color: pink; --设置边框宽度
• -collapse:collapse; --设置细线
• 复合写法： border :1px solid pink;
  分开写法： border-top :1px solid pink; border-bottom :1px solid pink;

2.内边距 padding

• -top / -bottom / -left / -right 设置不同方位的内边距
• 复合写法：

	.box{
			padding:5px; <--上下左右都是5px-->
			padding:5px 10px; <--上下5px,左右10px-->
			padding:5px 10px 20px; <--上5px,左右10px,下20px-->
			padding:5px 10px 20px 30px; <--上下左右-->
	}

3.外边距 margin

• -top / -bottom / -left / -right 设置不同方位的内边距；
• 复合写法与外边距padding相同；
• 设置外边距可以让块级盒子居中：width:20px; margin:0 auto;
• 让行内元素或行内块元素居中，给其父元素添加 text-align:center即可。
  

---

四、背景、阴影、圆角边框

1.背景 bcakground

• 背景颜色-color:pink;
• 背景图片-image:url (#)；
• 背景平铺-repeat : repeat、no-repeat、repeat-x、repeat-y;
• 背景方位-position：x y ; （可填写top、center、bottom、left、right等方位，也可以填写具体方位如20px）
• 背景固定 -attachment：scroll（默认，滚动）、fixed（固定）；
• 背景透明度：background：rgba（0，0，0，a）
• 复合写法：

<style>
	.box {
		background: pink url(#) no-repeat fixed center top; }
		<--顺序为：颜色、地址、平铺、滚动、位置-->
</style>

2.阴影 box-shadow、text-shadow

盒子阴影 box-shadow：

• css3中新增了盒子阴影，我们使用box-shadow属性为盒子增加阴影。
• 语法：box-shadow: h-shawow v-shadow blur spread color inset;
  

文字阴影 text-shadow

• 在css3中，我们可以使用text-shadow属性将阴影应用于文本。
• 语法：text-shadow: h-sahdow v-shadow blur color ;

3.圆角边框 border-radius

• 设置圆角边框格式：border-radius: px ;
• 代码示例：

.round {
	width:20px;
	height:20px;
	border-radius:50px; <--圆形-->
	<--圆角矩形：border-radius后的数据为height的一半-->

---

感谢您的浏览！