CSS基础学习第二周-CSDN博客

本文链接：https://blog.csdn.net/bbbgblbz/article/details/129824742

CSS基础学习第二周

文章目录

CSS基础学习第二周
一、Emmet语法
二、复合选择器
三、元素显示模式
四、snipaste下载与使用
五、CSS的背景
- - - - 1.background-color 背景颜色
        2.background-image 背景图片地址
        3.background-repeat 背景平铺
        4.background-position 背景位置
        5.background-attachment 背景附着
        6.背景的合写（复合属性）
        7.背景颜色透明
六、CSS三大特性
- - - - 1.层叠性
        2.继承性
        3.优先级
七、盒子模型
- - - - 1.盒子模型组成
        2.盒子的大小
        3.边框
        4.内边距
        5.外边距
        6.盒子阴影
        7.文字阴影
八.CSS补充知识
- - - - 1.元素的显示与隐藏
        2.精灵图
        3.字体图标
        4.CSS用户界面样式
        5.vertical-align属性应用
        6.溢出的文字省略号显示
        7.常见布局技巧

一、Emmet语法

1. 概念

缩写语法，用于提高编写HTML、CSS文档的速度

2. 快速生成HTML结构语法

生成标签：直接输入标签名后按tab即可

<!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>Document</title>
</head>
<body>
    <!-- 写div然后按tab -->
    <div></div>
</body>
</html>

生成多个相同标签：标签名*n即可，

<!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>Document</title>
</head>
<body>
    <!-- 生成多个相同标签：`标签名*n` -->
    <div></div>
    <div></div>
    <div></div>

</body>
</html>

生成父子级关系的标签：父>子 即可
兄弟关系：兄+弟

父子：ul>li
兄弟：div+p

带类名或id名：直接写.demo或#two tab键即可
如果生成的div类名要按顺序写，用自增符号$
在默认标签里显示文字:div{我要显示文字}

<!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>Document</title>
</head>
<body>
    <!-- div$,div{} -->
    <div1></div1>
    <div>我要显示文字</div>  
</body>
</html>

3.快速生成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>Document</title>
  </head>
  <style>
    p {
      text-align: center;/* tac */
      text-indent: 2em;/* ti2em */
    }
  </style>
  <body></body>
</html>

4.快速格式化

方法一：右键选择“格式化文档”
方法二：shift+alt+F

二、复合选择器

1.后代选择器

概念：后代选择器又称为包含选择器，其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。

格式：父级子级 {属性: 属性值; 属性:属性值;}

.class h3{color:red;font-size:16px;}

2.子元素选择器

概念：子元素选择器只能选择作为某元素子元素(亲儿子)的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 > 进行连接。

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

3.并集选择器

概念：如果某些选择器定义的相同样式，就可以利用并集选择器，可以让代码更简洁。并集选择器（CSS选择器分组）是各个选择器通过,连接而成的，通常用于集体声明。

语法：.class,h3 {color:red;}

div,
    p,
    .pig li {
    }/* 约定语法规范，一定要注意最后一个选择器不需要加逗号，习惯竖着写 */

4. 伪类选择器

概念：伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果，或选择第1个，第n个元素。伪类选择器书写最大的特点是用冒号( : )表示，比如 :hover（鼠标经过时）、 :first-child （选择第一个孩子）。伪类选择器有很多，比如有链接伪类、结构伪类等，这里先总结常用的链接伪类选择器。

链接伪类选择器：

选择器	生效状态
a:link	链接平常的状态
a:visited	链接被访问过之后
a:hover	鼠标放到链接上的时候
a:active	链接被按下的时候

<!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>Document</title>
  </head>
  <style>
    /* a:link:未访问过的链接 */
    a:link {
            color: rgb(29, 30, 30);
            text-decoration: none;
    }
    a:visited {
      color: #a0dcf2;
    }/* 访问过的链接 */
    a:hover{
      color: blue;
    }/* 鼠标经过的链接 */
    a:active {
      color: green;
    }/* 鼠标正在按下还没有弹起的那个链接 */
  </style>
  <body>
    <a href="#">连接伪类选择器</a>
    <a href="https://www.?????.com.cn/">未知的网站</a>
  </body>
