编程笔记 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>
  <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的引入使得开发者在设计和布局方面有更多的选择和灵活性,同时也为网页提供了更好的交互和视觉效果。

小结

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

相关推荐

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

    2024-01-01 07:36:03       31 阅读
  2. 编程笔记 html5&css&js 007 HTML文本:段落

    2024-01-01 07:36:03       29 阅读
  3. 编程笔记 html5&css&js 011 HTML页面划分

    2024-01-01 07:36:03       27 阅读
  4. 编程笔记 html5&css&js 012 HTML分块

    2024-01-01 07:36:03       33 阅读
  5. 编程笔记 html5&css&js 013 HTML布局

    2024-01-01 07:36:03       37 阅读
  6. 编程笔记 html5&css&js 015 HTML列表

    2024-01-01 07:36:03       35 阅读
  7. 编程笔记 html5&css&js 016 HTML表格

    2024-01-01 07:36:03       34 阅读
  8. 编程笔记 html5&css&js 018 HTML颜色

    2024-01-01 07:36:03       39 阅读
  9. 编程笔记 html5&css&js 019 HTML实体

    2024-01-01 07:36:03       32 阅读
  10. 编程笔记 html5&css&js 037 CSS选择器

    2024-01-01 07:36:03       28 阅读

最近更新

  1. TCP协议是安全的吗?

    2024-01-01 07:36:03       18 阅读
  2. 阿里云服务器执行yum,一直下载docker-ce-stable失败

    2024-01-01 07:36:03       19 阅读
  3. 【Python教程】压缩PDF文件大小

    2024-01-01 07:36:03       19 阅读
  4. 通过文章id递归查询所有评论(xml)

    2024-01-01 07:36:03       20 阅读

热门阅读

  1. UntiyShader(六)Unity提供的Cg/HLSL语义

    2024-01-01 07:36:03       33 阅读
  2. C++的一些知识

    2024-01-01 07:36:03       27 阅读
  3. python SVM 保存和加载模型参数

    2024-01-01 07:36:03       39 阅读
  4. C 多维数组、特殊字符和字符串函数详解

    2024-01-01 07:36:03       38 阅读
  5. 第12课 循环综合举例

    2024-01-01 07:36:03       29 阅读
  6. MySQL5.7服务器命令选项

    2024-01-01 07:36:03       26 阅读
  7. MySQL安装与配置

    2024-01-01 07:36:03       37 阅读
  8. CSS Grid 和 Flexbox

    2024-01-01 07:36:03       36 阅读
  9. 前端学习笔记 2:Vue

    2024-01-01 07:36:03       34 阅读
  10. Linux上使用Certbot生成免费SSL证书

    2024-01-01 07:36:03       40 阅读
  11. 2023年12月记录内容管理

    2024-01-01 07:36:03       30 阅读
  12. 设计模式之观察者模式

    2024-01-01 07:36:03       36 阅读