HTML-常用CSS解析

最新推荐文章于 2023-05-11 18:19:47 发布
最新推荐文章于 2023-05-11 18:19:47 发布
阅读量284 收藏
点赞数
分类专栏： HTML
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/samuelandkevin/article/details/78158864
版权
Div和Span演示效果
Div效果演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div效果演示</title>
        <style>
            div{
                border: 1px solid red;
                /*width: 400px;
                height: 200px;*/
            }

        </style>
    </head>
    <body>
        <div id="">
            <!--samuelandkevin-->
        </div>
        samuelandkevinAAA
    </body>
</html>
span演示
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>span演示</title>
        <style>
            span{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <span>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！
        </span>

    </body>
</html>
元素选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <style>
            div{
                font-size: 30px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
        </div>
    </body>
</html>
类选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>类选择器</title>
        <style>
            .div2{
                font-size: 30px;
                color: gold;
            }
        </style>
    </head>
    <body>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
        </div>
        <div class="div2">
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
        </div>
        <div class="div2">
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
        </div>
    </body>
</html>
id选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>id选择器</title>
        <style>
            #div5{
                font-size: 30px;
                color: yellow;
            }
        </style>
    </head>
    <body>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
        </div>
        <div class="div2">
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
        </div>
        <div class="div2">
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
        </div>
        <div id="div5">
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
        </div>
    </body>
</html>
层级选择器
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <style>
            div p{
                font-size: 30px;
                color: green;
            }
        </style>
    </head>

    <body>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
        </div>
        <div>
            <p>
                逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
            </p>
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
        </div>
        <p>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！66
        </p>
    </body>

</html>
属性选择器
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            input[type='text']{
                background-color: red;
            }


            input[type='password']{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        用户名；<input type="text" name="username"/><br />
        密码：<input type="password" name="password"/>
    </body>
</html>

CSS的引入方式

1.内部引入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <style type="text/css">
            div{
                font-size: 30px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
        </div>
    </body>
</html>

2.行内引入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <style type="text/css">
            div{
                font-size: 30px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
        </div>
        <div style="font-size: 20px;color: blue;">
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
        </div>
    </body>
</html>

3.外部引入

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>
    <body>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！11
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！22
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！33
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！44
        </div>
        <div>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！55
        </div>
    </body>
</html>
临海听风V
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML/CSS 知识点解析
webWangGe的博客
06-17 73
整个前端开发的工作流程 产品经理提出项目需求 UI出设计稿 前端人员负责开发静态页面(跟前端同步的后台人员在准备数据) 前后台的交互 测试 产品上线(后期项目维护) 互联网原理 当用户在浏览器输入网址的时候，就会发送到对应的服务器，请求该网址对应的网页信息 服务器会把该网址对应的网页资源，都下载到你电脑的临时文件夹 临时文件夹中的资源，通过浏览器显示出来(所以，我们第二次请求网站的时候，速度会快很多) 元素 行内元素：一行中有n多个行内元素，行内元素不能设置宽和高 块元素：一个块元素，
前端知识分享小课堂—html(全面解析css样式表)
yunduanaoligei的博客
12-13 220
今天分享下”前端知识分享小课堂—html(全面解析css样式表) “这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。 CSS（Cascading Style Sheet，叠层样式表），作用是美化HTML网页。 /注释区域/此为注释语法 一、样式表 （一）样式表的分类 1.内联样式表 和HTML联合显示，控制精确，但是可重用性差，冗余较多。 例：<p style="font-size:14px;">内联样式
浏览器解析HTML，CSS过程
春虫虫丶丶丶的博客
07-24 2643
每个浏览器都会有自己的呈现引擎，不同内核浏览器之间的解析顺序和方法存在差异，但都是大同小异； a)      呈现引擎，呈现引擎一开始会从网络层获取请求文档的内容，内容的大小一般限制在8000个块以内，然后进行如下所示的基本流程：                     i.           Parsing HTML to construct theDOM tree;        
html解析css,浏览器怎么解析css样式？
weixin_30146085的博客
06-30 156
浏览器怎么解析css样式？下面给大家介绍一下浏览器解析CSS样式的过程。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。解析一旦CSS 被浏览器下载，CSS 解析器就会被打开来处理它遇到的任何CSS。这可以是单个文档内的CSS、标记内的CSS，也可以是 DOM 元素的style属性内嵌的 CSS。所有CSS 都根据语法规范进行解析和标记。解析完成后，就会生成有一个包含所有选择器、属...
HTML+CSS详解
苏凯的博客
09-06 6504
HTML+CSS 网站用户注册页面显示 案例介绍 所有HTML标签中，表单标签是最重要的。在实际开发中，最经典的案例就是用户注册，几乎覆盖了表单标签的所有元素。效果如下： 案例相关标签 表单标签：&lt;form&gt; 描述：&lt;form&gt;表单标签，在html页面创建一个表单，表单标签在浏览器上没有任何显示。如果数据需要提交...
html-css-spotifyweb
03-17
【HTML与CSS在构建Spotify Web项目中的应用】 HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是Web开发的基石，它们共同作用于网页的结构和样式。在"html-css-spotifyweb"这个项目中，我们将会...
html-css-digitalocean
02-09
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两大核心技术。在"html-css-digitalocean"这个主题中，我们主要探讨如何使用这两门语言在DigitalOcean这样的云平台上创建和部署静态...
html-css-memory
02-15
浏览器会将HTML和CSS解析并构建渲染树，进而生成布局和绘制。过于复杂的CSS选择器可能导致内存占用过高，影响性能。尽量使用简单且高效的选择器，避免使用通配符选择器 `*` 或过多的后代选择器。另外，注意CSS权重，...
HTML-CSS：HTMLCSS任务
02-15
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两种核心技术。HTML用于定义网页的结构和内容，而CSS则用于控制网页的样式和布局。在这个"HTML-CSS"任务中，我们将深入探讨这两个...
HTML+CSS全解
最新发布
weixin_59779876的博客
05-11 69
一，CSS的基础知识： 样式的引入：行间样式、内部样式、外链样式； 选择器类型：通配选择器（*{}）、标记名选择器（li{}）、类名选择器(.classname{})、id选择器(#{})； 选择器组合：包含选择器、子元素选择器、分组选择器、下一个选择器 选择器优先级：!important > 行间样式 > id > class > 标记名 > 通配 /*包含选择器：元素1 元素2*/ /* CSS部分 */ .boxs .box1{ b
一文掌握HTML和CSS（详解）
王涛涛的博客
07-27 872
还是老套路：理论+实践 一、介绍什么是html html（超文本标记语言）：是编写网页内容的一种语言。 超文本有两层含义： （1）就是超越文本限制的内容，如图片，声音，视频等。 （2）就是超链接文本，从一个网页跳转到另一个网页。 二、html的基本结构 <!DOCTYPE html> # 文档声明，用来声明当前页面的html版本。目前这...
HTML之CSS详解
licong1520的博客
11-21 416
一.CSS概述 1.什么是CSS？ CSS：Cascading Style Sheets层叠样式表/级联样式表，简称样式表。 2.CSS作用 设置HTML网页元素的样式（修饰网页） 3.HTML与CSS的关系 HTML：构建网页内容 CSS：修饰网页 4.HTML属性与CSS属性使用原则 W3C建议尽量使用CSS属性来取代HTML的属性。 二.CSS的语法规范 1.使用CSS的方式 1.内联方...
Html、Css入门解析(复习专用)
Mr_Qian_Ives的博客
11-09 1808
Html 超文本标记语言（超过文本，还有图片等格式） 标签：单标签、双标签、框架标签 路径 相对路径 相对当前文件的路径 / 进入下一级目录 …/ 进入上一级目录 ./ 本目录 绝对路径 文件在计算机上的完整路径（X盘等），更换电脑时，可能会出现问题（由于底层路径不一致） 框架标签 !DOCTYPE html> 声明为HTML5 文档（告诉计算机，这个文档是HTML5的小弟） <html> 元素是HTML页面的根元素 <html lang="en"> 告
HTML&CSS
二月
01-28 829
2020.9.10 文章目录web概念概述软件架构B/S架构详解静态资源：动态资源：HTML web概念概述 JavaWeb：使用Java语言开发基于互联网的项目 软件架构 C/S: Client/Server 客户端/服务器端 在用户本地有一个客户端程序，在远程有一个服务器端程序 如：QQ，迅雷... 优点：用户体验好 缺点：开发、安装，部署，维护 麻烦 B/S: Browser/Server 浏览器/服务器端 只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端
讲解HTML和CSS（超详细）
Jinmuyan_的博客
05-06 1万+
讲解HTML和CSS（超详细）一、初始HTML和CSS1.html的发展历史2.html3.css二、HTML1.基本框架2.HTML5常用的标签和属性三、CSS1.css的使用2.css选择器总结 提示：以下是我的一些经验之谈，下面案例可供参考 一、初始HTML和CSS 1.html的发展历史 HTML 1.0 超文本标记语言(第一版) – 在1993年6月发为互联网工程工作小组(IETF)工作草案发布(并非标准) HTML 2.0 – 1995年11月作为RFC 1866发布，在RFC 2854于2
浏览器加载、解析、渲染的过程
热门推荐
季诗筱的博客
07-24 4万+
浏览器的加载、解析、渲染过程； css和js代码的几个最佳实践； js阻塞
深入解析HTML、CSS中的核心知识点
什么最重要？算法！！
07-27 3235
博客核心内容：1、vertical-align（如何将文字和图片进行水平对齐） 2、如何将文字和图片设置为居中 3、我是如何在图片上插入文字的. 4、标签盒子属性—–border 5、列表的相关属性操作 6、display重要特性（可以和float比肩的重要性能） 7、padding（通过padding也可以达到居中的效果） 8、float漂浮的作用（不仅仅是对块级标签有作用） 9、
浏览器如何解析html、css、js
秦爱德
09-13 2872
在熟悉了浏览器的工作原理之后，今天我们来讲讲浏览器在从服务器获取到网页文件之后是如何解析的。了解了这个基础知识，对敲出来的代码，质量会有不小的提升。 在此之前我先为上一篇《浏览器的工作原理–分析》做一下补充。 我们都知道浏览器只是下载到本地来浏览网页的一个软件！那么既然是软件，就有软件的诟病。软件的算法、代码的质量、所使用的内核、安全性的设置等等。都会影响着浏览器的运行速度，这就是为什么相同
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值