其他分享
首页 > 其他分享> > CSS(二)

CSS(二)

作者:互联网

(一)Emmet语法

Emmet语法的前身是Zen Coding,它使用缩写来提高html/css的编写速度,Vscode内部已经集成该语法

1.快速生成HTML结构语法

1.生成标签,直接输入标签名然后按tab键即可,比如,div然后按tab键,就可生成div标签
2.如果想要生成多个相同标签,输入标签名后 * n即可,比如 div*3,就可生成三个div标签
3.如果有父子级关系,可以用>,比如ul>li
4.如果有兄弟关系,可以用+,比如div+p
5.如果生成带有类名或者id名的直接写.属性值或者#属性值+tab键
6.如果生成的div类名是有顺序的,可以用自增符号$
7.如果想在生成的标签内部写内容可以用{}表示

<!--1. div + tab -->
<div></div>
<!--2. p*3 + tab -->
<p></p>
<p></p>
<p></p>
<!--3. ul>li + tab -->
<ul>
    <li></li>
</ul>
<!--3. tr>td*3 + tab-->
<tr>
    <td></td>
    <td></td>
    <td></td>
</tr>
<!--4. div+p + tab-->
<div></div>
<p></p>
<!--5. p.demo+tab -->
<p class="demo"></p>
<!--5. p#demo+tab -->
<p id="demo"></p>
<!--6. div$*5 + tab-->
<div class="demo1"></div>
<div class="demo2"></div>
<div class="demo3"></div>
<div class="demo4"></div>
<div class="demo5"></div>
<!--7. div{老八秘制小汉堡} + tab-->
<div>老八秘制小汉堡</div>
<!--7. div{老八秘制小汉堡}*3 + tab-->
<div>老八秘制小汉堡</div>
<div>老八秘制小汉堡</div>
<div>老八秘制小汉堡</div>
<!--7. div{$}*5 + tab-->
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>

2.快速生成CSS样式语法

在CSS中采用简写的形式即可
1.比如w20 按tab 可以生成 width: 20px
2.比如lh26 按tab 可以生成 line-height: 26px

<style>
    p {
        /* tac + tab */
        text-align: center;
        /* w20 + tab */
        width: 20px;
        /* tdn + tab */
        text-decoration: none;
	}
</style>

3.快速格式化代码

shift+alt+f 快速格式化文档

保存页面时自动格式化代码
1.文件-->首选项-->设置
2.搜索emmet.include;
3.在setting.json下的用户中添加以下语句
"editor.formatOnType":true,
"editor.formatOnSave":true

(二)CSS的复合选择器

1.复合选择器简介

在CSS中,可以根据选择器类型分为基础选择器和复合选择器,复合选择器是建立在基础选择器之上,对基本选择器进行组合形成的,常用的复合选择器包括:后代选择器,子选择器,并集选择器,伪类选择器等

复合选择器可以更加准确、更加高效的选择目标元素(标签)
复合选择器是由两个或多个基础选择器,通过不同的方式组合而成的

2.后代选择器

后代选择器又称为包含选择器,可以选择父元素里的子元素,其写法就是把外层标签写在前,内层标签写在后,中间用空格分隔。当标签发生嵌套时,内层标签就成为外层标签的后代

父元素 子元素 {
	属性1: 属性值1;
	属性2: 属性值2;
	...
}
<style>
    /* 要把ol里的li选择出来改为红色 */
    ol li {
        color: red;
    }

    ol li a {
        color: red;
    }

    .nav li a {
        color: yellow;
    }
</style>

PS:
1.父元素与子元素之间要用空格隔开
2.后代选择器最终是给子元素做样式修改
3.子代不限与时儿子,也可以是孙子
4.父元素和子元素可以是任意的基础选择器

3.子选择器

子元素选择器(子选择器)只能选择作为某一元素的最近一级子元素,简单理解就是只能选择亲儿子元素

父元素>子元素 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}
<style>
    div>a {
        color: red;
    }
</style>

PS:
1.父元素与子元素之间要用>隔开
2.子元素选择器只能选择最近一级的子元素,不能选择其他后代

4.并集选择器

