CSS基础

最新推荐文章于 2024-10-17 17:03:17 发布

E___V___E

最新推荐文章于 2024-10-17 17:03:17 发布

阅读量322

点赞数 8

文章标签： css 前端

本文链接：https://blog.csdn.net/E___V___E/article/details/135778998

版权

本文介绍了VSCode2022版本中Emmet语法的启用方法，以及如何利用Emmet进行HTML和CSS的快速编写，包括标签生成、类名处理、选择器应用和背景样式等技巧。

摘要由CSDN通过智能技术生成

Emmet语法（看看就好自己写好）

2022-7 vscode 默认取消了emmet语法，需要手动勾选？

vscode对emmet的识别不是很好，在左下角设置搜索“emmet”，勾选“Emmet: Trigger Expansion On Tab”

html

1．生成标签直接输入标签名按 tab 键即可以口 div 然后 tab键，就可以生成＜ div > < / div >
2．如果想要生成多个相同标签加上＊就可以了七以口 d iv * 3 就可以快速生成 3 个 div 
3．如果有父子级关系的标签，可以用＞，比如 ul > li 就可以了 
4.如果有兄弟关系的标签，用＋就可以了比如 div + p 
5.如果生成带有类名或者 id 名字的直接写.demo 或者＃ two tab 键就可以了
6.如果生成的 div 类名是有顺序的可以用自增符号＄
7.{}

css

简写形式即可

w200为weight：200px；

ti为text-indent

css复合选择器

后代选择器

<style>
    ol li{
        color:pink;
         }
</style>
.......
.......
.......
<body>
    <ol>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ol>
    <ul>
        <li>aaa</li>
        <li>bbb</li>
        <li>ccc</li>
    </ul>
</body>

元素1 元素2{声明}

子选择器

元素父>元素子{声明}

并集选择器

元素1，元素2{声明 }

伪类选择器

1.链接伪类

a:link    {color：pink }     /*选择我问访问的链接*/
a:visited      /*选择已经访问过的*/
a:hover        /*鼠标在上面的链接*/
a:active       /*鼠标按下*/

focus伪类选择器

选取获得光标的表单元素

input：focus{
    background-color：pink；
}

CSS的元素显示模式

html有行元素和块元素

块

行

行内块元素

<img><input><td>有空白缝隙，又可以控制宽度高度

元素模式转换

width：150px；

height：100px；

display：block/*行转块显示模式*/

display：inline/*块转行显示模式 */

}

行间距 line-height 设置和高度一致也垂直居中了

css背景

background-color：transparent | color ; 透明和颜色

background-image:none | URL; 背景图片

background-repeat:no-repeat;repeat;repeat-x;repeat-y;背景平铺

background-position：x y；图片位置 left top等等等等

小的装饰图片用背景做

background-attachment：scroll fixed；背景是否固定

背景复合写法

背景色半透明

background：rgba（0，0，0，0.3）redgreenbluealpha透明度

五彩导航实战