当我们讨论网页设计时,样式是一个至关重要的方面。它使我们能够改变文本、图像和其他页面元素的外观,从而创造出吸引人的网页。在HTML DOM(文档对象模型)中,我们可以使用JavaScript来操作和控制样式。这篇博客将详细介绍HTML DOM样式控制,包括什么是样式、如何使用内联样式、如何操作类名、如何修改元素的样式属性,以及如何处理伪类和伪元素。无需担心,我们将从基础开始,逐步深入。
顾名思义,段落就是可以吧HTML文档分割为若干的段落。在HTML中,我们常用的方法就是通过标签来定义的
标签来定义的
html 的常见元素主要分为两类:head 区域的元素、body 区域的元素。下面来分别介绍。
我们在写网页的时候经常会遇到同一个HTML文件,使用了外部样式、内部样式以及内联样式,那么如果发生冲突时浏览器是怎么抉择的呢?
HTML(Hypertext Markup Language)和CSS(Cascading Style Sheets)是构建Web页面的两个基本技术。HTML负责定义页面的结构和内容,而CSS用于控制页面的样式和布局。在本篇博客中,我们将详细探讨如何将HTML和CSS结合使用,以创建精美的Web页面。
CSS(Cascading Style Sheets,层叠样式表)和 HTML 类似,CSS 也不是真正的编程语言,甚至不是标记语言。CSS 是一门样式表语言,用于为 HTML 元素添加样式,描述 HTML 文档外观,控制 HTML 文档元素的颜色、大小、字体、布局等。
1.CSS 概述 CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTML 元素 样式通常存储在样式表中 把样式添加到 HTML 4.0 中,是为了解决内容与表现分离的问题 外部样式表可以极大提高工作效率 外部样式表通常存储在 CSS 文件中 多个样式定义可层叠为一 样式可以规定在单个的 HTML 元素中,在 HTML 页的头元素中, 或在一个外部的 CSS 文件中。甚至可以在同一个 HTML 文档内部引用多个外部样式表 2.当同一个 HTML 元素被不止一个样式定义时,会使用哪个样式呢? 一般而言,所有的样式会根据下面的规则层叠于一个新的虚拟样式表中,其中数字 4 拥有最高的优先权。 1浏览器缺省设置 2外部样式表 3内部样式表(位于 <head> 标签内部) 4内联样式(在 HTML 元素内部) 3.CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 selector { declaration1; declaration2; … declarationN; } 选择器通常是您需要改变样式的 HTML 元素。 每条声明由一个属性和一个值组成。 h1 { color:red; font-size:14px; } 如果值为若干单词,则要给值加引号: p { font-family: “sans serif”; } 以上都称之为规则,一个规则里可以有不止一种声明。规则是包含在样式表中的。 4.不可以在内联元素 中嵌入 id 属性只能在每个 HTML 文档中出现一次。 5.CSS id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。 在现代布局中,id 选择器常常用于建立派生选择器(即选择器中多了一个元素,即为派生。比如#sidebar为选择器,#sidebar p为派生) #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }
id 属性只能在每个 HTML 文档中出现一次。 5.CSS id选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。 id 选择器以 “#” 来定义。 在现代布局中,id 选择器常常用于建立派生选择器(即选择器中多了一个元素,即为派生。比如#sidebar为选择器,#sidebar p为派生) #sidebar p { font-style: italic; text-align: right; margin-top: 0.5em; }
================================================
前端开发的核心构建在三大基石技术上:HTML、CSS和JavaScript。回想起多年前,前端开发者常被戏称为“切图仔”,但就是这样的角色,通过精湛的CSS技巧,能够实现各种复杂的交互和特效,展现出前所未有的网页魔法。这是那些专注于服务端开发的工程师所难以企及的领域。
三、CSS优先级 层叠,指的是样式的覆盖。当样式的覆盖发生冲突时,以优先级高的为准。 当同一个元素 的同一个样式属性被赋予多个属性值时,我们就需要遵循一定的优先级规则来选择属性值。 样式覆盖发生冲突常见的 5 种情况: 引用方式冲突 继承方式冲突 指定样式冲突 继承样式与指定样式冲突 !important 1.引用方式冲突 CSS有 3 种常用的引入方式: 外部样式 内部样式 行内样式 CSS引用方式不同,也会产生冲突。 (1)3种方式的优先级 行内样式 > (内部样式 = 外部样式)
上一节我们已经掌握了常用css选择器和css的一些常用属性,本节我们进一步扩展css选择器的内容包括内容如下:
<meta charset="utf-8"> 规定页面的字符编码 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> meta name="viewport" viewport视口:手机屏幕/电脑屏幕等设备的视口有多大 width=device-width: 视口宽度=设备宽度 initial-scale=1.0: 初始化的缩放比例是1 maximum-scale=1.0: 最大缩放是1 user-scalable=no: 用户不能缩放
HTML <head> 查看在线实例 <title> - 定义了HTML文档的标题 使用 <title> 标签定义HTML文档的标题 <base> - 定义了所有链接的URL 使用 <base> 定义
CSS 是个缩写形式,其全称为 Cascading Style Sheets,翻译成中文的含义为层叠样式表。
(注1:如果有问题欢迎留言探讨,一起学习!转载请注明出处,喜欢可以点个赞哦!) (注2:更多内容请查看我的目录。)
注意:手机(APP)打开,内容显示更佳,不会的私聊博主即可 想要拿代码或加入学习计划(** 博主会监督你并且教你写文章 **)的拉到最下面(PC端Web打开)加博主即可,目录也在最下面。
HTML,全称超文本标记语言(Hypertext Markup Language),是一种用于创建网页的标准标记语言。HTML为网页提供了一种结构性的标记方式,使得浏览器可以正确地解析和显示网页内容。
如果格式有问题,可以直接在这里进行查看 https://www.yuque.com/shuangguidaidan/ft6o18/tcu448
版权声明:本文为博主原创文章,欢迎转载,转载请注明出处。 https://blog.csdn.net/FE_dev/article/details/77888446
HTML5中的一个主要变化是:将元素的语义与元素对其内容呈现结果的影响分开。从原理上讲这合乎情理。HTML元素负责文档内容的结构和含义,内容的呈现则由应用于元素上的CSS样式控制。下面介绍最基础的HTML元素:文档元素和元数据元素。
介绍 我们已经使用基本的 HTML 编写了一个网页。但是,写出来的 HTML 代码的网页看起来很平淡,没有吸引力。 如何改善这种很平淡的页面呢? 让我们开始使用网页的基本样式来改善页面效果,我们将会使
例子:行内式
层叠样式表(Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。 CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或
CSS 大大提高工作效率,可以将 HTML 代码与样式代码分离,让原本 HTML 不能描述的效果,通过 CSS 描述出来。
CSS ( Cascading Style Sheets ) 层叠样式表 有 3 种引入方式 :
在 CSS 样式中设置属性值 display: block; , 可以将 行内元素 转换为 块级元素 ;
简述: HTML 标签原本被设计为用于定义文档内容, 通过使用 、、
、
②内部样式表 -在HTML文档头部 <head> 区域使用<style> 元素 来包含CSS;
语法结构:选择器 + 一条/多条 声明 如 p {color: red; font-size: 12px;} css 声明总以; 结束,并用 {} 括起来 注释/* 和 */ 开始和结束
jQuery操作样式 css操作 功能:设置或者修改样式,操作的是style属性。 操作单个样式 //name:需要设置的样式名称 //value:对应的样式值 css(name, value); //使用案例 $("#one").css("background","gray");//将背景色修改为灰色 设置多个样式 //参数是一个对象,对象中包含了需要设置的样式名和样式值 css(obj); //使用案例 $("#one").css({ "background":"gray", "widt
这个时候子元素的行高就是 当前元素的字体大小的多少倍,line-height=10,子元素的行号就是字体大小的10倍 如下图字体大小为9px 行高为90px
关于css是什么,详细的介绍大家自行查阅资料。比如昨天的的只有HTML文件那些内容的话,显示的内容很不友好,从上到下的顺序显示,从左到右看,只有左边有内容,右边是空的。这里如何排版布置就是CSS的作用。
标题(Heading)是通过 - 等标签进行定义的。 定义最大的标题。 定义最小的标题。
如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
所有的html标签中,表单标签是最重要的。在实际开发中,最经典的实例就是用户注册,覆盖了表单标签的所有的元素。效果图如下:
属性选择器 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>属性选择器</title> <style> .red{ color: red; } .blue{ color: blue; } .darkred{ color: darkred;
最近视频看的差不多了,就是一直没总结,这几天在上班之余,偷偷地总结吧,毕竟一些大牛已经快起飞了。
注:从上述两个例子中我们可以看出,子代选择器只选择指定标签的第一代子元素或者理解为它的直接后代(只指定儿子,而不管孙子),后代选择器是作用于所有子后代元素(不只儿子,还可以选择到孙子,重孙子等等)。
一、超链接伪类 1.何为超链接伪类 在CSS中,使用超链接伪类来定义超链接在鼠标点击的不同时期的样式。 (1)语法格式 a:link{...} a:visited{...} a:hover{...} a:active{...} ① 伪类 伪类 说明 a:link 定义a元素未访问时的样式。 a:visited 定义a元素访问后的样式。 a:hover 定义鼠标经过a元素时的样式。 a:active 定义鼠标点击激活时的样式。 Ⅰ.定义顺序 定义这四个伪类时,必须按照link、visited、hov
选择器主要作用是为了确定需要改变样式的HTML元素 每一条声明由一个属性和一个值组成,使用花括号来包围声明,属性与值之间使用冒号(:)分开
很久都没有更新了,今天再更新一些使用的小技巧,今天给大家带来的内容是如何快速的将一行 div 元素设置到屏幕底部,今天的主要内容有
给同一个选择器设置相同的样式,此时一个样式就会覆盖(层叠)另一个冲突的样式,层叠性主要解决样式冲突的问题。
1、目前主流的浏览器以及其内核名有哪些? 点这里查看 2、内元素和块级元素的区别? 行内元素:不会独立出现在一行,单独使用的时候后面不会有换行符的元素。eg:span, strong, img, a 等。这些元素,默认的高宽,总是其内容的高宽。并且,margin和padding值,只有左右有效。 块级元素:独立在一行的元素,他们后面会自动带有换行符。eg:div , p ,form , ul , li , ol , dl 等。它们的出现,往往独自占领一行。在没有设置宽度的情况下,默认宽度总是其父元素的宽度。 行内元素转换成块元素,只要设置其display属性为block即可,display:block; 。块元素转换成行内元素,只要将其display属性设置为inline即可,display:inline;。
CSS(层叠样式表)控制着网页的样式,例如我们之前编写的HTML文件,文字的颜色都是默认的黑色,如果希望将文字设置成其他颜色,就需要CSS了,可以在HTML文件中填写如下代码,即可把一个h1标签的文字设置成红色;
HTML是Hyper Text Markup Language的缩写,意思是“超文本标识语言”,它实际上是专门用来编写网页的一种编程语言,网页的构成基础就是HTML的语句。
软件包括操作系统及虚拟机、编程(语言)、算法、应用程序等,软件是应用程序的超集。应用程序是一种直接面向用户的软件。
领取专属 10元无门槛券
手把手带您无忧上云