并集选择器可以选择多组标签,同时为他们定义相同的样式,通常用于集体声明,通俗理解就是元素1和元素2一起改变样式

并集选择器是各选择器通过英文的逗号链接而成,任何形式的选择器都可以作为并集选择器的一部分

元素1,
元素2 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}
<style>
    /* 要求1:将熊大和熊二改成红色 */
    /* 
    div,
    p {
    color: red;
    } 
    */
    /* 要求2:将熊大和熊二改成绿色,并将沈阳大街团队改为绿色 */
    div,
    p,
    ul li {
        color: green;
    }
</style>

PS:
1.并集选择器要竖着写
2.最后一个选择器不用加逗号

5.伪类选择器

伪类选择器用于向某些选择器添加特殊效果,比如给链接添加特殊效果,或者选择第一个元素,第n个元素
伪类选择器的书写特点是用:表示,比如 :hover、:first-child
常见的伪类选择器有链接伪类、结构伪类等

6.链接伪类选择器

a:link    {color:blue;}		/*选择未被访问的链接*/
a:visited {color:blue;}		/*选择已被访问的链接*/
a:hover   {color:red;}		/*选择鼠标指针位于其上的链接*/
a:active  {color:yellow;}	/*选择活动链接(鼠标按下未抬起的链接)*/
<style>
    /*选择未被访问的链接*/
    a:link {
        color: blue;
        text-decoration: none;
    }
    /*选择已被访问的链接*/
    a:visited {
        color: green;
    }
    /*选择鼠标指针位于其上的链接*/
    a:hover {
        color: red;
    }
    /*选择活动链接(鼠标按下未抬起的链接)*/
    a:active {
        color: yellow;
    }
</style>

PS:
1.为确保生效,要按照LVHA顺序声明 link visited hover active
2.因为a链接在浏览器中有默认的样式,所以都需要给链接单独指定样式
3.实际开发中的写法

<style>
    /*选择未被访问的链接*/
    a:link {
        color: blue;
        text-decoration: none;
    }
    /*选择鼠标指针位于其上的链接*/
    a:hover {
        color: red;
        text-decoration: underline;
    }
</style>

7.focus伪类选择器

:focus伪类选择器用于选取获得焦点的表单元素
焦点就是光标,一般情况下类表单标签才能获取,因此这个选择器也要针对于表单元素来说的

<style>
    input:focus {
        backgroud-color: yellow;
    }
</style>

8.交集选择器

交集选择器 既...又...

标签名类名 {
    属性1: 属性值1;
    属性2: 属性值2;
    ...
}

注意:如果有标签选择器,则将标签选择器放在第一个

div.demo {
    color: aqua;
}
/*既是div标签,又有demo这个类名*/

9.兄弟选择器

兄弟选择器:

元素1+元素2 {
     属性:属性值
 }
.bro+div {
    color: red;
}
元素1~元素2 {
	属性:属性值
}
.bro~.bro2 {
    color: pink;
}

(三)CSS的元素显示模式

1.元素显示模式简介

作用:了解元素的特点可以更好的布局页面
元素显示模式就是元素(标签)以什么方式进行显示,比如div自己占用一行,一行可以放多个span
HTML元素一般可以分为块元素和行内元素两种

2.元素显示模式分类

1)块元素

常见的块元素有 h1~h6、p、div、ul、ol、li等,其中div就是最经典的块元素

<style>
    div {
        width: 500px;
        height: 100px;
        background-color: pink;
        text-align: center;
        border: 2px dotted;
        border-color: red;
    }
</style>

块元素的特点:
1.独占一行
2.宽度、高度、外边框、内边框都可以自定义
3.宽度默认是容器(父级元素)的100%
4.是一个容器即盒子,里面可以放行内或者块级元素

PS:文字类(p标签、h1~h6标签等)的元素内不能使用块级元素

2)行内元素

常见的块元素有 a、strong、b、em、i、del、s、ins、u、span等,其中span就是最经典的行内元素(内联元素)

行内元素的特点:
1.一行可显示多个元素
2.宽度、高度都不可以自定义
3.宽度默认是它本身内容的宽度
4.行内元素只能容纳文本或其他行内元素

