5.1使用css修改网页元素

已于 2022-07-31 22:53:50 修改
阅读量895 收藏
点赞数
文章标签： html 前端
于 2022-07-27 16:24:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LIN861/article/details/126017543
版权

1.文本控制的常用属性

属性

说明

Font-family

设置字体类别

Font-size

设置字体大小

Font-weight

设置字体粗细

Font-style

设置字体倾斜

text-decoration

设置添加到文本的修饰效果

color

设置文本的颜色

text-align

设置文本的水平对齐方式

text-indent

设置段落的首行缩进

line-height

设置行高

word-spacing

设置字间距

letter-spacing

设置字符间距

text-transform

设施之文本大小写

2设置文字样式

2.1设置文字的字体

语法：   font-family：字体名称

参数：   字体名称按照优先顺序排列，用逗号隔开。

2.2设置字体大小

语法：   font-size：绝对尺寸  |  相对尺寸  |  百分数

参数：

       绝对尺寸：根据对象字体进行调节，可选值有 x-small | small | medium | large | x-large

       相对尺寸：是相对于父对象中字体尺寸进行相对调节

       百分数：其取值是基于父对象中的字体的尺寸

2.3设置字体的粗细

语法：   font-weight:bold | number | normal

参数：

       bold 为粗体，相当于number值的700

       number取值为数字

       normal为正常字体，相当于number的400

2.4设置字体的倾斜

语法：   font-style：normal | italic | oblique

参数：   normal为无效果，italic为斜体，oblique为倾斜体

2.5设置字体修饰

语法：   text-decoration：underline | blink | overline | overline | line-through | none

参数：

       underline下划线

       blink闪烁

       overline上划线

       line-through贯穿线

       none无装饰

2.6设置文本颜色

语法：color：颜色值

参数可为颜色名、颜色十六进制码、rgb代码、rgb百分数

