html5怎么用css样式

在HTML5中使用CSS样式，可以让网页的布局、颜色、字体等视觉效果更加美观和统一，CSS（Cascading Style Sheets）是一种用于描述HTML文档样式的语言，它可以实现页面内容与表现形式的分离，使得网页设计更加灵活和易于维护。

内联样式

内联样式是将CSS代码直接写在HTML标签的style属性中，适用于单个元素或少量元素的样式设置。

<p style="color: red; font-size: 20px;">这是一段红色的文字。</p>

内部样式表

内部样式表是将CSS代码写在HTML文档的<head>标签内的<style>标签中，适用于整个文档的样式设置。

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      background-color: lightblue;
    }
    h1 {
      color: white;
      text-align: center;
    }
    p {
      font-family: 'Arial', sans-serif;
      font-size: 18px;
    }
  </style>
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一段介绍文字。</p>
</body>
</html>

外部样式表

外部样式表是将CSS代码写在一个单独的.css文件中，然后在HTML文档的<head>标签内通过<link>标签引入，这种方法适用于多个页面共享同一个样式表，创建一个名为style.css的文件，内容如下：

body {
  background-color: lightblue;
}
h1 {
  color: white;
  text-align: center;
}
p {
  font-family: 'Arial', sans-serif;
  font-size: 18px;
}

然后在HTML文档中引入该样式表：

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <h1>欢迎来到我的网站</h1>
  <p>这是一段介绍文字。</p>
</body>
</html>

CSS选择器

CSS选择器是用来确定要应用样式的元素，常用的选择器有：

1、元素选择器：用HTML标签名作为选择器，如p、h1等。

2、类选择器：用.开头，后面跟类名，如.myClass。

3、ID选择器：用开头，后面跟ID名，如myId。

4、属性选择器：用[]包围属性名和属性值，如[type="text"]。

5、伪类选择器：用来选取特殊的元素状态，如:hover、:first-child等。

6、组合选择器：可以用,将多个选择器组合在一起，也可以使用空格、>、+、~等符号来表示元素之间的关系。

CSS样式规则

CSS样式规则由选择器和一组用大括号{}包围的属性组成，属性由属性名和属性值组成，属性名和属性值之间用冒号:分隔，多个属性之间用分号;分隔。

h1 {
  color: white;
  text-align: center;
  font-size: 32px;
}

CSS单位

CSS中的单位有很多种，常用的有：

1、长度单位：px（像素）、em（相对单位，相对于父元素的字体大小）、rem（相对单位，相对于根元素的字体大小）、%（百分比）等。

2、颜色单位：可以使用预定义的颜色名、十六进制颜色值（如FF5733）、RGB（如rgb(255, 87, 51)）、RGBA（如rgba(255, 87, 51, 0.5)）、HSL（如hsl(12, 75%, 51%)）、HSLA（如hsla(12, 75%, 51%, 0.5)）等表示颜色。

CSS布局

CSS布局主要有以下几种方式：

1、普通流（Normal Flow）：按照HTML文档的顺序进行排列。

2、浮动布局（Float）：通过设置元素的float属性，使元素脱离普通流并向左或向右浮动。

3、定位布局（Positioning）：通过设置元素的position属性，可以将元素相对于其父元素或其他元素进行定位。

4、弹性布局（Flexbox）：通过设置容器的display属性为flex，可以对容器内的子元素进行灵活的布局。

5、网格布局（Grid）：通过设置容器的display属性为grid，可以对容器内的子元素进行二维的网格布局。

CSS动画和过渡

CSS动画和过渡可以实现元素在不同状态之间的平滑过渡效果，主要使用transition和animation属性来实现。

/* 过渡效果 */
button {
  background-color: blue;
  color: white;
  transition: background-color 0.5s ease-in-out;
}
button:hover {
  background-color: red;
}
/* 动画效果 */
@keyframes myAnimation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}
div {
  animation: myAnimation 2s linear infinite;
}