Web前端---CSS

努力小贼

于 2024-09-29 19:16:56 发布

阅读量723

点赞数 12

分类专栏： web前端文章标签：前端 css html

本文链接：https://blog.csdn.net/2302_81399643/article/details/142640158

版权

web前端专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一、什么是CSS

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页文档外观样式的语言。它与HTML一起被广泛用于网页设计和开发中。通过CSS，可以对网页中的元素进行布局、颜色、字体、大小、边框等各种样式的控制。CSS通过将样式与HTML文档分离，使网页结构与样式分离，增加了网页的可维护性和可重用性。使用CSS可以轻松地改变整个网站的外观，而无需修改HTML代码。

在CSS中，可以使用注释来添加对代码的说明或者临时禁用某些代码。CSS注释使用/*...*/的格式，如下所示：

/* 这是一个注释 */
h1 {
  color: red;
}

/* 这是另一个注释 */
/* p {
  font-size: 16px;
} */

二、网页中引用CSS的方法

1.行内式

行内样式是将CSS样式直接写在HTML标签的style属性中，用于为特定的元素添加样式。行内样式的优先级最高，会覆盖外部样式表和内嵌样式

行内样式的写法如下：

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

运行结果如下：

2.内嵌式

内部样式是将CSS样式写在HTML文档的<head>标签中的<style>标签内部，用于为整个HTML文档或者部分HTML文档的元素添加样式。内部样式表的优先级高于外部样式表。

内部样式的写法如下：

<head>
  <style>
    p {
      color: red;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p>这是一个红色的段落</p>
</body>

运行结果如下：

3.外链式

一个外部的CSS样式表文件，从而将样式应用到HTML文档中的元素。

外部样式表的文件通常以.css为扩展名，可以在任意文本编辑器中创建和编辑。

下面是一个链接外部样式表的示例：

<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <p>这是一个段落</p>
</body>

在上面的代码中，<link>标签的href属性指定了外部样式表的路径，即styles.css。这个路径可以是相对路径或者绝对路径。当浏览器解析HTML文档时，它会加载并应用外部样式表中定义的样式规则。

使用外部样式表的优点是可以将样式和HTML文档进行分离，提高代码的可维护性和重用性。此外，可以在多个HTML文档中共享相同的样式，只需在每个HTML文档中引用同一个外部样式表文件即可。

注：

优先级：行内式>外链式>内嵌式

HTML文档里面，head标签里的css引用，根据“后来居上”原则

三、CSS语法基础

1.CSS样式规则

CSS样式规则由选择器和声明块组成。选择器指定要应用样式的HTML元素，而声明块包含了一条或多条样式声明，每条声明由属性和值组成

下面是一个CSS样式规则的示例：

selector {
  property: value;
  property: value;
  ...
}

选择器：用于指定要应用样式的HTML元素。可以使用元素类型选择器（如p、h1、div等）、class选择器（以.开头，如.class-name），id选择器（以#开头，如#id-name）等。
声明块：由一条或多条样式声明构成，用大括号{}括起来。
属性：用于指定要改变的样式的属性，如color、font-size、background-color等。
值：属性的具体值，用于定义样式的具体表现

2.选择符

（一）基本选择符

CSS中有标签选择符、class选择符和id选择符三种基本的选择符，用于选择要应用样式的HTML元素

（1）标签选择符

标签选择符是CSS中的一种基本选择符，用于选择特定的HTML标签元素并应用样式。使用标签选择符时，只需指定所需的HTML标签名称即可

例如，要选择所有的段落元素 <h1> 并将它们的文字颜色设置为红色，可以使用以下CSS代码：

<head>
    <style>
        h1{
            color: red;
        }
    </style> 
</head>
<body>
    <h1>标题</h1>
</body>

运行结果如下：

（2）class类选择符

类选择符是CSS中的另一种基本选择符，用于选择具有相同类名的HTML元素并应用样式。类选择符以“ .”开始，后面跟着类名

在HTML中，可以使用class属性为元素指定一个或多个类名。然后在CSS中，使用类选择符来选择具有相同类名的元素并为它们应用样式

代码示例：

 <style type="text/css">
        .book_name{
            color: green;
        } 
 </style> 
<body>
    <h1 class="book_name">标题1</h1>
</body>

运行结果：

（3）id 选择符

id选择符是CSS中的另一种基本选择符，用于选择具有特定ID的HTML元素并应用样式。id选择符以 “ # ”开始，后面跟着ID值

在HTML中，可以使用id属性为元素指定一个唯一的ID。然后在CSS中，使用id选择符来选择具有特定ID的元素并为其应用样式

示例代码：


 <style type="text/css">
        #t2{
            color: blue;
        } 
 </style> 