PS:
1.a 链接里面不能再放链接
2.特殊情况链接a里面可以放块级元素,但是给a转换一下块级模式是最安全的

3)行内块元素

在行内元素中有几个特殊的标签——img、input、td,他们同时具有块元素和行内元素的特点

行内块元素的特点:
1.和相邻元素显示在一行上,但是它们之间会有空白间隙,一行可以显示多个
2.默认宽度就是它本身的内容的宽度
3.高度、宽度、行高、外边距都可以自定义

3.元素显示模式的转换

特殊情况下,我们需要元素模式的转换,简单理解:一个模式的元素需要另一种模式特性,比如想要增加链接a的触发范围

转换为块级元素:display:block
转换为行内元素:display:inline
块级元素转换为行内块元素:display: inline-block

<style>
    a {
        width: 150px;
        height: 30px;
        background-color: pink;
        color: black;
        text-decoration: none;
        /* 将行内元素转换为块元素 */
        display: block;
    }

    div {
        width: 150px;
        height: 30px;
        background-color: pink;
        /* 将块级元素转换为行内元素 */
        display: inline;
    }

    span {
        width: 150px;
        height: 30px;
        background-color: pink;
         /* 将块级元素转换为行内块元素 */
        display: inline-block;
    }
</style>

(四)CSS的背景

1.背景颜色

background-color属性定义了元素的背景颜色

<style>
    div {
        width: 500px;
        height: 500px;
        /* background-color: transparent;透明的 */
        background-color: red;
    }
</style>

2.背景图片

background-image属性定义了元素的背景图片,实际开发中常见于logo或者一些装饰性的一些小图片,或者是大的背景图片,优点是非常便于控制图片的位置

<style>
    div {
        width: 1500px;
        height: 800px;
        /* 没有背景图片 */
        /* background-image: none; */
        /* 不要忘记url() */
        background-image: url(/AnniEiffel.jpg);
    }
</style>

3.背景平铺

如果想在HTML页面上对背景图片进行平铺,可以使用background-repeat属性

描述
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
<style>
    div {
        width: 800px;
        height: 400px;
        background-image: url(/二维码.png);
        /* 平铺 */
        /* background-repeat: repeat; */
        /* 不平铺 */
        /* background-repeat: no-repeat; */
        /* 沿X轴平铺 */
        /* background-repeat: repeat-x; */
        /* 沿Y轴平铺 */
        background-repeat: repeat-y;
    }
</style>

PS:页面元素既可以添加背景颜色,也可以添加背景图片,背景颜色在最底层

4.背景图片的位置

如果想改变HTML页面上对背景图片的位置,可以使用background-position属性

background-position: x y;
描述
top lefttop centertop rightcenter leftcenter centercenter rightbottom leftbottom centerbottom right 如果您仅规定了一个关键词,那么第二个值将是"center"。默认值:0% 0%。
x% y% 第一个值是水平位置,第二个值是垂直位置。左上角是 0% 0%。右下角是 100% 100%。如果您仅规定了一个值,另一个值将是 50%。
xpos ypos 第一个值是水平位置,第二个值是垂直位置。左上角是 0 0。单位是像素 (0px 0px) 或任何其他的 CSS 单位。如果您仅规定了一个值,另一个值将是50%。您可以混合使用 % 和 position 值。
1)参数是方位名词

如果指定的两个值都是方位名词,则两个值前后顺序无关,比如left top和top left效果一致
如果只有一个方位名词,则第二个默认是居中

<style>
    div {
        width: 800px;
        height: 400px;
        background-color: pink;
        background-repeat: no-repeat;
        background-image: url(/皇冠.jpg);
        /* 居中向上 */
        /* background-position: center top; */
        /* 居左向下 */
        /* background-position: left bottom; */
        /* 省略一个方位名词,左侧居中 */
        /* background-position: left; */
    }
</style>
2)参数是精确单位

如果参数值是精确单位,第一个一定是x坐标,第二个一定是y坐标
如果只有一个精确单位,则第二个默认是居中

<style>
    div {
        width: 800px;
        height: 400px;
        background-color: pink;
        background-repeat: no-repeat;
        background-image: url(/皇冠.jpg);
        background-position: 20px 50px;
    }
