CSS学习笔记——Day Two

最新推荐文章于 2024-07-26 08:00:00 发布

+ran

最新推荐文章于 2024-07-26 08:00:00 发布

阅读量128

点赞数 7

文章标签： css 学习笔记

本文链接：https://blog.csdn.net/2301_79729136/article/details/134562896

版权

CSS复合选择器

CSS复合选择器允许我们根据元素的特定属性、位置、类型等进行选择。以下是一些常见的复合选择器：

后代选择器：使用空格分隔两个元素，选择特定元素的所有后代。例如，div p 选择所有包含在 div 元素内的 p 元素。
子选择器：使用大于符号（>）分隔两个元素，选择特定元素的直接子元素。例如，div > p 选择所有直接包含在 div 元素内的 p元素。
并集选择器：使用英文逗号（,）分隔两个元素，选择多组标签，常用于集体声明。
链接伪类选择器：用于选择不同状态的链接（a:hover常用）
focus伪类选择器：主要针对表单元素，用于选取获得焦点（光标）的表单元素input:focus

 /* a 是标签选择器 所有的链接 */ 
 a { 
 color: gray;
 }
 /* :hover 是链接伪类选择器 鼠标经过 */
 a:hover { 
 color: red; /* 鼠标经过的时候，由原来的 灰色 变成了红色 */
 }

CSS显示模式

CSS 中有三种主要的显示模式：

CSS元素显示模式
特殊情况下，我们需要元素模式的转换，简单理解: 一个模式的元素需要另外一种模式的特性
转换为块元素（display:block;）是比较常用的

CSS背景

CSS 提供了许多属性来设置元素的背景，包括：
CSS背景

案例：简洁版小米侧边栏

案例的核心思路分为两步:

把链接a 转换为块级元素, 这样链接就可以单独占一行,并且有宽度和高度.
鼠标经过a 给链接设置背景颜色

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米</title>
    <style>
        a {
            /* 把a设置为块级元素 */
            display: block;
            /* 设置背景元素 */
            background: #55585a;
            /* 设置宽高 */
            width: 230px;
            height: 40px;
            /* 设置字体属性 */
            font-size: 14px;
            /* 设置文本属性 */
            color: white;
            text-decoration: none;
            text-indent: 2em;
            /* 单行文字垂直居中 */
            line-height: 40px;
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>
</head>

<body>
    <a href="">手机 电话卡</a>
    <a href="">电视 盒子</a>
    <a href="">笔记本 平板</a>
    <a href="">出行 穿戴</a>
    <a href="">智能 路由器</a>
    <a href="">健康 儿童</a>
    <a href="">耳机 音响</a>
</body>

</html>

页面效果如下：

小技巧

吸取任意网页中的图片
使用浏览器的开发者工具（右键点击页面上的任意位置选择"检查"来打开）。在开发者工具中，找到"Elements"（元素），可以看到网页的HTML源代码。找到想要获取的图片的HTML标签，右击选择‘在新标签页打开’，即可获得所需图片。
单行文字垂直居中
让文字的行高等于盒子的高度就可以让文字在当前盒子内垂直居中