CSS进阶知识点（第九课）

五寸执念*

已于 2024-10-02 22:38:26 修改

阅读量449

点赞数 12

分类专栏：前端文章标签： css 前端

于 2024-10-02 22:35:35 首次发布

本文链接：https://blog.csdn.net/2302_76722613/article/details/142680265

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、Emmet语法

1、快速生成HTML结构语法

①生成标签，直接标签名按enter键即可，例如：输入div，按enter键，就可以生成<div></div>

②生成多个相同标签，加上*即可，例如：输入div*3，按enter键，就可以生成3个<div></div>

③生成父子级关系的标签，可以用>，例如：输入ul>li，按enter键，可以生成<ul><li><li><ul>

④生成兄弟级关系的标签，可以用+，例如：输入div+p按enter键，可以生成<div></div><p></p>

⑤生成带有类名或者id名字的，直接写.类名或者 #类名即可

⑥生成的div类名带顺序，可以用自增符号$，例如：.color$*3

⑦生成的标签内部写内容可以用{}表示，例如：div{你好}

2、快速生成css样式

用首字母简写代替全称，例如：输入tac按enter键可以直接生成text-align: center;

二、css复合选择器

定义；建立在基础选择器之上的，由两个或两个以上的基础选择器进行组合形成的

常见种类：①后代选择器 ②子选择器 ③并集选择器 ④伪类选择器

1、后代选择器

定义：可以选择父元素里面的子元素，又称包含选择器

语法规范：元素1 元素2 { 样式声明 }

例如：

<head>
    <style>
        ol li {
            color: aquamarine;
        }

        ol li a {
            color: brown;
        }
    </style>
</head>

<body>
    <ol>
        不规范写法
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li>我是ol的孩子</li>
        <li><a href="#">我是ol的孙子</a></li>
    </ol>
</body>

ps：①元素1，元素2中间用空格隔开

②一般元素1是元素2的父级，但只要元素2是元素1的后代即可

2、子选择器

定义：只能选择作为某一元素最近一级子元素，可理解为选亲儿子元素

语法规范：元素1 > 元素2 { 样式声明 }

例如：

<head>
        .nav>a {
            color: rgb(26, 98, 222);
        }
    </style>
</head>

<body>
    <div class="nav">
        <a href="#">我是亲儿子</a>
        <p>
            <a href="#">我不是亲儿子</a>
        </p>
    </div>
</body>

ps：元素2必须是元素1的亲儿子

3、并集选择器

定义：可以选择多组标签，同时为他们定义相同的样式

语法规范：元素1，元素2{ 样式声明 }

<head>
    <style>
        div,
        p,
        .pig li {
            color: chocolate;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>光头强</span>
    <ul class="pig">
        <li>小猪佩奇</li>
        <li>乔治</li>
        <li>猪妈妈</li>
        <li>猪爸爸</li>

    </ul>
</body>

ps：①各选择器通过逗号隔开

②并集选择器通常用于集体声明

4、伪类选择器

定义：用于向某些选择器添加特殊的效果，比如给链接添加特殊效果等

基本语法特点：用冒号(:)表示如：：hover ：first-child

常见的伪类选择器

①a:link 选择所有未被访问的链接

②a:visited 选择所有已被访问的链接

③a:hover 选择鼠标指针位于其上的链接

④a:active 选择活动链接，鼠标按下未弹起的链接

<head>
    <style>
        a:link {
            color: #000;
            text-decoration: none;
        }

        a:visited {
            color: aqua;
        }

        a:hover {
            color: blue;
        }

        a:active {
            color: burlywood;
        }
    </style>
</head>

<body>
    <a href="#">懒羊羊</a>
</body>

ps：①为实现各自的效果，必须严格按照LVHA的顺序声明

②实际开发，经常用以下声明 a:link和a:hover

⑤:focus伪类选择器

定义：用于选取获得焦点的表单元素，焦点就是光标，一般情况<input>类表单元素才能获取

    <style>
        input:focus {
            background-color: yellow;
        }
    </style>
<body>
    <input type="text">
    <input type="text">
    <input type="text">
</body>

三、css元素显示模式

定义：元素标签是以什么方式显示

常见种类：①块元素和②行内元素

1、块元素

种类：<h1>--<h6>,<p>,<div>,<ul>,<ol>,<li>等

特点：①比较霸道，独占一行

②宽度、高度、行间距、内边距可以自行设置

③宽度默认为容器的100%

④是一个大的容器及盒子，里面可以放行内元素或者块级元素

⑤p标签和h标签里面不能放div标签

2、行内元素

种类：<a>，<strong>，<b>，<em>，<i>，<del>，<s>，<ins>，<u>，<span>等

特点：①相邻行内元素在一行上，一行可以显示多个

②宽度、高度设置无效

③默认宽度为其本身的内容的高度

④行内元素只能容纳文本或者其他行内元素，不允许放块元素

⑤a标签里面不能再放a标签，但是a标签里面可以放块级元素

3、行内块元素

种类：<img/>，<input/>，<td>

特点：①相邻的元素在同一行，但是他们之间也有空隙，一行可以显示多个元素

②默认宽度为本身内容宽度

③宽度、高度、外边距和内边距都可以控制

四、css元素显示模块转换

定义：一个模式的元素需要另外一种模式的特性

方法：行内元素转化为块级元素在声明里面添加 display：block；

块级元素转化为行内元素在声明里面添加 display：inline；

行内元素转化为行内块元素在声明里面添加 display：inline-block；

例如：

    <style>
        a {
            width: 500px;
            height: 500px;
            background-color: yellow;
            display: block;
        }

        div {
            width: 100px;
            height: 50px;
            background: red;
            display: inline;
        }

        span {
            width: 100px;
            height: 100px;
            background-color: pink;
            display: inline-block;
        }
    </style>
<body>
    <a href="#">喜羊羊</a>
    <div>小灰灰</div>
    <div>小灰灰</div>
    <span>美羊羊</span>
</body>

综合案例

小技巧：让文字垂直居中显示 line-height=height

    <style>
        a {
            display: block;
            width: 150px;
            height: 30px;
            background-color: #55585a;
            text-decoration: none;
            color: #fff;
            text-indent: 2em;
            line-height: 30px;
        }

        a:hover {
            background-color: #ff6700;
        }
    </style>
<body>
    <a href="#">手机 电话卡</a>
    <a href="#">电视 盒子</a>
    <a href="#">笔记本 平板</a>
    <a href="#">出行 穿戴</a>
    <a href="#">智能 路由器</a>
    <a href="#">健康 儿童</a>
    <a href="#">耳机 音响</a>

</body>