LIN861246
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
疯狂HTML 5+CSS 3+JavaScript讲义（第2版）+源代码
11-19
目录 第1章　HTML 5简介 1 1.1　HTML历史与HTML 5 2 1.2　HTML 5的优势 6 1.3　HTML 5的基本结构和语法变化 8 1.4　本章小结 12 第2章　HTML 5的常用元素与属性 14 2.1　HTML 5保留的常用元素 15 2.2　HTML 5增强的iframe元素 34 2.3　HTML 5保留的通用属性 40 2.4　HTML 5新增的通用属性 44 2.5　HTML 5新增的结构元素 48 2.6　HTML 5新增的语义元素 55 2.7　HTML 5头部和元信息 59 2.8　HTML 5新增的拖放API 63 2.9　本章小结 71 第3章　HTML 5表单相关的元素和属性 72 3.1　HTML原有的表单及表单控件 73 3.2　HTML 5新增的表单属性 83 3.3　HTML 5新增的表单元素 90 3.4　HTML 5新增的客户端校验 96 3.5　本章小结 100 第4章　HTML 5的绘图支持 101 4.1　使用canvas元素 102 4.2　绘图 103 4.3　坐标变换 118 4.4　控制叠加风格 123 4.5　控制填充风格 124 4.6　位图处理 128 4.7　输出位图 132 4.8　动画制作 133 4.9　本章小结 136 第5章　HTML 5的多媒体支持 137 5.1　使用audio和video元素 138 5.2　使用JavaScript脚本控制媒体播放 141 5.3　事件监听 144 5.4　track元素 146 5.5　本章小结 149 第6章　级联样式单与CSS选择器 150 6.1　样式单概述 151 6.2　CSS样式单的基本使用 152 6.3　CSS选择器 158 6.4　伪元素选择器 167 6.5　CSS 3新增的伪类选择器 176 6.6　在脚本中修改显示样式 195 6.7　本章小结 197 第7章　字体与文本相关属性 198 7.1　字体相关属性 199 7.2　CSS 3支持的颜色表示方法 205 7.3　文本相关属性 206 7.4　CSS 3新增的服务器字体 212 7.5　本章小结 215 第8章　背景、边框和边距相关属性 216 8.1　盒模型简介 217 8.2　背景相关属性 217 8.3　使用渐变背景 226 8.4　边框相关属性 239 8.5　使用opacity控制透明度 246 8.6　padding和margin相关属性 247 8.7　本章小结 249 第9章　大小、定位、轮廓相关属性 250 9.1　width、height相关属性 251 9.2　定位相关属性 255 9.3　轮廓相关属性 257 9.4　用户界面和滤镜属性 258 9.5　本章小结 263 第10章　盒模型与布局相关属性 264 10.1　盒模型和display属性 265 10.2　对盒添加阴影 275 10.3　布局相关属性 278 10.4　CSS 3新增的多栏布局 285 10.5　使用弹性盒布局 289 10.6　本章小结 306 第11章　表格、列表相关属性及media query 307 11.1　表格相关属性 308 11.2　列表相关属性 313 11.3　控制光标的属性 316 11.4　media query和响应式布局 317 11.5　本章小结 323 第12章　变形与动画相关属性 324 12.1　CSS 3提供的变形支持 325 12.2　CSS 3新增的3D变换 337 12.3　CSS 3提供的Transition动画 341 12.4　CSS 3提供的Animation动画 345 12.5　本章小结 349 第13章　JavaScript语法详解 350 13.1　JavaScript简介 351 13.2　数据类型和变量 356 13.3　基本数据类型 364 13.4　复合类型 376 13.5　运算符 381 13.6　语句 391 13.7　流程控制 395 13.8　函数 403 13.9　函数的参数处理 425 13.10　面向对象 429 13.11　创建对象 437 13.12　本章小结 443 第14章　DOM编程详解 444 14.1　DOM模型概述 445 14.2　DOM模型和HTML文档 446 14.3　访问HTML元素 448 14.4　修改HTML元素 456 14.5　增加HTML元素 458 14.6　删除HTML元素 463 14.7　传统的DHTML模型 467 14.8　使用window对象 469 14.9　navigator和地理定位 479 14.10　HTML 5增强的History API 485 14.11　使用document对象 490 14.12　HTML 5新增的浏览器分析 493 14.13　本章小结 496 第15章　事件处理机制 497 15.1　事件模型的基本概念 498 15.2　绑定事件处理函数 499 15.3　事件处理函数的执行环境 505 15.4　事件类型 521 15.5　本章小结 534 第16章　本地存储与离线应用 535 16.1　Web Storage 536 16.2　Indexed数据库API 545 16.3　离线应用 564 16.4　本章小结 571 第17章　文件支持与二进制数据 572 17.1　HTML 5增强的文件上传域 573 17.2　ArrayBuffer与TypedArray 578 17.3　Blob类 583 17.4　本章小结 587 第18章　Web Worker多线程API 588 18.1　使用Worker创建多线程 589 18.2　与Worker线程进行数据交换 591 18.3　Worker线程嵌套 594 18.4　使用SharedWorker创建共享线程 597 18.5　Promise 603 18.6　本章小结 611 第19章　客户端通信 612 19.1　跨文档消息传递 613 19.2　使用WebSocket与服务器通信 621 19.3　使用Server-Sent Events API 630 19.4　使用Beacon 635 19.5　本章小结 636 第20章　HTML 5的疯狂俄罗斯方块 637 20.1　俄罗斯方块简介 638 20.2　开发游戏界面 639 20.3　俄罗斯方块的数据模型 640 20.4　实现游戏逻辑 644 20.5　本章小结 654
修改网页内容，随心所欲改变网站显示内容
热门推荐
晴天有点孤单
09-03 2万+
javascript:document.body.contentEditable=’true’;document.designMode=’on’;void o然后回车，你就可以随心所欲的修改这个网站啦！输入如下代码，将退出编辑状态！javascript:document.body.contentEditable=’false’;document.designMode=’on’;void o
网页元素可以编辑
sphinger的专栏
11-12 557
在地址栏输入这一行代码，然后回车，就发现整个页面都可以随意编辑了。仅仅是一行很短的代码。页面上的所有内容都可以修改了，就像在word中编辑一样。那些不让拷贝的网站可以被这招通杀了。以后谁还会傻乎乎地分析页面代码，然后修改，保存，刷新，再拷贝呢？javascript:document.body.contentEditable=true; document.designMode=on;
如何使用JS修改页面元素（附练习案例）
ZZZzzz98的博客
10-20 1512
使用不同方法实现对页面元素、属性以及CSS进行修改（三个案例帮你快速掌握）
修改HTML元素
立业的博客
12-10 163
通过HTML DOM，JavaScript能够访问并修改HTML文档中的每个元素 修改元素文本内容 document.getElementById("p1").innerHTML="新文本!"; //更新了id是p1元素的文本节点内容 修改元素样式 document.getElementById("p2").style.color="blue"; document.getElementB...
用CSS设置颜色、背景和图像效果
微风洋洋的博客
02-08 1万+
这篇文章简单介绍了用CSS设置颜色、背景和图像效果的基本知识，重要的知识点就是图文混排，尤其要注意图片的位置，为后面将相对位置、绝对位置做好铺垫。
黑马前端-Web APIs—设置/修改DOM元素内容和元素属性
黑马程序员官方博客
06-21 1702
教程：JavaScript核心之Web APIs实用案例 前期更新笔记内容：Web API 基本认知 / 获取DOM元素例子：例子： 例子：知识小结：例子： 小结 ： 案例： 页面刷新，页面随机更换背景图片 黑马前端专栏干货多多，关注再学，好方便~2022年前端学习路线图：课程、源码、笔记，技术栈 另外此线路图实时更新！需要课后资料的友友们，可以直接告诉我。...
如何使用css美化你的页面？
ysds20211402的博客
02-18 1001
转自：微点阅读 https://www.weidianyuedu.com 相信大家通过上一篇文章的学习已经成功的创建了自己的第一个网页。虽然只有一句话，但这个仍然是一个网页。但是我相信你，一定觉得这个页面不好看，想自己美化一下，今天就可以实现这个愿望，让我们来认识一下CSS。 什么是css呢？css是指层叠样式表(CascadingStyleSheets)，简单来说就是帮你美化页面的。 如上图所示，在head标签下面写一对"style"标签。这个"style"标签就是用来写css样式...
操作元素之修改元素内容
weixin_67110633的博客
02-01 1275
JavaScript中的DOM操作可以改变网页内容，结构和样式，我们可以利用DOM操作元素来改变元素里的内容，属性。
前端CSS网页组成部分，以及修改元素的三种方式
ma1271281408的博客
01-06 112
#CSS简介介绍
jQuery修改页面元素值
weixin_30408675的博客
07-17 369
1,textarea <textarea id="log" rows="10" cols="100"></textarea>chrome:　　$("#log").text(msg);　　$("#log").val(msg);　　$("#log").html(msg); 2,tbody $("#id").html(msg);3,var value ...
修改css及js文件后无法刷新浏览器的css及js缓存
夜空下的凝视
04-03 506
解决办法： 在文件路径最后加“?参数=值”，参数和值可随意设置，保存后刷新页面即可。原因是将修改后的文件当成新文件重新加载了。 <link type="text/css" rel="stylesheet" href="/css/index.css?key=1" /> <script type="text/javascript" src="/js/min.js?key=2">...
解决修改css或js文件，浏览器缓存更新问题。
asdfgh0077的博客
07-20 202
解决修改css或js文件，浏览器缓存更新问题。
vue中动态修改css其中一个属性值
younger_z的专栏
06-07 7170
<template> <!--此div的高度取屏幕可视区域的高度--> <div class="hello" :style="{'height':getClientHeight}"> <h5>{{ msg }}</h5> </div> </template> <script> ex...
使用CSS选择器在页面中插入内容
xyjikl
07-07 1818
在css中，我们可以使用:before伪元素选择器与:after伪元素选择器在页面的前面和后面以content属性的方式插入内容。 从css2.0添加这两个伪元素选择器到css2.1到现在的3.0，都不断的在对这两个选择器进行改良和扩展。 首先，我们来看一下，在css2中，我们如何来插入内容（ie6 7不在考虑范围之内，因为他们不支持:before与after）。 在css2中，
破解ReadOnly: 如何在HTML中灵活处理不可编辑字段
m0_57021623的博客
05-16 658
对于服务器端处理关键字段，如价格或折扣率，最佳实践是在服务器端重新计算这些值或从可信源（例如数据库）验证这些值，以确保数据的完整性和正确性。是HTML中用于表单输入字段的一个属性，它的目的是阻止用户修改输入字段的值，但允许用户提交表单时包含这些值。方法来修改页面元素的属性，提供了更多的灵活性和控制能力，特别是在处理那些通过HTML属性强制施加的限制时。，通常有其背后的理由，比如保护数据的完整性。对于一些关键字段，如价格、折扣率等，服务器端可以在每次处理前都重新计算或验证这些数据，而不是依赖前端提交的值。
前端基础入门三大核心之HTML篇 —— 深入解析从URL请求到页面加载的艺术
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
05-21 327
前端技术的博大精深，远不止于此。从HTML的简单解析到复杂的SPA应用，每一步都蕴含着开发者对极致体验的追求。本文旨在为你铺就一条坚实的基础之路，鼓励你不断深入学习，探索新技术，实践新理念。前端的世界日新月异，保持好奇心，勇于实践，你将在这条道路上走得更远。最后，我们期待你在评论区分享你的学习心得、实战经验或是对未来前端发展的独到见解，让我们一起推动Web技术的车轮滚滚向前。欢迎来到我的博客，很高兴能够在这里和您见面！
thinkphp5.1使用workerman
03-31
ThinkPHP 5.1 可以使用 Workerman 实现实时推送功能，具体实现步骤如下： 1. 安装 Workerman 可以使用 Composer 安装 Workerman： ``` composer require workerman/workerman ``` 2. 创建 Workerman 控制器 在应用的 controller 目录下创建 Workerman 控制器，例如创建 `Push.php`，并在该控制器中实现推送功能： ```php namespace app\controller; use think\worker\Server; class Push extends Server { // 监听的地址和端口号 protected $socket = 'websocket://0.0.0.0:2346'; // 接收到客户端消息时触发 public function onMessage($connection, $data) { // 将客户端发送的消息广播给所有客户端 foreach ($this->worker->connections as $conn) { $conn->send($data); } } } ``` 3. 在路由中定义 Workerman 路由 在 `route` 目录下的 `route.php` 文件中定义 Workerman 路由，例如： ```php use think\facade\Route; // 定义 Workerman 路由 Route::get('push', 'push/index'); ``` 4. 启动 Workerman 服务 在命令行中使用以下命令启动 Workerman 服务： ``` php think worker:server ``` 5. 在页面中调用推送接口 在需要推送消息的页面中，调用推送接口，例如： ```javascript var ws = new WebSocket('ws://localhost:2346'); ws.onopen = function() { ws.send('Hello, Workerman!'); }; ws.onmessage = function(event) { console.log(event.data); }; ``` 以上就是使用 ThinkPHP 5.1 实现 Workerman 的推送功能的步骤。需要注意的是，在使用 Workerman 时需要开启 PHP 的长连接，因此需要使用 CLI 环境运行 PHP。此外，需要在浏览器中测试推送功能时，需要使用支持 WebSocket 的浏览器。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值