编程笔记 html5&css&js 017 HTML样式

编程笔记 html5&css&js 017 HTML样式

HTML样式是用来控制网页元素外观的一组属性和值。

一、HTML样式

可以通过以下几种方式来为HTML元素添加样式:

  1. 内联样式:直接在HTML元素的style属性中添加样式。例如:<p style="color: red; font-size: 20px;">这是一段红色的文字</p>

  2. 内部样式表:在HTML文档的标签内,使用

    <head> <style> p { color: red; font-size: 20px; } </style> </head> <body>

    这是一段红色的文字

    </body>
  3. 外部样式表:将样式定义在一个独立的CSS文件中,然后在HTML文档的标签内使用标签将CSS文件引入。例如:

    <head> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body>

    这是一段红色的文字

    </body>
  4. CSS选择器:可以使用CSS选择器来选择并应用样式到特定的HTML元素。例如,选择所有p元素并设置颜色为红色:

    <style> p { color: red; } </style>

以上是一些基本的HTML样式的应用方式,还有更多的CSS属性和值可以用来调整元素的外观,如背景颜色、边框样式、宽度、高度等等。详细的CSS样式属性和值可以参考CSS的文档和教程。

二、CSS3

是一种用于样式化网页的CSS(层叠样式表)的最新版本。CSS3引入了许多新的特性和功能,使开发者能够更灵活地设计和布局网页。一些常见的CSS3特性包括:

  1. 圆角(border-radius):可以让元素的边角变成圆角。
  2. 阴影(box-shadow):可以添加元素的阴影效果。
  3. 渐变(gradient):可以实现元素的背景色渐变效果。
  4. 过渡(transition):可以实现元素的平滑过渡效果。
  5. 动画(animation):可以为元素添加复杂的动画效果。
  6. 2D和3D转换(transform):可以对元素进行旋转、缩放、倾斜、平移等操作。
  7. 媒体查询(media queries):可以根据不同设备的屏幕大小和属性来应用不同的样式。
    CSS3的引入使得开发者在设计和布局方面有更多的选择和灵活性,同时也为网页提供了更好的交互和视觉效果。

小结

这里只是初步认识一下,关于样式还有很丰富的内容,后面会逐渐接触。

相关推荐
koiy.cc38 分钟前
记录:echarts实现tooltip的某个数据常显和恢复
前端·echarts
一只专注api接口开发的技术猿1 小时前
企业级电商数据对接:1688 商品详情 API 接口开发与优化实践
大数据·前端·爬虫
GISer_Jing1 小时前
[前端高频]数组转树、数组扁平化、深拷贝、JSON.stringify&JSON.parse等手撕
前端·javascript·json
古拉拉明亮之神1 小时前
Spark处理过程-转换算子
javascript·ajax·spark
Yvonne爱编码1 小时前
CSS- 4.1 浮动(Float)
前端·css·html·github·html5·hbuilder
timeguys2 小时前
【前端】[vue3] [uni-app]使用 vantUI 框架
前端·uni-app
岁岁岁平安2 小时前
Vue3学习(组合式API——Watch侦听器、watchEffect()详解)
前端·javascript·vue.js·学习·watch侦听器·组合式api
uwvwko2 小时前
BUUCTF——web刷题第一页题解
android·前端·数据库·php·web·ctf
有事没事实验室3 小时前
CSS 浮动与定位以及定位中z-index的堆叠问题
前端·css·开源
Stringzhua3 小时前
JavaScript入门【3】面向对象
javascript