style 标签|学习笔记

简介: 快速学习 style 标签

开发者学堂课程【HTML 基础入门学习style 标签】学习笔记与课程紧密联系,让用户快速学习知识

课程地址https://developer.aliyun.com/learning/course/465/detail/5721


style 标签

 

内容介绍

一、<style><style/>

二、<style><style/>的属性

三、media 属性

四、总结

 

一、<style><style/>

1、定义

是一对,有开始和结束

必须置于 head 里

2、作用

HTML 文档定义样式信息

所有的页面,比如一个按钮的样子,那个字体多大。

所有与样式相关的其实都是由 css 来做的,style 里面放的就是 css 样式的代码去规定按钮、字体样式。

所有样式信息都可以放在 style 里面。

 

二、<style><style/>的属性

1、必填属性

Type 指定样式表的类型, text/css

前面介绍的很多必填属性都有 type,因为要指明 style 里面放的这个样式代码是什么样式代码,它的值就是 text/css

2、选填属性

Media 为样式表规定不同的媒介类型

定义 style 里面 css 代码它会应用于数码媒体里面。

比如写这一套 css 代码,它只适用于某些屏幕,那这就是media属性的作用。

 

三、media 属性

1、常用值

1Screen 计算机屏幕(默认值)

2Print 打印预览模式/打印页

3Handheld 手持设备

如果 style 里边加入 handheld 属性,那只有手持设备的能看到 css 的样式,不是手持设备可能就看不到这个样式了。

4All 所有设备

其实最常用的可能从这四个里面继续精简出来,因为很多别的在做的过程中接触不到,media 属性就规定 style 里面 css 代码应用于那些媒体。

2、举例

<!DOCTYPE html>

<html>

<head>

<title></title>

</head>

<body>

</body>

</html>

/写入内容:<p>welcome to China!</p>

在页面上显示写入的内容,之后引入样式放在<head>

<style type="text/css">

p {color:blue]

</style>

 

四、总结

保存刷新页面内容就变为了代码中的颜色,也可以修改字体大小。

1、stlyle 标签

所有的文档想让它长什么样都可以通过 style 标签之间去定义。

2、综合

此前也学过 link 标签,可以从外部引入 css 标签,那么既可以在外部引入定义文档样式,也可以直接在头部写style标签都可去定义样式。

正如此前所讲述的 js 一样,可以在 html 页面本身去定义 js 一些代码,也可以外部引入 js 文件,实现同样的功能都是可行的

相关文章
|
3天前
|
数据采集 人工智能 安全
|
12天前
|
云安全 监控 安全
|
4天前
|
自然语言处理 API
万相 Wan2.6 全新升级发布!人人都能当导演的时代来了
通义万相2.6全新升级,支持文生图、图生视频、文生视频,打造电影级创作体验。智能分镜、角色扮演、音画同步,让创意一键成片,大众也能轻松制作高质量短视频。
1049 151
|
4天前
|
编解码 人工智能 机器人
通义万相2.6,模型使用指南
智能分镜 | 多镜头叙事 | 支持15秒视频生成 | 高品质声音生成 | 多人稳定对话
|
17天前
|
机器学习/深度学习 人工智能 自然语言处理
Z-Image:冲击体验上限的下一代图像生成模型
通义实验室推出全新文生图模型Z-Image,以6B参数实现“快、稳、轻、准”突破。Turbo版本仅需8步亚秒级生成,支持16GB显存设备,中英双语理解与文字渲染尤为出色,真实感和美学表现媲美国际顶尖模型,被誉为“最值得关注的开源生图模型之一”。
1735 9
|
9天前
|
人工智能 自然语言处理 API
一句话生成拓扑图!AI+Draw.io 封神开源组合,工具让你的效率爆炸
一句话生成拓扑图!next-ai-draw-io 结合 AI 与 Draw.io,通过自然语言秒出架构图,支持私有部署、免费大模型接口,彻底解放生产力,绘图效率直接爆炸。
683 152
|
11天前
|
人工智能 安全 前端开发
AgentScope Java v1.0 发布,让 Java 开发者轻松构建企业级 Agentic 应用
AgentScope 重磅发布 Java 版本,拥抱企业开发主流技术栈。
647 12
|
6天前
|
SQL 自然语言处理 调度
Agent Skills 的一次工程实践
**本文采用 Agent Skills 实现整体智能体**,开发框架采用 AgentScope,模型使用 **qwen3-max**。Agent Skills 是 Anthropic 新推出的一种有别于mcp server的一种开发方式,用于为 AI **引入可共享的专业技能**。经验封装到**可发现、可复用的能力单元**中,每个技能以文件夹形式存在,包含特定任务的指导性说明(SKILL.md 文件)、脚本代码和资源等 。大模型可以根据需要动态加载这些技能,从而扩展自身的功能。目前不少国内外的一些框架也开始支持此种的开发方式,详细介绍如下。
409 4