web前端-css

2023090205

已于 2024-10-08 21:18:01 修改

阅读量377

点赞数 4

文章标签：前端 css

于 2024-10-05 18:37:23 首次发布

本文链接：https://blog.csdn.net/2301_81466619/article/details/142717024

版权

Web前端CSS实例解析：打造一个简洁的博客页面

在Web前端开发中，CSS（Cascading Style Sheets）是塑造网页外观和布局不可或缺的工具。今天，我们将通过一个简洁的博客页面实例，来展示如何利用CSS来美化网页，提升其用户体验。

一、项目背景与目标

假设我们要为一个个人博客创建一个简洁而美观的页面。这个页面应该包含页头、导航栏、主内容区（文章列表）、侧边栏和页脚。我们的目标是使用CSS来布局这些元素，并为它们添加适当的样式。

二、HTML结构

首先，我们需要构建页面的HTML结构。以下是一个简化的示例：

<header>这是网页结构头部</header>
<nav>这是网页结构的到导航</nav>
<main>
    <section>这是网页主要内容模块</section>
     <section>商品1 </section>
     <section>商品2 </section>
     <section>商品3 </section>
    <aside>这是网页侧边栏</aside>
    <footer>这是网页底部</footer>
</main>

二、网页中引用CSS的方法

1.行内式

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

 <h2 style="color: red; font-size: 30px;font-family: 楷体">
        测试css引入方式：行内式
    </h2>

2.内嵌式

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

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    h3{
        color: blue;
        font-size: 30px;
        font-family: 宋体;
    }
</style>

</head>

<body>
  <h3>
    测试css引入方式：内嵌式
</h3>
  
</body>
</html>



      
</html>

3.外链式

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

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

 <link rel="stylesheet" href="./css/style1.css">
    <link rel="stylesheet" href="./css/style2.css">
</head>
<body>
   
    <h4>
        测试css引入方式：外链式
    </h4>

一、CSS选择符的基本概念

CSS选择符是一种模式，用于选择需要应用样式的HTML元素。选择符可以根据元素的名称、ID、类属性，甚至是元素之间的关系来选取元素。

二、CSS选择符的分类

CSS选择符种类繁多，大致可以分为以下几类：

基础选择符
元素选择符：直接选择HTML标签，如p选择所有段落元素。
ID选择符：使用#前缀，选择具有特定ID的元素，如#header选择ID为header的元素。
类选择符：使用.前缀，选择具有特定类的元素，如.container选择所有类为container的元素
后代选择符：用空格分隔，选择某元素的所有后代，如div p选择所有位于div内的p元素。
子选择符：用>分隔，选择某元素的直接子元素，如ul > li选择ul的直接子元素li。
相邻兄弟选择符：用+分隔，选择紧接在另一元素后的兄弟元素，如h1 + p选择紧跟在h1后的第一个p元素。
通用兄弟选择符：用~分隔，选择位于另一元素之后的所有兄弟元素，如h1 ~ p选择h1之后的所有p元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* 后代选择器
        ul li ul li #first_section
        {color: brown;} 
        子代选择器 
        li>#second_section
        {color: aqua;}  */
        /* 相邻兄弟选择器  */
         h4+li+li
        {color: aquamarine;} 
        /* 通用兄弟选择器 
        h4~li
        {color: rgb(26, 4, 171);} */

    </style>
</head>
<body>
    <ul>
        <h4 class="header">书简恩仇录 </h4>
        <li>第一张
            <ul>
                <li >
                    <h1 id="first_section"> 第一节</h1>
                </li>
                <li>
                    <h1 id="second_section">第二节</h1>
                </li>
                <li>
                    <h1 id="third_section">第二节</h1>
                </li>
                
            </ul>
        </li>
        <li>第二张
            <ul>
                <li >
                    <h1 id="first_section"> 第一节</h1>
                </li>
                <li>
                    <h1 id="second_section">第二节</h1>
                </li>
                <li>
                    <h1 id="third_section">第二节</h1>
                </li>
                
            </ul>
        </li>

    </ul>
</body>
</html>