</style>
3)参数是混合单位

如果参数值是精确单位和方位名词混合使用,第一个值是x坐标,第二个值是y坐标

<style>
    div {
        width: 800px;
        height: 400px;
        background-color: pink;
        background-repeat: no-repeat;
        background-image: url(/皇冠.jpg);
        /* x轴20距离,垂直居中 */
        /* background-position: 20px center; */
        /* x轴居中,垂直20距离 */
        /* background-position: center 20px; */
    }
</style>

5.背景图片固定

如果想固定图片使之不随页面滚动可以使用background-attachment属性

描述
scroll 默认值。背景图像会随着页面其余部分的滚动而移动。
fixed 当页面的其余部分滚动时,背景图像不会移动。
<style>
    body {
        width: 1800px;
        height: 2400px;
        background-image: url(/皇冠.jpg);
        background-repeat: no-repeat;
        background-color: pink;
        /* 背景图片滚动 */
        /* background-attachment: scroll; */
        /* 背景图片固定 */
        background-attachment: fixed;
    }
</style>

6.背景图片复合写法

为简化背景属性的代码,可以使用背景属性复合写在background中
规定顺序 background: 背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置
使用background复合属性时,各属性间以空格隔开

background: pink url(/皇冠.jpg) no-repeat fixed left center;

7.背景色半透明

CSS3提供了背景色半透明的效果,通过background:rgba(0,0,alpha)来设置,alpha是透明度

background: rgba(0, 0, 0, 0.5);

PS:
1.我们习惯将alpha属性的0省略,直接写.x
2.背景半透明盒子不影响里面的内容
3.CSS3新增属性,只有IE9以上的版本才支持

(五)CSS的三大特性

1.层叠性

给相同选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,主要解决了冲突的问题
样式冲突,层叠性遵循就近原则,哪个样式离结构与近,就执行哪个样式。样式不冲突,不会层叠

<style>
    div{
        /*颜色冲突,颜色会被覆盖,最终为红色*/
        color:pink;
        /*字体大小没有冲突,不会被覆盖,仍被设置为20px*/
        font-size:20px;
    }
    div{
        color:red
    }
</style>

2.继承性

CSS中子标签会继承父标签的某些样式(主要是文字的属性,不是所有样式),如文本颜色,字号等,恰当的使用继承会简化代码

行高的继承
body{
font:12px/1.5 'Microsoft YaHei';
}

行高可以跟单位也可以不跟单位,不带单位时,表示子元素行高为当前字体大小的倍数,例如,1.5,即文字大小的1.5倍

3.优先级

当同一个元素指定多个选择器,就会产生优先级

如果选择器相同则为层叠性
如果选择器不同,则根据选择器的权重执行

选择器 选择器权重
继承 , * 0,0,0,0
元素选择器 0,0,0,1
类选择器,伪类选择器 0,0,1,0
id选择器 0,1,0,0
行内样式style="" 1,0,0,0
!important 无穷大
<style>
    div{
        /*!important最高权重*/
        color: #fff !important;
    }
</style>

PS:
1.权重是由4组数字组成,但是不会有进位
2.类选择器永远大于元素选择器,id选择器永远大与类选择器
3.继承的权重是0,如果该元素没有直接选中,不管父元素权重多高,子元素得到的权重都是0
4.a标签浏览器默认指定了一个样式,所以不会继承父元素样式

复合选择器权重叠加

如果是复合选择器,则会有权重叠加,需要计算权重

<style>
     /*权重li=0,0,0,1*/
    li{
        color: #000;
    }
    /*权重计算ul+li=0,0,0,1+0,0,0,1=0,0,0,2*/
    ul li{
        color: #fff ;
    }
    /*权重计算.nav+li=0,0,1,0+0,0,0,1=0,0,1,1*/
    .nav li{
        color: red;
    }
</style>

(六)CSS的注释

/* 注释*/
/*
多行注释
*/

标签:repeat,color,元素,background,div,选择器,CSS
来源: https://www.cnblogs.com/Kongqingzhi/p/16548966.html