<body>
    <h1 id="t2">标题2</h1>
</body>

运行结果：

注意：ID选择符的使用应该谨慎，因为ID在文档中应该是唯一的，如果多个元素具有相同的ID，则会导致选择器仅选择其中一个元素，这违反了HTML的规范。更好的选择是使用class选择符来选择具有相同类名的元素

优先级：行内 > id > 类 > 标签（相同优先级根据“后来居上原则”）

（二）复合选择符

复合选择符是CSS中用于选择HTML元素的一种方法，它通过将多个选择符组合在一起来选择元素

包括“交集”选择符、“并集” 选择符和“后代”选择符

（1）“交集” 选择符

“交集”选择符由两个选择符直接连接构成，其结果是选中二者各自元素范围的交集。其中，第一个选择符必须是标签选择符，第二个选择符必须是 class 类选择符或 id选择符。这两个选择符之间不能有空格，必须连续书写

其格式为：

p.class{Color:red; font-size:16px;}

示例代码：

<style type="text/css">
        p{
            font-size: 14px;  /*定义文字大小为14px*/
            color: #00F;   /*定义文字颜色为蓝色 */
            text-decoration: underline;  /*让文字带有下划线*/
        }
        p.myContent{     /*定义交集选择符 */
            font-size: 20px;   /*定义文字大小为20px*/
            text-decoration: none;   /*定义文字不带下划线*/
            border: 1px solid #C00;   /*设置文字带红色边框效果*/
        }
      </style>
</head>
<body>
    <p>1.“交集”选择符示例</p>
    <p class="myContent">2.“交集”选择符示例</p>
    <p>3.“交集”选择符示例</p>
</body>

运行结果：

说明：页面中只有第2个段落使用了“交集”选择符，可以看到格式的最终结果为字体
大小为20px、蓝色字体、红色边框且无下划线，刚好是两个选择符所定义的样式的交集

（2）“并集” 选择符

在CSS中，可以使用逗号分隔的"并集"选择符来选择多个元素，即选择多个选择器所匹配的元素

可以使用多个不同类型的选择器进行并集选择。例如，如果想选择具有类名为"class1"的元素和所有<a>标签元素，可以使用以下选择器：

.class1, a {
  /* 样式规则 */
}

这样就可以同时选择具有类名为"class1"的元素和所有<a>标签元素，即实现了这两个选择器的并集选择

需要注意的是，并集选择符的使用可能会导致选择器的权重增加。如果多个选择器使用了相同的样式规则，后面的选择器可能会覆盖前面的选择器的样式。在设计样式时，应注意避免冲突和重复的选择器

（三）关系选择符（后代选择符）

子代选择符（child combinator）：使用 ">" 符号来选择一个元素的直接子元素。（不可跨代）

示例代码：

<head>
<style>
        /* 子代选择器（不可跨代） */
        li>#s2{
            color: green;
        }
    </style>
</head>
<body>
    <ul>
        <h4>大标题</h4>
        <li>第一章
            <ul>
                <li>
                    <h6 id="s1">一</h6>
                </li>
                <li>
                    <h6 id="s2">二</h6>
                </li>
                <li>
                    <h6 id="s3">三</h6>
                </li>
            </ul>
        </li>
        <li>第二章
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
    </ul>
</body>

运行结果：

2.后代选择符（descendant combinator）：使用空格来选择一个元素的后代元素（可跨代）

示例代码：

<head>
<style>
        /* 后代选择器（可跨代） */
        ul li ul li #s1{
            color: red;
        }
    </style>
