首页 > 其他分享 >CSS基础知识总结(1)

CSS基础知识总结(1)

时间:2024-07-05 12:08:18浏览次数:1  
标签:总结 样式 元素 基础知识 HTML id 选择器 CSS

1、CSS引入有哪几种方式?分别说说三种方式的使用方法和优缺点。

三种:元素选择器,类选择器,id选择器。

元素选择器就直接使用该HTML元素名称,在该元素名称下面写样式并进行应用。

类选择器在CSS样式中,需要在类名的前面加上.,在HTML元素当中,我们应用起来就是元素名 class="类名“。

Id选择器在CSS样式当中,需要在ID名字前面加上.,在HTML元素当中,我们应用起来就是元素名 id="id名称"。

它们之间的优先级为ID选择器>类选择器>类型选择器。

类型选择器的话,它有一个问题就是它覆盖范围很广,例如我们写P{ };那么所有的P元素都会应用上该样式,如果我们不想这样做的话,我们需要引入类选择器,这个也是应用最为广泛的选择器,他会在所有我么类名相同的元素上面应用它。这个对于id选择器来说,也是类似的,但是id选择器的优先级更高;

我们可以指向特定元素的类,或者多个类指定同一个元素;但是我们需要注意的地方在于,一篇文档中,一个id只能用到一次。

2、CSS的工作原理是什么》浏览器碰到无法解析的CSS会发生什么?

CSS的工作原理是首先把HTML文件进行载入,然后HTML文件会转换为一个DOM,接下来,浏览器会拉取该文件的大部分内容(包括CSS),然后浏览器会对拉取到的CSS内容进行解析,根据选择器类型的不同,把它们分到不同的地方集中存放,然后浏览器将它找到的不同的选择器的不同的规则应用到对应的DOM节点,并添加节点依赖的样式(渲染树),渲染树会依照应该出现的结构进行布局。然后网页显示出来(着色)。

浏览器碰到无法解析的CSS时,会直接跳过它,进行下一个样式的解析。

3、CSS当中的注释。

/**/

4、CSS中的边框属性,上下左右设置的顺序是?

按照顺时针的顺序,上右下左;

如果我们设置了一个值,那么四条边样式都是这个;

如果我们设置了两个值,那么上下的样式是第一个值,左右的样式是第二个值;

如果我们设置了三个值,那么上下的样式分别为第一个,第三个值,左右的样式均为第二个值。

5、CSS中实现文本首行空两格。

text-indent: 2em; 6、em和px单位的区别,em和rem的区别。 px是绝对单位,em是相对单位,其中em是相对于元素的字体大小。rem指的是相当于根元素的字体大小,它不会继承其父元素的字体尺寸。

 

标签:总结,样式,元素,基础知识,HTML,id,选择器,CSS
From: https://www.cnblogs.com/TomHard/p/18285567

相关文章

  • python作业题百度网盘,python大作业总结
    大家好,小编来为大家解答以下问题,python作业题百度网盘,python大作业总结,现在让我们一起来看看吧!大家好,本文将围绕python大作业代码及文档展开说明,python大作业代码100行是一个很多人都想弄明白的事情,想搞清楚python期末大作业题目需要先了解以下几个事情。大家好,给大家分......
  • Python初学者必须掌握的基础知识点
    1.数据类型和变量1.1缩进和注释的规则Python使用缩进来表示代码块,通常使用四个空格或一个制表符。注释使用#开头。#这是一个注释ifTrue:print("Hello,World!")#这是另一个注释1.2基本数据类型Python支持多种基本数据类型,包括整数、浮点数、......
  • 如何利用 SCSS 的变量和混合(Mixin)功能来创建可复用的样式组件,并确保在不同场景下的兼
    使用SCSS的变量和混合功能可以方便地创建可复用的样式组件,并确保在不同场景下的兼容性。下面是具体的步骤:创建变量:使用$符号定义变量,例如$primary-color:#005500;。这样可以方便地在整个项目中重复使用该颜色。创建混合(Mixin):使用@mixin关键字创建混合,例如@mixi......
  • 如何在 SCSS 中实现复杂的嵌套选择器并确保代码的可维护性?
    在SCSS中实现复杂的嵌套选择器时,可以遵循以下几个原则以确保代码的可维护性:限制嵌套层级:避免层级过深的嵌套,最好不要超过三级。过多的嵌套会增加代码的复杂性和选择器的特异性,降低代码的可读性和维护性。使用父元素选择器:尽量使用父元素选择器&来限定样式的作用范围......
  • Delphi 常用控件之TlistView总结
    TlistView组件功能:(1)TListView控件可以用来显示各项带图标的列表,包括大图标和小图标的;也可以用来显示带有子项的列表,Windows操作系统的资源管理器中文件夹窗口就是最好的应用例子,就是我们打开"我的电脑"后能够看到各个盘符的界面(2)TListView控件基本能实现和DBGrid控件一......
  • 7.4日BootlLoad总结
    最近在研究单片机远程升级方法,看了网上许多资料后了解到,远程升级就是用IAP方法去烧写flash区,而IAP方法在EEPROM中有用到,也就是所说的掉电记忆,掉电不丢失的情况,而相较于51单片机,网上的资料大多是有关STM32单片机的,且使用操作系统,适合于芯片内存较大的芯片,分区成3-4块,首先是BOOT引导......
  • 设计模式-设计原则与设计模式总结
    设计原则,是设计模式的基础。在实际开发中,并不是一定要求所有代码都遵循设计原则,我们需要综合考虑人力、时间、成本、质量,不是可以追求完美,要在设当的场景遵循合适的设计原则,体现的是一种平衡取舍,帮助我们设计出更加优雅的代码结构。设计模式(DesignPattern)是前辈们经过相当长的......
  • css盒子模型
    1.(内容)盒子组成盒⼦属性(Boxproperties)margin外边距border边框  padding的外边缘与margin的内边缘之间,默认值为0padding内间距 width&height内容区域宽⾼设置高度 因为父元素没有高度,所以他设置百分比时不能出现边框属性border-wi......
  • css练习2
    一、 选择题1. 下列哪些CSS属性可以被子元素继承?AA. colorB.borderC.marginD.padding只有以color/font-/text-/line-开头的属性才可以继承2. 下列哪个不是可以继承的属性?DA. font-sizeB.text-decorationC.font-weightD.border-width只有以color/......
  • css的布局
    1css布局标准流标准流处在网页的最底层,表示页面的位置。在标准流中有两种排列方式,垂直排列,水平排列在css中将元素分为三类,行内元素,块级元素,行内块级元素如果是块级元素,就会垂直排列,如果是行内元素或者行内块级元素,就会水平排列如何让块级元素水平排列呢?  float:left......