首页 > 其他分享 >web 前端技术的一些知识点分享~

web 前端技术的一些知识点分享~

时间:2024-06-03 20:30:22浏览次数:22  
标签:知识点 web 样式 前端 元素 import font 选择器 css

css的规则是由选择器和   组成的

目录

css的规则是由选择器和   组成的

CSS(层叠样式表)的规则是由选择器和声明块组成的。

选择器用于选定页面上的元素,这可以是一个元素标签(如 h1)、类(如 .classname)、ID(如 #idname)或是元素的状态(如 :hover)。选择器决定了哪些HTML元素将应用接下来的样式。

声明块是由一对大括号 {} 包围的,里面包含了一个或多个声明。每个声明都是由一个属性和一个值组成,中间用冒号 : 分隔,用于定义元素的样式。每个声明以分号 ; 结尾。例如:

h1 {
  color: blue;
  font-size: 2em;
}
在这个例子中,h1 是选择器,color: blue; 和 font-size: 2em; 是声明,分别用来设置<h1>标签内文字的颜色和大小。


css 中标记文件字体为特粗的是


在CSS中,要标记文件字体为特粗,可以使用font-weight属性,并将其值设置为900font-weight属性用于指定字体的粗细程度,其数值范围从100900,其中900代表最粗的字体权重,也就是特粗(Extra Bold)。

例如:

.font-extra-bold {
  font-weight: 900;
}

在这个例子中,任何带有font-extra-bold类的元素都将使用特粗的字体样式。需要注意的是,并非所有字体都提供从100900的完整权重范围,因此实际显示的粗细程度可能会根据字体本身的设计和可用权重而有所不同。


在css中 能多次引用样式的选择器是

在CSS中,可以通过多种方式多次引用样式。以下是一些常用的方法:

  1. 类选择器(Class selectors): 类选择器是可以重复使用的,你可以在多个元素上应用同一个类,这意味着这个类中的样式将被多次引用。例如:

    .my-class {
      color: blue;
      font-size: 16px;
    }
    

        

    <p class="my-class">这段文字是蓝色的。</p>
    <h1 class="my-class">这个标题也是蓝色的。</h1>
    

    2.后代选择器(Descendant selectors): 后代选择器允许你选择一个元素内的特定后代元素。如果你有一个包含多个相同类型元素的容器,你可以使用后代选择器为它们应用相同的样式。例如:

    .container p {
      color: red;
    }
    

  2. <div class="container">
      <p>这段文字是红色的。</p>
      <p>这段文字也是红色的。</p>
    </div>
    

    群组选择器(Grouping selectors): 群组选择器允许你将多个选择器组合在一起,为它们定义相同的样式。例如:

  3. h1, h2, .my-class {
      text-align: center;
    }
    

  4. 在这个例子中,所有<h1>元素、<h2>元素和具有my-class类的元素都将居中对齐。

  5. 通用选择器(Universal selector): 通用选择器 * 可以选择文档中的所有元素,但通常不建议这样做,因为它会影响性能,并且可能覆盖其他特定的样式。

  6. 伪类和伪元素(Pseudo-classes and pseudo-elements): 伪类和伪元素允许你根据元素的特定状态或位置来应用样式。例如,:hover 可以用来定义鼠标悬停时的样式。

    a:hover {
      color: green;
    }
    

     


    在css中正确导入外部样式的规格是


在CSS中,正确导入外部样式表的规格是使用@import规则。这个规则通常放在样式表的开始处,用于引入一个外部CSS文件。语法如下:

@import url("外部样式表的URL");

或者,如果外部样式表使用相对路径,可以省略url()函数:

@import "styles/external-styles.css";
例如,如果你有一个名为styles.css的外部样式表,你可以在另一个CSS文件中这样导入它:
@import url("styles.css");

或者,如果styles.css位于子目录中:

@import url("subdirectory/styles.css");

请注意,@import规则必须在所有其他样式规则之前使用,除了@charset规则(如果有的话)。此外,@import规则会使得浏览器在加载和渲染页面时发出额外的HTTP请求,这可能会影响页面加载速度。因此,在实际开发中,更常见的做法是将所有CSS代码合并到一个文件中,或者使用构建工具(如Webpack)来优化资源加载。

标签:知识点,web,样式,前端,元素,import,font,选择器,css
From: https://blog.csdn.net/yuanbenshidiaos/article/details/139423333

相关文章

  • 前端工程化工具系列(六)—— VS Code(v1.89.1):强大的代码编辑器
    VSCode(VisualStudioCode)是一款由微软开发的强大且轻量级的代码编辑器,支持多种编程语言,并提供了丰富的扩展插件生态系统。这里主要介绍如何使用配置ESLint、Stylelint等插件来提升开发效率。1自动格式化代码最终要达到的效果是:在对文件保存时自动格式化Vue、JS/TS......
  • 前端开发,块元素与行内元素
     块元素行内元素块元素会在页面中独占一行行内元素不会独占页面中的一行可以设置width/height属性设置width/height属性无效一般块级元素可以包含行内元素和其他块级元素一般行内元素包含行内元素,不包含块级元素 常见的块级元素div、form、h1~h6、hr、......
  • FastAdmin 后端控制器与前端页面传参
    1.菜单让链接带参 2.控制器传参数到前端JS$this->assignconfig('tab',$tab); 3.JS传参回后端index_url:'contract/contract/index/tab/'+Config.tab, ......
  • ruoyi若依整合websocket
    原文链接:https://blog.csdn.net/qq_33342112/article/details/132096930注:本文档中的ruoyi框架为前后不分离版本,nginx配置与前后分离版有所不同。一、导pom,版本需与springboot版本一致<dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot......
  • webapi 中 使用log4net 日志记录到数据库中
    1.安装三个nuget包  2.创建 log4net.config文件,选中文件鼠标右键,选择属性->复制到输出目录修改为始终复制<?xmlversion="1.0"encoding="utf-8"?><log4net><!--Debug日志--><appendername="RollingFileDebug"type="log......
  • 前端开发标签1
    标签<html></html>标签,网页必需标签<head></head>标签,用于定义文档头部,文档的头部描述了文档各种属性和信息,包括文档的标题,在WEB中的未知以及和其他文档的关系,绝大多数文档头部包含的数据都不会真正座位内容显示给读者<title></title>标签,页面标题<meta>单标签,表示为编码格式......
  • Web网络安全-----Log4j高危漏洞原理及修复_log4j漏洞是什么
    系列文章目录文章目录系列文章目录什么是Log4j?一、Log4j漏洞二、漏洞产生原因1.什么是Lookups机制2.怎么利用JNDI进行注入JNDI简介LADPRMI三、Log4j漏洞修复总结什么是Log4j?Log4j即logforjava(java的日志),是Apache的一个开源项目,通过使用Log4j,我们可以控制日......
  • log4net 在webapi中的简单使用
    1.安装两个nuget包:  2.创建log4net.config配置文件,并选中log4net文件点击鼠标右键选择属性将"复制到输出目录"改为"始终复制"<?xmlversion="1.0"encoding="utf-8"?><log4net><!--Definesomeoutputappenders--><appendername......
  • 前端开发三大主流框架解析
    Web前端三大主流框架分别是Angular、React和Vue.js。以下是《优联前端》关于这三个框架解析介绍:Angular:来源与开发者:Angular是由Google开发的前端框架。功能特点:Angular是一个完整的框架,包括了数据绑定、组件化、路由、依赖注入等功能。它采用了TypeScript作为开发语言,这是J......
  • WebGPU学习(11)--- 独立于 Canvas 绘制
    更多精彩内容尽在数字孪生平台,关注公众号:sky的数孪技术,技术交流、源码下载请添加VX:digital_twin123只想创建图像数据而不使用Canvas当使用WebGL时,我们始终必须从Canvas获取WebGL渲染上下文,因为渲染上下文与绘图目标紧密相关。但是WebGPU不一定需要Canvas来......