首页 > 其他分享 >CSS基础知识

CSS基础知识

时间:2024-08-21 11:55:30浏览次数:11  
标签:样式 基础知识 注释 HTML 样式表 CSS 页面

一、CSS介绍

1、什么是 CSS?

  • CSS 指层叠样式表 (Cascading Style Sheets)又叫级联样式表
  • 样式定义如何显示 HTML 元素
  • 样式通常存储在样式表中
  • 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题
  • 外部样式表可以极大提高工作效率
  • 外部样式表通常存储在 CSS 文件中
  • 多个样式定义可层叠为一个
  • CSS文件后缀名为.css

在学习CSS之前,你需要具备HTML的基本知识。

2、为什么使用CSS?

让网页具有美观一致的页面

CSS允许您针对HTML元素应用​特定的样式​。

CSS的主要好处在于,它允许你将样式与页面内容进行​分离​。

仅使用HTML,样式将和页面内容格式混杂在一起,这样的页面将会变得难以维护。

 所有的web页面样式都可以(也应该)从HTML文档中分离出来,建立成一个单独的CSS文件再进行引用。

3、CSS的优点

  • 节省时间 ​:可以编写一次CSS,然后在多个HTML页面中通过外部引入多次​重复使用
  • 页面加载速度更快​​:通过使用CSS,就不需要每次都编写HTML标记属性,只需要编写一个标记的CSS规则,并将其应用于该标记的所有实例,因此代码大大减少也就意味着下载时间短。
  • 易于维护​​ :如果要进行全局更改,则只需​更改样式​,所有网页中的所有元素都将会自动更新。
  • 多设备兼容性 ​:样式表允许针对多种不同类型的设备进行优化内容。

浏览器在样式表中​从上到下​读取样式定义。这也说明我们在样式表中定义的样式将覆盖样式表中先前定义的任何先前样式,不过我们可以在后面的元素中重新定义则不会被覆盖。

二、内联、内部样式、外部引用CSS

1、内联 CSS(行内样式)

在web文档中直接插入一个CSS是内联样式的使用方法之一。​内联CSS​也可称为​行内CSS​或者​行级CSS​,它直接在标签内部引入,显著的优点是十分的​便捷、高效​;但是同时也造成了不能够重用样式的缺点,如果代码行数到达一定长度不建议采用。通常内联CSS作为测试使用,可以查找代码中bug。

下面例子展示了,将段落内文本内容的颜色变为红色,背景变为蓝色:

2、内部样式表

在HTML页面的标题部分将内部样式定义在<style>元素中

例如:下列代码中的样式将作用在所有<p>段落中

3、外部引用CSS(推荐)

通过这种方法将所有的CSS样式保存在同一个后缀名为.css的拓展文件中。

然后通过html标签<link>在HTML页面的<head>部分将CSS文件引入。

如下例子所示:

HTML部分:

CSS部分:

结果:

相对路径和绝对路径都可以用来定义CSS文件的href。 在我的示例中,路径是相对的,因为CSS文件与HTML文件位于同一目录中。

三、CSS规则与选择器

1、CSS语法

CSS是由​浏览器​解释的​样式规则​,然后应用于文档中相应的元素。

样式规则有三个部分:选择器属性

例如,标题颜色可以定义为:

h1 { color: orange; }

详解:

选择器要指向需要设置样式的HTML元素。

在CSS样式规则中:

  • 各个属性与属性值间以​“键值对”​形式出现
  • 所有的属性设置都用​花括号​括起来
  • 属性名与属性值间用​冒号​连接
  • 多个键值对之间用​分号​分开

例如:

h2{
  color: red;
  background: #ccc;
  font-size: 16px;
}

2、标签选择器 

最常见和易于理解的选择器是​标签选择器​。 该选择器以页面上的​元素类型​为目标,按​标签名​分类,为页面中某一类标签指定统一的CSS样式。

其基本语法格式如下:

p {
   color: red;
   font-size:130%;
}

 CSS声明总是以​分号​结尾,而声明组则由​大括号​包围。

3、CSS注释

在​DIV+CSS网页​中时常使用​html注释​与​css注释​,而各种注释大多作用是在重要代码处加上注释说明注明意思。比如写了一段代码是比较特殊的时常需要改动的​CSS代码​,为了以后一下即可找到此段代码,这个时候加入​CSS 注释​加以说明,即可起到说明提示作用。

CSS注释语法为:/* 注释的内容 */​

注释​是以​“斜杠+星号”​开始,​“星号+斜杠”​结束,需要注意是​注释字符​均为​英文半角​小写。

/*这是一段注释*/

注释掉的内容是不会显示的,被注释的样式是不会产生对应的效果。

 注释是可以​跨越多行​的,而且写法一样哦