</head>
<body>
    <ul>
        <h4>大标题</h4>
        <li>第一章
            <ul>
                <li>
                    <h6 id="s1">一</h6>
                </li>
                <li>
                    <h6 id="s2">二</h6>
                </li>
                <li>
                    <h6 id="s3">三</h6>
                </li>
            </ul>
        </li>
        <li>第二章
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
    </ul>
</body>

运行结果：

3.相邻兄弟选择符（adjacent sibling combinator）：使用 "+" 符号来选择一个元素的紧邻兄弟元素

示例代码：

<head>
<style>
        /* 相邻兄弟选择器 */
         h4+li{
            color: green;
        }
</style>
</head>
<body>
    <ul>
        <h4>大标题</h4>
        <li>第一章
            <ul>
                <li>
                    <h6 id="s1">一</h6>
                </li>
                <li>
                    <h6 id="s2">二</h6>
                </li>
                <li>
                    <h6 id="s3">三</h6>
                </li>
            </ul>
        </li>
        <li>第二章
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
    </ul>
</body>

运行结果：

4.通用兄弟选择符（general sibling combinator）：使用 "~" 符号来选择一个元素之后的所有兄弟元素

示例代码：

<head>
<style>
         /* 通用兄弟选择器 */
        h4~li{
            color: green;
        }
</style>
</head>
<body>
    <ul>
        <h4>大标题</h4>
        <li>第一章
            <ul>
                <li>
                    <h6 id="s1">一</h6>
                </li>
                <li>
                    <h6 id="s2">二</h6>
                </li>
                <li>
                    <h6 id="s3">三</h6>
                </li>
            </ul>
        </li>
        <li>第二章
            <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
            </ul>
    </ul>
</body>

运行结果：

四、选择器复合的练习

运用各类选择器实现下面网页：

示例代码：

<!DOCTYPE html>  
<html lang="zh">  

<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>选择器练习</title>  
    <style>
       header nav ul li a{
        color: red;
       } 
       article>h3{
        color: green;
       }
       h3+p{
        color: yellow;
       }
        h1~p{
        font-size: 50px;
       }
    </style>

</head>  

<body>  
  
    <header>  
        <h1 align="center">广东云浮中医药职业学院</h1>  
        <p align="center">欢迎来到: <ins>计算机学院</ins></p>  
        <hr>  
        <nav>  
            <ul type="none">  
                <li><a href="#">首页</a></li>  
                <li><a href="#">关于我们</a></li>  
                <li><a href="#">学生风采</a></li>  
                <li><a href="#">联系方式</a></li>  
            </ul>  
        </nav>  
    </header>  
    <hr>    
    <main>  
        <section>  
            <h2>最新文章</h2>  
            <article>  
                <h3>文章标题</h3>  
                <p>这里是文章的内容简介。<br>可以使用<br>标签进行换行。</p>  
                <br><br><br> 
                <p>想了解广东云浮中医药职业学院：<a href="https://gdyfvccm.edu.cn/">点击这里</a></p>  
            </article>  

            <br>
            <aside>  
                <h3>侧边栏</h3>  
                <p>侧边栏内容，如快速链接、广告等。</p>  
                <table border="1">  
                    <tr>  
                        <th>专业</th>  
                        <th>链接</th>  
                    </tr>  
                    <tr>  
                        <td>计算机应用技术</td>  
                        <td><a href="专业A详情页.html">专业A详情</a></td>  
                    </tr>  
                    <tr>  
                        <td>数字媒体技术</td>  
                        <td><a href="专业B详情页.html">专业B详情</a></td>  
                    </tr>  
                </table>  
            </aside>  
        </section>  
    
        <section>  
            <h4>联系我们</h4>  
            <form>  
                姓名:
                <input type="text" id="name" name="name"><br>  
                邮箱:
                <input type="email" id="email" name="email"><br>  
                <input type="submit" value="提交">  
            </form>  
        </section>  
    </main>  
    <hr>   
    <footer>  
        <p>版权所有 &copy; 2024 广东云浮中医药职业学院计算机学院</p>  
    </footer>  
  
</body>  


</html>