互联网前端之 CSS 常见属性与三层结构

目录

现在互联网前端三层

CSS 常见属性


关注作者微信公众号,开启探索更多 CSS 知识的精彩之旅。在这里,你将收获丰富的CSS专业内容,深入了解这一网页开发语言的奥秘,不断拓展你的知识边界,提升技能水平。快来关注吧!

现在互联网前端三层


        在当今互联网前端开发中,主要由 HTML、CSS 和 JavaScript 三层构成。HTML 从语义角度描述页面结构,通过各种标签定义网页元素,良好的 HTML 结构有助于 SEO 和提高可访问性,为 CSS 和 JavaScript 提供基础页面框架。CSS 从审美的角度负责页面样式,可控制网页布局、颜色、字体、大小等外观属性,能使网页更加美观吸引人且实现响应式设计,在不同设备上有良好显示效果。JavaScript 从交互角度描述页面行为,可实现网页动态效果、用户交互和数据处理等功能,为网页增添活力和交互性,提升用户体验,使网页成为可与用户互动的应用程序。        

CSS 常见属性


        color 属性:用于设置文本的颜色。可以使用颜色名称(如red)、十六进制值(如#ff0000)或 RGB 值(如rgb(255,0,0))来指定颜色。

        background-color 属性:用于设置元素的背景颜色。同样可以使用颜色名称、十六进制值或 RGB 值来指定颜色。例如,设置背景颜色为黄色可以写成:

p{  background-color: yellow;  /*或*/  background-color: #00ff00;  /*或*/  background-color: rgb(255,0,255);  
}  

        font-size 属性:用于设置文本的字体大小。可以使用像素值(如40px)、百分比、em 等单位来指定字体大小。

        font-weight 属性:用于设置文本的字体粗细。可以使用normal(正常)、bold(粗体)、数字值(100 - 900)、bolder(更粗)、lighter(更细)等选项来指定字体粗细。

        font-style 属性:用于设置文本的字体样式。可以使用normal(正常)、italic(斜体)、oblique(倾斜)等选项来指定字体样式。

        text-decoration 属性:用于设置文本的装饰效果。可以使用overline(上划线)、line-through(中划线)、underline(下划线)、blink(闪烁)、none(无装饰)等选项来指定文本的装饰效果。

        这些 CSS 属性在网页设计中非常常用,可以帮助开发者实现各种不同的页面效果。通过合理地运用这些属性,可以使网页更加美观、易读、易用。

        示例代码如下:

        css:

<style type="text/css">  p{  color: rgb(255,0,0);  background-color: #ccc;  font-size: 23px;  font-weight: bolder;  font-style:italic;  text-decoration:underline;  }  span{  color:red;  background-color:pink;  font-size: 150%;  font-weight:lighter;  font-style:normal;  text-decoration:overline;  }  div{  color:#ffffff;  background-color:rgb(255,0,255);  font-size: 23px;  font-weight: normal;  font-style: oblique;  text-decoration:line-through;  }  
</style>  

        html:

<body>  <p>css常见属性</p>  <span>css常见属性</span>  <div>css常见属性</div>  
</body>  

        运行结果:

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.xdnf.cn/news/143813.html

如若内容造成侵权/违法违规/事实不符,请联系一条长河网进行投诉反馈,一经查实,立即删除!

相关文章

窗户检测系统源码分享

窗户检测检测系统源码分享 [一条龙教学YOLOV8标注好的数据集一键训练_70全套改进创新点发刊_Web前端展示] 1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 项目来源AACV Association for the Advancement of Computer Vision …

一文读懂DaemonSet以及实践攻略

一文读懂DaemonSet以及实践攻略 目录 1 概念 1.1 什么是DaemonSet1.2 DaemonSet 的工作机制1.3 适用场景1.4 DaemonSet 与 Deployment 的区别1.5 DaemonSet的通信模式 2 实践案例&#xff1a;部署和更新 Fluentd 日志收集器 2.1 部署Fluentd DaemonSet 2.1.1 定义Fluentd Dae…

2012年408考研真题-数据结构

8.【2012统考真题】求整数n(n≥0)的阶乘的算法如下&#xff0c;其时间复杂度是(&#xff09;。 int fact(int n){ if(n<1) return 1; return n*fact (n-1); } A. O(log2n) B. O(n) C. O(nlog2n) D. O(n^2) 解析&#xff1a; 观察代码&#xff0c;我们不…

【代码】使用c#实现串口通信的基础模板

一、分享代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Threading.Tasks; using System.Windows.Forms;using System.IO.Ports; using…

SAP中BW与OFFICE 64位兼容性问题解决实例

近期遇到一个BW与OFFICE的兼容性问题。新电脑(WIN11)安装使用SAP正常&#xff0c;安装OFFICE 2016 64位版时&#xff0c;BEx Aanlysis无法打开(没有提示&#xff0c;下位框不出现)。安装OFFICE 2016 32位版时&#xff0c;BW的Aanlysis可正常使用。 这个BEx Aanlysis我理解是SA…

链表--(1)链表的概念

前言引入 之前我们学习了数组这一概念,使用数组可以在编程时增加程序的灵活性。但在c语言中不允许定义动态数组的类型也不能随意调整数组的大小,往往会导致内存空间的浪费。由此我们推出链表。链表是动态进行内存分配的一种结构,它可以随时为其结点分配需要的存储空间也方便…

爬虫框架之Scrapy介绍——高效方便

# 近年来大数据分析、数据可视化和python等课程逐渐在大学各个学科中铺展开来&#xff0c;这样一来爬虫在平时小作业和期中、期末报告中出现的频率也逐渐变高。那么单一的使用requests库&#xff0c;自己从头到尾的的设计&#xff0c;考虑数据提取、线程管理和数据存储等方方面…

干货:分享6款ai论文写作助手,一键生成原创论文(步骤+工具)

写一篇论文是一个复杂的过程&#xff0c;涉及多个步骤&#xff0c;包括选题、研究、撰写、编辑和校对。AI可以在其中的一些步骤中提供帮助&#xff0c;但最终的论文还是需要人类作者的深入思考和创造性输入。以下是六款值得推荐的AI论文写作助手&#xff0c;其中特别推荐千笔-A…

前端开发之原型模式

介绍 原型模式本质就是借用一个已有的实例做原型&#xff0c;在这原型基础上快速复制出一个和原型一样的一个对象。 class CloneDemo {name clone democlone(): CloneDemo {return new CloneDemo()} } 原型原型链 函数&#xff08;class&#xff09;都有显示原型 prototyp…

Redis-01 入门和十大数据类型

Redis支持两种持久化方式&#xff1a;RDB持久化和AOF持久化。 1.RDB持久化是将Redis的数据以快照的形式保存在磁盘上&#xff0c;可以手动触发或通过配置文件设置定时触发。RDB保存的是Redis在某个时间点上的数据快照&#xff0c;可以通过恢复RDB文件来恢复数据。 2.AOF持久化…

深蓝学院-- 量产自动驾驶中的规划控制算法 小鹏

文章目录 0. 前言1.发展现状2.行车功能中难点问题及解决思路问题1&#xff1a;车道居中辅助&#xff0c;画龙&#xff0c;蛇行问题。问题2&#xff1a;外界环境扰动以及传感器信息缺失下的横向控制难点问题3&#xff1a;大坡度平稳停车 3. 泊车功能中难点问题及解决思路问题1&a…

尚品汇-秒杀下单实现-页面轮询查询订单状态(五十三)

目录&#xff1a; &#xff08;1&#xff09;整合秒杀业务 &#xff08;2&#xff09;秒杀下单 &#xff08;3&#xff09;秒杀下单监听 &#xff08;4&#xff09;页面轮询接口 &#xff08;1&#xff09;整合秒杀业务 秒杀的主要目的就是获取一个下单资格&#xff0c;拥…

【iOS】——JSONModel源码

JSONModel用法 基本用法 将传入的字典转换成模型&#xff1a; 首先定义模型类&#xff1a; interface Person : JSONModel property (nonatomic, copy) NSString *name; property (nonatomic, copy) NSString *sex; property (nonatomic, assign) NSInteger age; end接…

索引的介绍

目录 1.索引的介绍 1.1 什么是索引 1.2 为什么要使用索引 2.索引应该选择哪种数据结构 3.MYSQL中的页 3.1为什么要使用页 3.2页文件头和页文件尾 3.3 页主体 3.3页目录 3.4数据页头 4.B在MYSQL索引中的应用 4.1计算三层树高的B树可以存放多少条记录 5.索引分类 5.1 主…

居中左右对齐且加粗的蓝色文本

//test.html <!DOCTYPE html> <html> <head> <title>我的网页</title> <link rel"stylesheet" href"styles.css"> </head> <body> <p class"left-text">这是居左对齐且加粗的…

Element走马灯组件循环播放两个页面是方向不一致

摘要&#xff1a;使用Carousel 走马灯循环播放同一类型的图片、文字等内容&#xff0c;会在循环内容为两组是出现下图 [1]中的现象。本文记录下如何解决 之前项目遇到过一次这个问题&#xff0c;由于indicator-position 指示器不用显示&#xff0c;则判断内容长度为2时&#xf…

springboot通过tomcat部署项目(包含jar、war两种方式,迄今为止全网最详细!2024更新..建议收藏,教学!万字长文!)

本博客参考的所有文章均已在结尾声明&#xff01;&#xff01;&#xff01; 在 Spring Boot 项目中&#xff0c;有两种常见的部署方式&#xff1a; 1、使用 Spring Boot 自带的 内置 Tomcat&#xff0c;将项目打包为 jar 并直接运行。 2、使用 外置 Tomcat&#xff0c;将项目打…

【电路笔记】-运算放大器比较器

运算放大器比较器 文章目录 运算放大器比较器1、概述2、表示2.1 同相比较器2.2 反相比较器3、临界点转换4、施密特触发器4.1 同相触发器4.2 反相触发器4.3 应用5、总结1、概述 在前面的大多数运算放大器文章中,电路都有一个到反相输入的反馈环路。 这种设计是最常见的,因为它…

海外社媒干货:Twitter的特点及运营策略

当你在海外社交媒体上运营&#xff0c;了解不同平台的特点和具体实践是非常重要的。本期让小编来为你介绍推特&#xff08;Twitter&#xff09;以及一些相关的运营干货&#xff1a; &#xff08;图片源于网络&#xff09; Twitter简介 推特是一家美国社交网络及微博客服务的公…

通过Python代码发送量化交易信号邮件通知

量化交易利用数学模型和计算机算法来分析市场数据,并生成交易信号,本文将介绍如何使用Python编写一个简单的脚本,通过发送邮件通知量化交易信号。 开启SMTP服务 首先要在发件箱的邮件设置中,将POP3/SMPT服务开启,记录下授权密码,在本地可通过此密码登录,注意有效期和保…