CSS只有一种注释,不管是多行注释还是单行注释,都必须以/*开始,以*/结束,中间加入注释内容。

四、CSS样式的级联与继承

1、CSS级联

级联​的顺序,首先要根据​起源(origin)​将规则分类。

网页的最终外观是不同的样式结合的结果。

通过样式的三个主要来源形成一个级联:

  • 由​页面的作者​创建的CSS样式
  • 浏览器​的默认CSS样式
  • 浏览页面的​用户自定义​CSS样式

具体优先顺序如下:

页面作者(author)设置的规则 > 用户(user)规则 > 浏览器(browser)规则

2、CSS继承

继承​是指属性在页面中流动的方式。 除非另有定义,子元素通常会采用父元素的特征。

例子:

<html>
   <head>
      <style>
      .father {
	color: red;

	font-size: 24px;

      }

     </style>
   </head>
   <body>       
      <div class="father">
            <div class="son">子元素</div>
      </div>

   </body>

</html>

结果:

 由于第二个div(子元素)位于外层div(父元素)内,并且它本身没有自己另外的定义,因此它将采用指定给外层div的任何样式。

标签:样式,基础知识,注释,HTML,样式表,CSS,页面
From: https://blog.csdn.net/qq_72013756/article/details/141357568

相关文章

  • python入门基础知识! 新手必备,看完技术突飞猛进!
    基本的类  python最基础、最常用的类主要有int整形,float浮点型,str字符串,list列表,dict字典,set集合,tuple元组等等。int整形、float浮点型一般用于给变量赋值,tuple元组属于不可变对象,对其操作一般也只有遍历。而str字符串,list列表,dict字典,set集合是python里面操作方法较为灵......
  • Nuxt3 使用animate.css来实现页面切换过渡效果
    首先,如果两个page分别在不同的layout下,是无法使用pageTransition来实现切换效果的,这时候需要使用layoutTransition来实现切换效果这里采用npmpackage的方式安装animate.css,当然采用cdn的形式也是可以的npmianimate.css然后在app.vue中导入<scriptsetup>import"anima......
  • CSS详知识点——CSS变形
    transform:属性translate():平移函数,基于X、Y坐标重新定位元素的位置translateX(tx)表示只设置X轴的位移#yi{transform:translate(50px,30px);}#yi{transform:translateX(100px);//只移动X轴上的方向}#yi{transform:......
  • 如何用css制作一个三角形?
    在CSS中,你可以使用多种方法来实现三角形。以下是两种常见的方法:方法一:使用边框(border)你可以使用一个空div,并利用其边框的宽度和颜色来创建三角形。例如,如果你想创建一个朝上的三角形,你可以这样写:创建一个向上的三角形HTML代码:html<divclass="triangle-up"></div>CSS代......
  • html+css+js -SE
    前端基础编辑器的vscode插件安装AutoRenameTag自动修改标签对插件ChineseLanguagePack汉化包HTMLCSSSupportHTMLCSS支持IntellijIDEAKeybindingsIDEA快捷键支持LiveServer实时加载功能的小型服务器openinbrowser通过浏览器打开当前文件的插件Prett......
  • [C语言]-基础知识点梳理-动态内存管理
    前言各位师傅大家好,我是qmx_07,今天给大家讲解动态内存管理的相关知识,下一章节更新文件管理部分的知识点为什么要进行动态内存分配intval=20;//在栈空间上开辟四个字节chararr[10]={0};//在栈空间上开辟10个字节的连续空间上述的开辟空间的⽅式有两个特点:空......
  • CSS2基础(part-1)
    CSS2基础基础简介【全称】CascadingStyleSheets,又名层叠样式表层叠:一层一层涂上去表:列表样式:如文字大小,颜色,元素宽高等。CSS描述了在屏幕、纸质、音频等其他媒体上的元素应该如何被渲染的问题。语言类型标记语言,为HTML结构美化样式,实现语义与效果的分离,更好地美化......
  • 如何用纯CSS绘制三角形--03
    下拉菜单中的箭头通常用于提示用户点击以展开菜单。CSS三角形实现这个箭头: <!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • 如何用纯CSS绘制三角形
    要用纯CSS绘制三角形,可以通过利用CSS中的border属性来实现。具体来说,核心原理是通过设置不同方向的边框颜色和宽度来形成三角形效果。以下是写技术博客时可以介绍的几个要点:1.三角形的基本原理CSS三角形的关键在于设置一个元素的宽高为0,同时通过边框来创建三角形。例如:.trian......
  • 如何用纯CSS绘制三角形--02
    通过结合@keyframes动画,让三角形实现旋转、移动等动态效果 代码如下:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......