山东大学软件学院项目实训-创新实训-基于大模型的旅游平台汇总（十一）

最新推荐文章于 2024-09-14 14:13:51 发布

代码花园

最新推荐文章于 2024-09-14 14:13:51 发布

阅读量1.6k

点赞数 31

分类专栏：创新实训-基于大模型的旅游平台文章标签：旅游

本文链接：https://blog.csdn.net/a2425589793/article/details/138758609

版权

16 篇文章 0 订阅

订阅专栏

本我我们详细探讨CSS样式表在我们的开发中的运用。

CSS（层叠样式表）是一种用于设置网页设计和布局的技术。CSS 用于控制HTML元素的显示方式，包括字体、颜色、间距、对齐、大小、背景图像和其他设计特性。其主要目的是使网页内容与其表现形式分离，从而使HTML代码更简洁，提高网站的可维护性和可访问性。

内联样式：

直接在HTML元素中使用style属性来添加样式。

比如：
```
  <p style="color: red;">这是红色文字。</p>
```
内部样式表：

在HTML文档的<head>部分使用<style>标签定义样式。

比如：
```
  
  <style>
  p {
    color: blue;
    font-size: 20px;
  }
  </style>
```
外部样式表：

将CSS代码写在单独的.css文件中，然后通过HTML的<link>标签引入。

比如：

在CSS文件（如style.css）中：
```
  
  css
  Copy code
  body {
    background-color: lightgray;
  }
```
在HTML文件中引入：
```
  
  <link rel="stylesheet" type="text/css" href="style.css">
```

CSS选择器通常被用于指定哪些HTML元素应该应用某些样式规则。这些选择器可以根据元素的不同特性进行选择，如标签名、类名、ID、属性等。

元素选择器通过HTML元素的类型来选择，例如，选择所有的段落或所有的标题。

  p {
    color: blue;
  }
  
  h1 {
    font-size: 24px;
  }

类选择器使用点（.）后跟类名来选择具有该类的元素。类选择器非常的灵活，因为你可以将同一个类应用于不同的HTML元素。

  
  .button {
    padding: 10px 15px;
    background-color: blue;
    color: white;
  }

ID选择器使用井号（#）后跟ID名称来选择具有该ID的元素。ID在HTML中必须是唯一的，通常用于指向页面上的一个特定元素。

  
  #header {
    background-color: gray;
    padding: 20px;
  }

属性选择器基于元素的属性及其值来选择元素。你可以选择具有某个特定属性的所有元素，或者属性具有特定值的元素。

  
  input[type="text"] {
    border: 1px solid #ccc;
  }
  
  a[target="_blank"] {
    background-color: yellow;
  }

伪类选择器用于选定元素的特定状态，如鼠标悬停、聚焦或者选定的元素。它们通常用于添加用户交互状态的样式。

  
  a:hover {
    color: red;
  }
  
  input:focus {
    border-color: green;
  }
  
  li:first-child {
    font-weight: bold;
  }

伪元素选择器用于样式化某个元素的特定部分，而不是整个元素。常用的伪元素有 ::before 和 ::after，它们常用于内容的装饰。

  
  p::first-line {
    font-weight: bold;
    color: navy;
  }
  
  p::before {
    content: "※";
    color: red;
  }

后代选择器用于选定某个元素内部的后代元素，这是通过空格分隔父元素和子元素来实现的。

  
  div p {
    color: green;
  }

子选择器只选择直接子元素，使用大于号（>）来指定。

  
  ul > li {
    border-bottom: 1px solid #ccc;
  }

相邻兄弟选择器选定紧接在另一个元素之后的元素，使用加号（+）来指定。

  
  h1 + p {
    margin-top: 0;
  }

通用兄弟选择器选择某个元素之后的所有兄弟元素，使用波浪号（~）来指定。

  
  h1 ~ p {
    color: red;
  }

关注

专栏目录

山东大学软件学院项目实训-创新实训-基于大模型的旅游平台 汇总（十一）