CSS学习（四）

最新推荐文章于 2024-05-31 14:44:29 发布

恶龙咆大哮

最新推荐文章于 2024-05-31 14:44:29 发布

阅读量269

点赞数

文章标签： css 学习 vscode

本文链接：https://blog.csdn.net/lhz1315937650/article/details/123350025

版权

一 Emmet语法

Emmet是用缩写来提高html/css的编写速度，在Vscode内部已集成该语法。

1 快速生成HTML结构语法。

1.快速生成标签只需输入标签名然后tab键。

2.快速生成多个相同的标签在标签后面加上*即可。

3.如果有从属关系使用>，例如ul>li就可以了。

4.如果有平行关系就使用+，例如div+p.

5.生成带类名或者id时，可直接使用.red或则#red。

6.如果想要使用自增的操作，使用自增符号$。

7.想要快速生成标签内部的内容，使用{}，例如div{你好}+tab键。

2 快速生成CSS样式。

CSS采用简写的方式单词的第一个字母+数字。

例如w100表示width: 100px;

二复合选择器

复合选择器是建立在基础选择器上的，对基础选择器进行组合而形成的。

常用的复合选择器有：后代选择器，子选择器，并集选择器，伪类选择器等等。

2.1 后代选择器

后代选择器有别叫为包含选择器，可以选择父元素里面的子元素。

语法规范：

元素1 元素2 {样式声明}（选择1里面的2 两个元素之间用空格隔开）

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后代选择器</title>
    <style>
        ol li {
            color: red;
        }
    </style>
</head>

<body>
    <ol>
        <li>我是ol</li>
        <li>我是ol</li>
        <li>我是ol</li>
    </ol>
    <ul>
        <li>我是ul</li>
        <li>我是ul</li>
        <li>我是ul</li>
    </ul>
</body>

</html>

2.2子选择器

子选择器只能选择作为某一元素的最近一级的子元素。

语法：

元素1>元素2{样式声明} 表示选择选择元素1里面所有的最近一级的元素2.

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>子选择器</title>
    <style>
        .gary>a{
            color: red;
        }
    </style>
</head>

<body>
    <div class="gary">
        <a href="#">你好</a>
        <p>
            <a href="#">他好</a>
        </p>
    </div>
</body>

</html>

2.3并集选择器

并集选择器可以选择多组标签，为他们定义相同的样式。

并集选择器是各选择器通过，连接。

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

并集选择器一般竖着写标签名。

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>并集选择器</title>
    <style>
        div,
        p,
        .yang li {
            color: red;
        }
    </style>
</head>

<body>
    <div>熊大</div>
    <p>熊二</p>
    <span>喜羊羊</span>
    <ul class="yang">
        <li>懒洋洋</li>
        <li>美羊羊</li>
        <li>沸羊羊</li>
    </ul>
</body>

</html>

2.4伪类选择器

伪类选择器用于向某些选择器添加特殊效果，最大的特点是用冒号表示（:）比如:hover, :first-child.

链接伪类选择器

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

a;visited 选择已经被访问的链接

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

a:active 选择活动链接

链接伪类的注意事项：

为了确保可以生效保证link vistited hover active书写顺序

a链接在浏览器中有默认的样式，所以在实际开发中需要给链接单独的样式。

focus伪类选择器

用于选取获得焦点的表单元素。

input focus{

background-color:yellow;

}

三 CSS元素显示模式

网页的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的来布局我们的网页。

元素显示模式就是标签以什么方式进行显示，比如<div>独占一行，一行中可以有多个<span>标签。

1.HTML元素一般分为块元素和行内元素两种类型

1 块元素

常见的块元素有<h1>~<h6>,<p>,<div>,<ul>,<li>,<ol>等等。

块元素的特点：

1.自己独占一行。

2.高度，宽度，外边距以及内边距都是可以控制的

3.宽度默认是容器的100%。

4.其是一个容器及盒子，里面可以放行内或者快级元素。

注意：文字类的元素不能使用块级元素，（<p>里面不能放块级元素，特别是不能放<div>，同理，<h1>~<h6>也不能放。）

2.行内元素

常见的行内元素有<a>,<strong>,<b>,<em>,<span>

其中<span>标签是最经典的行内元素。

3.行内块元素

在行内元素里有几个特殊的标签，例如<img/>,<input>,<td>,他们同时具有块元素和行内元素的特点。

特点：当相邻的行内块元素在同一行时，他们之间有空隙，一行可以显示多个。

默认的宽度就是它自身的宽度。

高度，行高，外边距以及内边距都是可以控制的。

2.元素显示模式的转换

就是一个模式的元素想要另外一种模式的特性。

转化为块元素：display:block;

转化为行内元素：display:inline;

转化为行内块元素：display:inline-block;

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示模式转化</title>
    <style>
        a {
            width: 150px;
            height: 60px;
            background-color: blue;
            display: block;
        }
    </style>
</head>

<body>
<a href="#">你好</a>
</body>

</html>

3.小工具使用snipaste

一个强大的截图工具，可以将截图贴回到屏幕上。

Snipaste 下载(下载链接)

快捷键 F1截图同时显示大小，并且可以直接修改。

F3截的图在桌面显示。

摁住alt可以取色。（shift可以换你选取颜色的模式）

恶龙咆大哮

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习（四）

一，Emmet语法Emmet是用缩写来提高html/css的编写速度，在Vscode内部已集成该语法。1 快速生成HTML结构语法。1.快速生成标签只需输入标签名然后tab键。2.快速生成多个相同的标签在标签后面加上*即可。3.如果有从属关系使用>，例如ul>li就可以了。4.如果有平行关系就使用+，例如div+p.5.生成带类名或者id时，可直接使用.red或则#red。6.如果想要使用自增的操作，使用自增符号$。7.想要快速生成标签内部的内容，使用{}，例
复制链接

扫一扫