前端学习【CSS】

最新推荐文章于 2023-02-24 19:55:59 发布

_Vrtual .

最新推荐文章于 2023-02-24 19:55:59 发布

阅读量64

点赞数 2

文章标签： css 前端 html

本文链接：https://blog.csdn.net/weixin_61466362/article/details/122753001

版权

一、emmet语法

1、快速生成HTML结构语法

生成标签：直接输入标签名按tab键即可，比如div 然后tab键，就可以生成
如果想要生成多个相同标签，加上*就可以，比如div*3 然后tab键就可以生成3个div
如果有父子级关系的标签，用>就可以了，比如ul > li 然后tab键
如果有兄弟关系的标签，用+就可以了，比如div+p 然后tab键
如果生成带有类名或者id名字的，直接写p.demo或者ul>li#two tab键就可以了
如果生成的div类名是有顺序的，可以用自增符号$，比如.demo$*5
如果想在生成的标签里面默认显示几个文字，可以用{}号，比例div{学习使我快乐}

2、快速生成CSS结构语法

CSS本采用简写形式即可，比如：

w200 按tab键，就可以生成width: 200px;
lh26 按tab键，就可以生成line-height: 26px;
tdn 按tab键，就可以生成text-decoration: none;

3、快速格式化代码
VS Code可以右键选择可视化代码（Ctrl + Shift + f）,也可以通过设置emmet来实现按Ctrl + s时自动格式化代码，方法如下：

1、文件-->【首选项】-->【设置】
2、搜索emmet.include
3、在settings.json下的【用户】中添加以下语句：
“editor.formatOnType”: true,
"editor.formatOnSave": true
只需设置一次即可，以后都可以自动保存格式化代码

二、复合选择器

复合选择器是由两个或多个基础选择器，通过不同的方式组合而成的,目的是为了可以选择更准确更精细的目标元素标签。

并集选择器

并集选择器（CSS选择器分组）是各个选择器通过<strong style="color:#f00">逗号</strong>连接而成的，任何形式的选择器（包括标签选择器、class类选择器id选择器等），都可以作为并集选择器的一部分。如果某些选择器定义的样式完全相同，或部分相同，就可以利用并集选择器为它们定义相同的CSS样式。并集选择器和的意思，就是说，只要逗号隔开的，所有选择器都会执行后面样式。比如 .one, p , #test {color: #F00;} 表示 .one 和 p 和 #test 这三个选择器都会执行颜色为红色。通常用于集体声明。

后代选择器

后代选择器又称为包含选择器，用来选择元素或元素组的后代，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就成为外层标签的后代。子孙后代都可以这么选择。或者说，它能选择任何包含在内的标签。

子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个进行连接，注意，符号左右两侧各保留一个空格。白话：这里的子指的是亲儿子不包含孙子重孙子之类。

比如： .demo > h3 {color: red;} 说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

伪类选择器

伪类选择器用于向某些选择器添加特殊的效果。比如给链接添加特殊效果，比如可以选择第1个，第n个元素。

为了和我们刚才学的类选择器相区别，类选择器是一个点比如 .demo {} 而我们的伪类用 2个点就是冒号比如 :link{}
链接伪类选择器
:link /* 未访问的链接 */

:visited /* 已访问的链接 */

:hover /* 鼠标移动到链接上 */

:active /* 选定的链接 */

三、元素显示模式转换

显示模式转化

例如：

将行内元素转化为块元素，例如a标签

display: block;

将块级元素转化为行内元素，例如div标签

display: inline;

将行内元素转化为行内块元素

display: inline-block;

四、单行文字居中显示

CSS 没有给我们提供文字垂直居中的代码. 这里我们可以使用一个小技巧来实现.

解决方案: 让文字的行高等于盒子的高度 就可以让文字在当前盒子内垂直居中。

<!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 {
            width: 200px;
            height: 40px;
            background-color: blue;
            line-height: 40px;
        }
    </style>
</head>
<body>
    <div>
        我要居中
    </div>
</body>
</html>

_Vrtual .

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习【CSS】

一、emmet语法1、快速生成HTML结构语法生成标签：直接输入标签名按tab键即可，比如div 然后tab键，就可以生成如果想要生成多个相同标签，加上*就可以，比如div*3 然后tab键就可以生成3个div如果有父子级关系的标签，用>就可以了，比如ul > li 然后tab键如果有兄弟关系的标签，用+就可以了，比如div+p 然后tab键如果生成带有类名或者id名字的，直接写p.demo或者ul>li#two tab键就可以了如果生成的div类名是有顺序的，可以用
复制链接

扫一扫