</html>

lvha按照这个顺序进行，保证选择器生效
可以按照：love到hate来记忆
编写网页时，链接需要单独指定样式

:foucs伪类选择器

选取有有光标的表单元素

5. 选择器总结

选择器	作用	特征	使用情况	隔开符号及用法
后代选择器	用来选择后代元素	可以是子孙后代	较多	符号是空格 .nav a
子代选择器	选择最近一级元素	只选亲儿子	较少	符号是大于 .nav>p
并集选择器	选择某些相同样式的元素	可以用于集体声明	较多	符号是逗号 .nav, .header
链接伪类选择器	选择不同状态的链接	跟链接相关	较多	重点记住a{}和 a:hover 实际开发的写法
:focus选择器	选择获得光标的表单	表单相关	较少	input:focus 记住这个

三、元素显示模式

作用：由于网页中的标签非常多，在不同地方会用到不同类型的标签，了解他们的特点可以更好的布局我们的网页。
概念：元素显示模式就是元素(标签)以什么方式进行显示，比如<div>独占一行，比如一行可以放多个<span>标签

1. 元素种类

块内元素：

常见的块元素有<h1>---<h6>,<p>,<div>,<ul>,<ol>，<li>等，其中<div>标签是最典型的块元素。

特点：

1：独占一行
2：高度，宽度，外边距以及内边距都可以控制
3：宽度默认是容器（父级宽度）的100%
4：是一个容器及盒子，里面可以放很多行内或者块级元素

注意

文字类的元素不能使用块级元素,<p>标签主要用于存放文字，因此<p>里面不能放块级元素,特别是不能放<h1>-<h6>等都是文字类块级标签，里面不能放其他块级元素

行内元素：

常见的行内元素有<a>,<strong>,<b>,<em>,<i>,<del>,<s><ins>,<u>,<span>等，其中<span>标签是典型的行内元素，有的地方也将行内元素称为内联元素。
特点

1：相邻行内元素在一行上，一行可以显示多个。
2：高，宽直接设置是无效的
3：默认宽度就是它本身内容的宽度
4：行内元素只能容纳文本或者其他行内元素。

