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

2023-12-31 13:02:27

编程笔记 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>
  <p>这是一段红色的文字</p>
</body>
  1. 外部样式表：将样式定义在一个独立的CSS文件中，然后在HTML文档的标签内使用标签将CSS文件引入。例如：
<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <p>这是一段红色的文字</p>
</body>
  1. 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的引入使得开发者在设计和布局方面有更多的选择和灵活性，同时也为网页提供了更好的交互和视觉效果。

小结

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

文章来源:https://blog.csdn.net/qq_40071585/article/details/135314437
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。