入门（二）"/>
【前端学习】CSS入门（二）
目录
- 一、CSS高级选择器（复合选择器）
- 1、 【常用】后代选择器
- 2、子元素选择器
- 3、 【常用】并集选择器
- 二、伪类选择器
- 1、链接伪类选择器
- 2、focus伪类选择器
- 三、背景、阴影、圆角边框
- 1、背景
- 2、阴影
- 3、圆角边框
一、CSS高级选择器（复合选择器）
1、 【常用】后代选择器
<style>.name p{ color: red; } /* 指name这个类中的<p> */</style>..................................................................<body><div class="name"><h1> 标题 </h1><p> 一段文字</p></div></body>
如图，选择器只对name的“后代”进行了选择
2、子元素选择器
<style>.cont > a{ color: red; } /* 指向c这个类中最外层（儿子）的<a> */</style>..................................................................<body><div class="cont"><a href="#"> 我是儿子 </a><p> <a href="#"> 我是孙子 </a> </p></div></body>
如图，选择器只对cont的“儿子”（最外层的）元素进行了选择
3、 【常用】并集选择器
<style>.a,.b,.c{background-color: pink;}/* 同时选择了a,b,c三类 */</style>..................................................................<body><div class="a">a</div><div class="b">b</div><div class="c">c</div></body>
用“ ，”隔开每一项，同时选择他们
二、伪类选择器
1、链接伪类选择器
- a:link{} 选择所有没有被访问（点击）的链接
<style>a:link{color: #000;text-decoration: none;}a:visited{color: gray;/* 被访问过的链接变为灰色 */}</style>
..................................................................<body><a href="#">没被访问过的链接1</a><a href="##">已经访问过的链接2</a><a href="###">没被访问过的链接3</a></body>
- a:visited{} 选择被访问（点击）过的链接
- 具体操作和样例详见上文
- 测试心得：清除visited缓存需要通过删除浏览记录来完成！
- a:hover{} 选择鼠标移过的链接
<style>a:link{color: #000;text-decoration: none;}a:hover{color: aqua;}</style>
..................................................................<body><a href="#">链接1</a><a href="##">链接2</a><a href="###">链接3</a></body>
划过就变色
- a:active{} 选择鼠标键正在按下还未抬起的链接
<style>a:link{color: #000;text-decoration: none;}a:active{color:orange;}</style>
..................................................................<body><a href="#">链接1</a><a href="##">链接2</a><a href="###">链接3</a></body>
按住就变色
- L（link）、V（visited）、H（hover）、A（active）顺序不能变！
2、focus伪类选择器
- focus指焦点即光标，选择光标选中的输入框
- 一般用于选取form表单元素
<style>input:focus{background-color: skyblue;}</style>
..................................................................<body><form action=""><input type="text"><input type="text"><input type="text"></form></body>
被光标选中后，文本框背景变为skyblue
三、背景、阴影、圆角边框
1、背景
- 背景颜色
<style>.a{margin: 20px;border: 2px solid;height: 200px;width: 200px;background-color: pink;}</style>
..................................................................<body><div class="a">给这个div换个背景</div></body>
- 背景图片
<style>.a{margin: 20px;border: 2px solid;height: 200px;width: 200px;background-image: url(images/image.jpg);}</style>
..................................................................<body><div class="a"></div></body>
background-image: url() || none;
- 背景平铺（默认平铺）
<style>.a{margin: 20px;border: 2px solid;height: 400px;width: 400px;background-image: url(images/csdn-logo.png);background-repeat: repeat || no-repeat || repeat-x || repeat-y;}</style>
..................................................................<body><div class="a"></div></body>
图例为repeat-y（沿y轴平铺）
- 背景位置——方位名词
第一个x坐标，“空格”后为y坐标，下同
<style>.a{margin: 20px;border: 2px solid;height: 400px;width: 400px;background-repeat: no-repeat;background-position: left bottom; /* 方位为左下 */}</style>
..................................................................<body><div class="a"></div></body>
方位名词：center || left || right || top || bottom（当指定了x轴方位y省略时，其默认居中）
- 背景位置——精确单位
<style>.a{margin: 20px;border: 2px solid;height: 400px;width: 400px;background-repeat: no-repeat;background-position: 20px 50px; /* 以左上角为原点，沿x轴方向向右20px，沿y轴方向向左50px */}</style>
..................................................................<body><div class="a"></div></body>
使用精确单位把背景图移至目标方位
-
背景位置——混合单位【常用】
把方位名词和精确单位混合使用，切记先x坐标后y坐标不能乱！
- 背景固定（背景附着）
<style>.a{text-indent: 100px;color: #fff;font-size: larger;margin: 20px;border: 2px solid;height: 1200px;width: 1200px;background-image: url(images/巴萨.jpeg);background-repeat: repeat-y;background-attachment: fixed || scroll; /* fixed-固定悬浮不动；scroll-随对象内容滚动 */}</style>
..................................................................<body><div class="a">p{Farca Barca}*20</div></body>
如上图即为fixed情况，此时repeat-y不会被应用
上图为scroll情况
- 背景属性复合写法【常用，节省代码】
<style>.a{background: color（颜色） url（图片地址） repeat（平铺） scroll/fixed（滚动/固定） position（位置）;}</style>
- 背景颜色透明度
<style>.a{color: #fff;font-size: larger;margin: 40px auto;height: 410px;width: 295px;background-image: url(images/梅西.jpg);}.b{width: 295px;height: 90px;text-align: center;font-size: 25px;line-height: 90px;background-color: rgba(0, 0, 0, 0.6);/* 给rgb属性设置透明度（alpha），取值范围在0~1之间（0.6可简写为.6） */}.blank{width: 295px;height: 320px;background-color: transparent;}</style>
..................................................................<body><div class="a"><div class="blank"></div><div class="b">小将梅西</div></div></body>
rgba（red，green，blue，alpha）中alpha为透明度值，取值范围在0~1之间（0.6可简写为.6）
2、阴影
- 盒子阴影
<style>.a{color: #fff;font-size: larger;margin: 40px auto;height: 410px;width: 295px;background-image: url(images/梅西.jpg);box-shadow: 16px 16px 10px -4px rgba(0, 0, 0, .3);}</style>
..................................................................<body><div class="a"><div class="blank"></div><div class="b">小将梅西</div></div></body>
box-shadow: h-shadow水平阴影位置（允许负值） v-shadow垂直阴影位置（允许负值） blur模糊程度 spread阴影尺寸 color inset内外阴影;
- 阴影位置允许使用负值，负值时阴影会出现在左侧和上侧
- spread、inset属性可选，可以省略
- 通常在设置color颜色属性时使用rgba()，用于设置阴影透明度
- 阴影不占用空间，，不影响盒子排列
- 盒子阴影可配合：hover伪类选择器使用
- 文字阴影
text-shadow: h-shadow v-shadow blur color;
3、圆角边框
- 代码
border-radius: 10px;
-
原理
border-radius: x px; 中的x值即为处在四个角上圆的半径
- 圆角边框的使用
border-bottom-left-radius: 20px;border-bottom-right-radius: 20px;border-radius: 20px 20px 20px 20px; /* 简写属性，顺序依次为：上、下、左、右 */
可以独立调整盒子的上下左右圆角；简写属性，顺序依次为：上、下、左、右
更多推荐
【前端学习】CSS入门（二）
发布评论