HTML5 day4

闪耀_ap

已于 2024-10-05 23:17:21 修改

阅读量316

点赞数 7

文章标签： html5 前端 html

于 2024-10-05 23:13:06 首次发布

本文链接：https://blog.csdn.net/2401_82647012/article/details/142720195

版权

css入门

1. 什么是CSS？

CSS是一种用于描述HTML或XML文档外观和格式的样式表语言。通过CSS，你可以控制网页的颜色、字体、布局以及其他展示效果，使网页更加美观和用户友好。

2. 如何引入CSS？

内联样式：直接在HTML元素的style属性中定义样式。
```
<p style="color: red;">这是一段红色文字。</p>
```
内部样式表：在HTML文档的<head>部分使用<style>标签定义样式。

<head>  
  <style>  
    p {  
      color: blue;  
    }  
  </style>  
</head>

外部样式表：将样式定义在一个独立的.css文件中，并通过<link>标签链接到HTML文档。

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

3. CSS选择器

选择器是CSS中用于选择需要应用样式的HTML元素的方式。

元素选择器：直接选择HTML元素。
```
p {  
  color: green;  
}
```
类选择器：选择带有特定类属性的元素（使用）。
```
.myClass {  
  font-size: 20px;  
}
```
ID选择器：选择带有特定ID属性的元素（使用）。

#myId {  
  background-color: yellow;  
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS</title>
    <style>
        /* 元素选择器：选择所有h1元素 */
        h1 {
            color: red; /* 设置文本颜色为红色 */
            font-size: 2em; /* 设置字体大小为2倍默认大小 */
        }

        /* 类选择器：选择带有'intro'类的p元素 */
        .intro {
            color: green; /* 设置文本颜色为绿色 */
            font-style: italic; /* 设置字体样式为斜体 */
        }

        /* ID选择器：选择ID为'main-title'的元素 */
        #main-title {
            text-align: center; /* 设置文本居中对齐 */
            margin-top: 20px; /* 设置上边距为20像素 */
            color: blue; /* 设置文本颜色为蓝色 */
        }
    </style>
</head>
<body>
    <h2 id="main-title">di选择器</h2>
    <p class="intro">类选择器</p>
    <h1>元素选择器</h1>
</body>
</html>

运行结果复合选择器

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">
    <title>CSS</title>  
    <style>  
        /* 后代选择器：选择.container内的所有p元素 */  
        .container p {  
            color: black;  
            font-size: 16px;  
        }  
  
        /* 交集选择器：选择同时拥有.highlight和.special类名的p元素 */  
        .highlight.special {  
            background-color: yellow;  
        }  
  
        /* 并集选择器：选择h1和.container内的所有strong元素 */  
        h1, .container strong {  
            color: red;  
        }  
  
        /* 相邻兄弟选择器：选择紧接在h2之后的p元素 */  
        h2 + p {  
            font-weight: bold;  
        }  
  
        /* 通用兄弟选择器：选择h2之后的所有p元素 */  
        h2 ~ p {  
            margin-left: 20px;  
        }  
    </style>  
</head>  
<body>  
    <div class="container">  
        <h1>标题</h1>  
        <h2>子标题</h2>  
        <p>这是一个段落。</p>  
        <p>这是另一个段落，它会有一个左边距。</p> 
        <p class="highlight special">这是一个特殊且高亮的段落，它会有黄色背景。</p>  
        <strong>这是一个强调的文本，它会变红。</strong>  
    </div>  
</body>  
</html>

运行结果