首页 > 其他分享 >HTML——day4(css)

HTML——day4(css)

时间:2023-02-23 23:48:25浏览次数:36  
标签:调用 标签 day4 我们 HTML 选择器 css

今天开始涉及到css的相关知识。

css本质上是和HTML一样的标记语言,准确的来说他是一种层叠式样式表,主要是我们用来美化页面。

css主要有两种东西构成:选择器,声明。

与HTML相似但不同的是HTML代码一般写在body标签中而我们的css一般写在head标签中

首先我们在head标签中写下:

<style></style>标签在其中进行我们选择器的设定以及声明的设定。

我们的标签选择器分为4种:标签选择器、类选择器(非常常用)、id选择器、通配符选择器

标签选择器:

这里我们说的选择器可以简单的说成是标签的名字例如<p></p>标签我们要设置样式的时候

p {

font-size: 12px

color: red;

}

这里表示我们将p标签中的内容设置为红色以及字体大小为12px,在这里要注意的是我们的p作为选择器,花括号内的东西叫做声明,声明一般一键值对的形式出现,并且我们在写着几行代码时候p要和后面有个空格,声明中的属性与属性值之间有冒号和一个空格。

从上面我们可以直到这种设置的方法,他有一个优点就是我们可以设置很多的同名标签,也就是说我们下方body中所有的p标签都会是这样的样式

,批量操作起来非常快捷。但是我们实际运用中并不是这样的,肯定是有不一样的样式需要去设置,这时后用这种梦办法就行不通了。接下来我们讲述另几种可以单独给标签设置的方法。

类选择器:

我们单独想改变某一个标签样式时,我们在style标签内声明一个类,然后在下面的标签中我们可以直接调用,这样就实现了我们单独设置样式的目的,

.red{

color: red;

属性: 属性值;

}

.size {

font-size:50px

}

上面是我们类标签选择器的语法,我们用的类可以在下面调用

<p class="red size">我是红色</p>

同时我们也可以在p标签内中的class属性中的属性值中同时写两个类,他们之间用空格隔开。值得我们注意的是我们的类名不能是我们的标签名这点很重要。

id选择器:

我们的id选择器和类选择器非常类似都是采用上放弃昂进行声明下方进行调用,声明的方法和类一样不管类名前面不再是小黑点而是#,同时他们最大的区别就是,我们的类选择器可以调用无数次而ID选择器只能被调用一次。

同时在下方调用的时候我么用的属性为id而不是class。

通配符标签;

其作用是全局设定,不需要调用,直接在style标签中写即可;

*{

color: red;

}

 

标签:调用,标签,day4,我们,HTML,选择器,css
From: https://www.cnblogs.com/222wan/p/17149872.html

相关文章

  • CSS背景设置与Emmet语法
    CSS背景设置通过CSS背景属性,可以给页面元素添加背景样式,页面元素指任意标签。背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等。 背景颜色一般......
  • 02.HTML基础
    01.HTML基本结构1.版本声明,告诉浏览器按照h5规范解析当前文档<!DOCTYPEhtml>2.根标签<htmllang="en"></html>3.头部<head><metacharset="UTF-8">网页......
  • HTML渲染的基本过程
    一、HTML网页渲染的基本过程将URL对应的各种资源,通过浏览器渲染引擎的解析,输出可视化的图像二、浏览器的渲染引擎一个渲染引擎大致包括HTML解释器、CSS解释器、布局和J......
  • QT 让QGraphicsView 和 QGraphicsScene 重合
    Qt关于QGraphicsView和QGraphicsScene坐标系对不上的问题原文链接:(15条消息)Qt关于QGraphicsView和QGraphicsScene坐标系对不上的问题_屁股大象的博客-CSDN博客_qt坐标......
  • SAP UI5 index.html 里的 bootstrap script 介绍
    在SAPUI5应用程序的index.html文件中,通常有一行类似于以下代码的声明:<scriptid="sap-ui-bootstrap"src="resources/sap-ui-core.js"data-sap-ui-theme="sap_b......
  • 直播软件源码,在vue中使用html2canvas在前端生成图片
    直播软件源码,在vue中使用html2canvas在前端生成图片1、安装 npminstallhtml2canvas​2、用法 importhtml2canvasfrom'html2canvas'; html2canvas(document.......
  • CSS Hack
    一、什么是CSSHackCSShack是通过CSS样式中加入一些特殊的符号,让不同的浏览器识别不同的符号(什么样的浏览器识别什么样的符号是有标准的,CSShack就是让你记住这个标准),以......
  • CSS 注释
     注释是用来解释你的代码,并且可以随意编辑它,浏览器会忽略它。CSS注释以 /* 开始,以 */ 结束,实例如下:实例/*这是个注释*/p{text-align:center;/*这是另......
  • CSS Id 和 Class
    id和class选择器如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id"和"class"选择器。id选择器id选择器可以为标有特定id的HTML元素指定特定的样式。......
  • CSS 创建
    CSS 创建当读到一个样式表时,浏览器会根据它来格式化HTML文档。如何插入样式表插入样式表的方法有三种:外部样式表(Externalstylesheet)内部样式表(Internals......