<head>
    <style>
        .span1{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <span class="span1">我是行内元素1</span>
    <span>我是行内元素2</span>
    <span>我是行内元素3</span>
</body>

链接里面不能再放链接,特殊情况链接里面可以放块元素，但是给<a>里面可以放块级元素，但是给<a>转换一下块级模式会更安全。

行内块元素：

在行内元素中有几个特殊的标签------<img/>,<input/>,<td>,它们同时具有块元素和行内元素的特点。

1.和相邻行内元素(行内块)在一行上但是它们之间会有空白缝隙，一行可以显示多个(行内元素特点)
2.默认宽度就是它们本身内容的宽度(行内元素特点)
3.高度，行高，外边距以及内边距都可以控制（块级元素的特点）。

2.元素转换

行内元素变为块内元素：

关键代码 display：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>Document</title>
  </head>
  <style>
      a {
        text-decoration: none;
        display: block;
        background-color: rgb(248, 187, 187);
        width: 30%;
        height: 100px;
      }
  </style>
  <body>
    <a href="#"> 行内元素变为块内元素</a>
  </body>
</html>

块内元素变为行内元素：

关键代码：display：inline

<!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>Document</title>
  </head>
  <style>
      .page {
        display: inline;
      }
  </style>
  <body>
    <p> 行内元素一行只有一个</p>
    
    <p class="page"> 行内元素变为块内元素</p>
    <p class="page"> 变为一行可以多个</p>
  </body>
</html>

四、snipaste下载与使用

参考博客：
介绍一款非常好用的高效率截图工具----Snipaste(下载及安装)
常用快捷键：F1开始截图，F3让截图置于显示界面顶层，即把刚截的图片展示在屏幕上

五、CSS的背景

1.background-color 背景颜色

background-color属性设置一个元素的背景颜色。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

未指定背景颜色时，默认透明时，使用transparent作为属性值。

语法格式：

background-color: red;
background-color: transparent;  /* 透明 */

2.background-image 背景图片地址

background-image属性设置一个元素的背景图像。元素的背景是元素的总大小，包括填充和边界（但不包括边距）。

默认情况下，background-image放置在元素的左上角，并重复垂直和水平方向。
提示：请设置一种可用的背景颜色，这样的话，假如背景图像不可用，可以使用背景色带代替。

语法格式：

background-image: url('图片路径');  /*设置图片显示*/

3.background-repeat 背景平铺

设置如何平铺对象的 background-image 属性。默认情况下，重复background-image的垂直和水平方向。
语法格式：

background-repeat: repeat-y;

值	说明
repeat	背景图像将向垂直和水平方向重复
repeat-x	只有在水平方向会重复背景图像
repeat-y	只有在垂直方向会重复背景图像
no-repeat	不会重复

4.background-position 背景位置

background-position属性设置背景图像的起始位置，第一个值表示水平方向，值增大时，意味着背景图片向右移动减小往左，第二个值垂直方向，值增大时，背景图片向下移动减小往上移动
background-position:x y，如果只提供一个值，则用于 x 轴方向，y 轴方向使用默认值 center，即垂直居中。
语法：

/*取值有left、right、top、bottom、center，如果仅指定一个关键字，其他值将会是"center"*/
/* 水平有left center right, 出垂直有top center bottom */
background-position: center; 关键词
background-position: 30% 20%; 百分比
background-position: 50px 100px; 固定值
background-position: -10% 100px; 混合写

(容器的宽度-图片的宽度)*百分比 = 图片最左边到容器左边的距离
(容器的高度-图片的高度)*百分比 = 图片最上边到容器上边的距离

5.background-attachment 背景附着

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。
语法：

background-attachment:fixed;

属性值：

值	说明
scroll	背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）
fixed	背景相对于视口固定，不会随着元素的内容滚动。

6.背景的合写（复合属性）

background属性的值书写顺序官方并没有强制标准。不要的可以直接删除。

background: 背景颜色背景图片地址背景平铺背景滚动背景位置

background: transparent url('./img/logo.png') repeat-y scroll 50% 0;

7.背景颜色透明

CSS3支持背景半透明的语法格式：

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

alpha的取值范围在0~1之间
同样可以给文字和边框透明，都是使用rgba的格式来写
color: rgba(255, 0, 0, 0.3);
border: 1px solid rgba(255, 0, 0, 0.5);

六、CSS三大特性

1.层叠性

浏览器自上而下解析,后一个覆盖前一个
(样式冲突,遵循就近原则不冲突则不会层叠)
连写时,若不写则会有默认值

2.继承性

恰当的使用继承性可以简化代码,降低样式复杂性

子父样式冲突,执行自身(若元素没有被选中,无论父亲多强,儿子的继承为0)
子元素(text- font- line- color 系列可以继承父亲)

3.优先级

当选择器相同时,比较权重
(权重没有进位,在大也不会向前进)
计算公式
(复合选择器会出现权重叠加,若同时选中一个元素,而又要实现样式,则可添加父元素)
继承 * //权重0.0.0.0
标签 //0.0.0.1
类 . //0.0.1.0
id //0.1.0.0
行内 //1.0.0.0
!important //无穷大

七、盒子模型

1.盒子模型组成

组成：一个盒子由外到内可以分成四个部分：margin（外边距）、border（边框）、padding（内边距）、content（内容）。会发现margin、border、padding是CSS属性，因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

2.盒子的大小

盒子的大小指的是盒子的宽度和高度。大多数初学者容易将宽度和高度误解为width和height属性，然而默认情况下width和height属性只是设置content（内容）部分的宽和高。盒子真正的宽和高按下面公式计算：

盒子的宽度 = 内容宽度 + 左填充 + 右填充 + 左边框 + 右边框 + 左边距 + 右边距
盒子的高度 = 内容高度 + 上填充 + 下填充 + 上边框 + 下边框 + 上边距 + 下边距
盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

上面说到的是默认情况下的计算方法，另外一种情况下，width和height属性设置的就是盒子的宽度和高度。盒子的宽度和高度的计算方式由box-sizing属性控制。

box-sizing属性值
content-box：默认值，width和height属性分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距、边框、外边距。
border-box：为元素设定的width和height属性决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。
inherit：规定应从父元素继承box-sizing属性的值

当box-sizing：content-box时，这种盒子模型成为标准盒子模型，当box-sizing: border-box时，这种盒子模型称为IE盒子模型。

3.边框

设置边框样式： border-style

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

设置内容	样式属性
上边框	border-top-style: 样式 ; border-top-width : 宽度 ; border-top-color : 颜色 ; border-top:宽度样式颜色;
下边框	border-bottom-style:样式 ;border- bottom-width:宽度;border- bottom-color: 颜色; border-bottom:宽度样式颜色;
左边框	border-left-style: 样式 ; border-left-width: 宽度;border-left-color:颜色;border-left:宽度样式颜色;
右边框	border-right-style: 样式;border-right-width: 宽度 ; border-right-color:颜色 ; border-right:宽度样式颜色;
样式综合设置	border-style:上边右边下边左边;
宽度综合设置	border-width:上边右边下边左边
颜色综合设置	border-color:上边右边下边左边
边框综合设置	border:四边宽度四边样式四边颜色

表格的细线边框

table{ border-collapse:collapse; }

collapse：合并

border-collapse:collapse: 表示边框合并在一起。

圆角边框

border-radius: 左上角  右上角  右下角  左下角;

属性	操作内容
border-radius: 10px	4个角都是 10px 的弧度
border-radius: 10px 40px	左上角和右下角是 10px , 右上角和左下角 40px （对角线）
border-radius: 10px 40px 80px	左上角 10px, 右上角和左下角 40px , 右下角80px
border-radius: 10px 40px 80px 100px	左上角 10px , 右上角 40px, 右下角 80px, 左下角 100px
border-radius: 50%;	取宽度和高度一半则会变成一个圆形

4.内边距

为调整内容在盒子中的显示位置，可为元素栓之内边距（内填充），即为元素内容与边框之间的距离
内边距取值

设置方式与div的边框类似
padding-top:上边距;
padding-right:右边距;
padding-bottom:下边距;
padding-left:设置四周边距:

内边距是复合属性示例代码：

padding:5px 3px 4px
/*设置上内边距为5px，左右内内边距为3px*,下内边距为4px*/

auto:自动（默认值）

相对于父元素或浏览加宽度的百分比

pdding:5%;/*段落内边距为父元素边框宽度的5%*/

注意：如果设置内外边界的属性为百分比，宽度随父元素的wigdt变化，和高度height无关

5.外边距

通常网页由多个盒子排列而成，可以通过外边距属性设置盒子与盒子之间的距离，外边距就是元素边框与相邻元素之间的距离

margin-top;上外边距；

margin-right;右外边距；

margin-bottom:下外边距;

margin-left:左外边距；

margin：上下左右外边距；

块级元素水平居中：
当我们对块级元素设置width宽度，同时将左右的外边距设置为auto时，可以使其居中

margin:0 auto; /*实现水平居中*/

margin:5px auto /*实现水平居中，且上下拉开5px外边距*/

为了方便控制网页中的元素，制作网页是通常先清除元素的默认内外边距

*{

padding:0; /*清除内边距*/

margin:0;/*清除外边距*/

}

盒子宽度的解析

一个盒子的整体宽度是由盒子的width和+左外边距+右外边距总和共同决定的。

一个盒子的整体高度是由盒子的height和+上外边距+下外边距+上下边框宽度总和共同决定的。

6.盒子阴影

box-shadow属性设置盒子阴影

box-shadow向框添加一个或多个阴影. 该属性是由逗号分隔的阴影列表,每个阴影由2-4个长度值、可选的颜色值及可选的inset关键词来规定。省略长度的值是0。

box-shadow: h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必需,水平阴影的位置，允许负值
v-shadow	必需,垂直阴影的位置，允许负值
blur	模糊距离
spread	阴影的尺寸
color	阴影颜色
inset	将外部阴影（outset）改为内部阴影

默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影无效,盒子阴影不占用空间，不会影响其他盒子的排列

7.文字阴影

在CSS3中，我们可以使用text-shadow属性将阴影应用于文本

text-shadow : h-shadow v-shadow blur color ;

值	描述
h-shadow	必写，水平阴影的位置，允许负值
v-shadow	必写，垂直阴影的位置，允许负值
blur	模糊距离
color	阴影颜色

八.CSS补充知识

1.元素的显示与隐藏

类似于网页广告，当我们点击关闭就不见了，但是刷新页面会重新出现

display属性用于设置一个元素应如何显示

属性值	作用
display: none	隐藏对象
display:blick	除了转换为块级元素外，同时还有显示元素的意思

display：隐藏元素后，不再占有原来的位置

visibility显示隐藏

visibility属性用于指定一个元素应可见还是隐藏

属性值	作用
visibility:visible	元素可视
visibility:hidden	元素隐藏

visibility隐藏元素后，继续占有原来的位置

overflow溢出显示隐藏

overflow属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）时，会发生什么

一般情况下，我们都不想让溢出的内容显示出来，因为溢出的部分会影响布局；但是如果有定位的盒子，请慎用overflow:hidden，因为它会影响多余的部分
| | |
|–|–|
| | |

属性值	作用
visible	不剪切内容，不添加滚动条
hidden	不显示超过对象尺寸的内容，超出的部分隐藏
scroll	不管超出内容与否，总是显示滚动条
auto	超出自动显示滚动条，不超出不显示滚动条

2.精灵图

概念：一个网页中往往会应用很多小的背景图像作为装饰，当网页中的图像过多时，服务器就会频繁的接受和发送请求图片，造成服务器请求压力较大，这将大大降低页面的加载速度，因此，为了有效地减少服务器接受和发送请求的次数，提高页面的加载速度，出现了CSS精灵技术（也称CSS Sprites、 CSS雪碧）

使用精灵图核心：

精灵技术主要针对与图片背景使用。就是把多个小背景图片整合到一张大图片中
这个大图片也称为sprites 精灵图或者雪碧图移动背景图片位置，此时可以使用background-position
一般情况下精灵图都是负值

3.字体图标

主要用于显示网页中通用、常用的一些小图标,字体图标iconfont可以为前端工程师提供一种方便高效的图标使用方式，展示的是图标，本质属于字体

如果遇到一些结构和样式比较简单的小图标，就用字体图标
如果遇到一些结构和样式比较复杂的小图片，就用精灵图

4.CSS用户界面样式

所谓的界面样式，就是更改一些用户操作样式，以便提高更好点用户体验

更改用户的鼠标样式:设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状

li { cursor : pointer : }

表单轮廓：给表单添加outline: 0; 或者outline: none; 样式之后，就可以去掉默认的边框

input { outline : none : }

防止文本域拖拽：实际开发中，我们文本域右下角是不可以拖拽的

textarea { resize: none; }

5.vertical-align属性应用

经常用于设置图片或者表单（行内块元素）和文字垂直对齐；用于设置一个元素的垂直对齐方式，但是它只针对行内元素或者行内块元素有效

vertical-align : baseline | top | middle | bottom

值	描述
baseline	元素放置在父元素的基线上（默认）
top	把元素的顶端与行中最高元素的顶端对齐
middle	把此元素放置在父元素的中部
bottom	把元素的顶端与行中最低的元素的顶端对齐