Web实现：各种不同的CSS样式示例

最新推荐文章于 2023-11-26 21:19:12 发布
最新推荐文章于 2023-11-26 21:19:12 发布
阅读量253 收藏
点赞数
分类专栏： 笔记 CSS HTML 文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/jasmyn518/article/details/122519478
版权
笔记 同时被 3 个专栏收录
127 篇文章 4 订阅
订阅专栏
HTML
78 篇文章 2 订阅
订阅专栏
CSS
68 篇文章 0 订阅
订阅专栏
字体大小：
font-size: 12px;
字体粗细：
font-weight: 200;
font-weight: lighter;
font-weight: 400;
font-weight: normal;
font-weight: 700;
font-weight: bold;
字体颜色：
color:#ff9a9e;
文字对齐方式：
text-align: left;	//居左
text-align: right;	//居右
text-align: center;	//居中
文字行高：
line-height:50px;
字间距：
letter-spacing:30px;
CSS内部样式：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内部样式演示</title>
<style>
  /*给h3标签添加样式*/
  h3{
    font-size:28px;
    color:#333;
    letter-spacing:5px;
  }
    /*给p标签添加CSS样式*/
    p{
      font-size:12px;
      color:#666;
    }
</style>

</head>
<body>
    <!-- 添加一个h3标题标签 -->
    <h3>练习内部样式</h3>
    <!-- 添加一个p标签 -->
    <p>内部样式就是将HTML标签和CSS的样式文件分离开来</p>


</body>
</html>
CSS外部样式：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外部样式</title>
    <!-- 引入外部index.css文件 -->
    <link rel="stylesheet" href="./index.css">
</head>
<body>
    <h3>练习外部样式</h3>
    <p>内部样式就是将HTML标签和CSS的样式文件分离开来</p>
</body>
</html>

/*给h3标签添加样式*/
h3{
    font-size:28px;
    color:#333;
    letter-spacing:5px;
}
/*给p标签添加CSS样式*/
p{
    font-size:12px;
    color:#666;
}
标签选择器：
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>标签选择器</title>
    <style>
      /* 给h3标签添加样式 */
      h3 {
        font-size: 25px;
        color: #330867;
      }

      /* 给h4标签添加样式 */
      h4 {
        font-size: 18px;
        color: #30cfd0;
      }

      /* 给p标签添加样式 */
      p {
        font-size: 14px;
        line-height: 28px;
        color: #4a5252;
      }
    </style>
  </head>

  <body>
    <h3>孟航沛</h3>
    <h4>平面设计师</h4>
    <p>
      专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
    </p>
    <h3>江晓风</h3>
    <h4>UI</h4>
    <p>
      专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
    </p>
    <h3>左小青</h3>
    <h4>插画师</h4>
    <p>
      专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
    </p>
    <h3>蒋小鱼</h3>
    <h4>Java工程师</h4>
    <p>
      专业综合性强，具有较强的综合能力，学习认真刻苦，虽然我的专业是思想政治教育，但是我们所学的除了马克思主义的相关理论之外，同时还学习了管理学、心理学和法学的相关理论知识，专业具有较强的综合性，使我具备较强的综合能力，基本能够胜任行政设计师助力这个岗位。
    </p>
  </body>
</html>
类选择器：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>多个类名</title>
    <style>
        li {
            list-style: none;
        }
    /*在这里书写通用样式*/
    .common{
      font-size: 22px;
      color: #333333;
      letter-spacing: 8px;
    }
    /*在这里书写特殊样式*/
    .current{
      color:#FF6973;
    }
    </style>
</head>

<body>
    <ul>
        <li class="common">白日依山尽，</li>
        <li class="common current">黄河入海流。</li>
        <li class="common">欲穷千里目，</li>
        <li class="common">更上一层楼。</li>
    </ul>

    <ul>
        <li>松下问童子，</li>
        <li>言师采药去。</li>
        <li>只在此山中，</li>
        <li>云深不知处。</li>
    </ul>

</body>

</html>
后代选择器：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
ul li{
  list-style: none;
  font-size: 22px;
}
    .first-ul li{
      color: rgb(212, 166, 28);
    }
    .second-ul li {
      color: rgb(230, 127, 122);
    }
    </style>
</head>

<body>
    <ul class="first-ul">
        <li>苍苍竹林寺，杳杳钟声晚。</li>
        <li>荷笠带斜阳，青山独归远。</li>
    </ul>
    <ul class="second-ul">
        <li>白日依山尽，黄河入海流。</li>
        <li>欲穷千里目，更上一层楼。</li>
    </ul>
</body>

</html>
交集选择器：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
      ul li {
        list-style: none;
        font-size: 22px;
      }
    ul li a {
      /* 去除a标签的下划线 */
      text-decoration: none;
      /* 这里的颜色一定要在a标签上设置，因为a标签默认会去设置字体颜色，会层叠掉默认的黑色 */
      color: black;
    }
    ul li a.special {
      color: orangered;
    }
    </style>
</head>

<body>
    <ul>
        <li><a href="" class="special">电子产品</a></li>
        <li><a href="">家居服饰</a></li>
        <li><a href="">电竞手办</a></li>
        <li><a href="" class="special">家装服务</a></li>
        <li><a href="">房屋出租</a></li>
    </ul>
</body>

</html>
子选择器：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
      /* 使用后代选择器 */
      span {
        color: black;
      }
      p span {
        color: orangered;
      }
      /* 使用子选择器 */
      span {
        color: black;
      }
      p>span {
        color: orangered;
      }
    </style>
</head>

<body>
  <p>
    <span>Span 1. 在p标签内
        <span>Span 2. 在p标签的span标签内</span>
    </span>
</p>
<span>Span 3. 与p标签相邻</span>
</body>

</html>
高级选择器案例：
//html部分代码：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css" type="text/css" />
</head>

<body>
    <h3>经济新闻</h3>
    <ul>
        <li>换季衣服堆积如山？有群职业整理师帮你断舍离 <span>11-01 09:13</span></li>
        <li>浙江5G套餐来了 三大运营商今日正式开启办理 <span>11-01 08:36</span></li>
        <li>区块链，价值在哪里——访中国工程院院士、浙江 <span>11-01 08:34</span></li>
        <li>国内首家银行系邮币馆举办专家讲座 揭开熊猫金 <span>11-01 08:13</span></li>
        <li>电信5G正式商用 专业人士教你如何挑选适合的 <span>11-01 07:53</span></li>
    </ul>
</body>

</html>

//css部分代码：
ul,
li {
    list-style: none;
    padding: 0;
}

h3 {
    font-size: 14px;
    font-weight: bold;
    color: #000000;
}

ul>li {
    font-size: 14px;
    color: #000000;
}

ul>li>span {
    color: #999999;
}
单个选择器的优先级：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
      p{
        color:blue;
      }    
      .poem{
        color: red;
      }
      #ch-poem{
        color:purple; 
      }
    </style>
</head>

<body>
    <p class="poem" id="ch-poem">百川东到海，何时复西归？</p>
</body>

</html>
jasmyn518
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
【海码学院】web前端基础入门CSS之列表样式和背景样式课堂学习笔记
weixin_45282338的博客
07-08 185
一、列表样式 1、无序列表和无序列表的相关样式 无序列表 <ul> <li>a</li> <li>b</li> <li>c</li> </ul> 有序列表 <ol> <li>内容（一）</li> <li>内容（二）</li> ...
web应用系统开发，CSS内联样式的使用
m0_60144381的博客
07-22 111
不管是面试还是工作过程中，移动端的布局都比较常见，而移动端适配方法也是多种多样。一般来说，主要还是从viewport、rem、百分比几个点下手。 一般来说，开发过程中，我们希望能够直接按照设计图来开发，不管设计图是两倍还是三倍图，能够直接写设计图尺寸而不需要换算，同时有高质的设计图还原度，想想都比较爽。 这里介绍一种使用vw和rem来布局的方案。 该方案思路主要是，设置视口宽度为设备宽度，使用vw来动态设置根元素的font-szie，同时使用sass的css function来实现设计尺寸转rem的功能，从
深入理解CSS样式：打造独特而精致的Web页面
最新发布
程序猿小样的博客
11-26 120
CSS（Cascading Style Sheets）是Web开发中不可或缺的一部分，它定义了HTML文档的外观和样式。通过巧妙地运用CSS，我们可以为网页元素添加各种效果，从而提升用户体验、增强可读性，并打造独特而精致的Web页面。在这篇文章中，我们将深入探讨各种CSS样式的应用，帮助你更好地理解如何使用CSS创建令人印象深刻的页面。
Web后台管理系统UI样式参考网页示例集
02-13
Web后台管理的UI样板网页
web前端之CSS样式案例--博雅网页
热门推荐
weixin_46820017的博客
05-08 1万+
前言 CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以博雅互动的官网首页举例。 版心 首页的版心如下： 这里我们要普及一个概念，叫“版心”。版心是页面中主要内容所在的区域。 比如说，网站左上角的logo，设计图给出的左边距是143像素，此时，我们千万不要以为，logo的左边距真的是143像素。因为设计图只是一个版心；而整个页面是处于浏览器的中间，浏览器的宽度是可以随时调整的。 我们量一下中间四个方形图的width，是1000px，所以，网页版心的宽度是1000px。 网页的结构 从结构上来看，
同一网页实现多种CSS 样式表切换[转]
非典型程序员
12-12 447
样式与数据分离所带来的不只是符合标准这样的简单，样式既然与数据分离那么样式的切换则变得理所当然的了！但是网上这样的中文教程实在是太少了！所以我收集了一部分中外网站已经实现的技术资料整理出来供网友参考。首先要具备不同内容的CSS文件（最好每个文件代表一种样式，或是代表需要作出变动的部分）。这里以三个为例：第一个是背景为红色的CSS文件（red.css）CSS中的内容为：body {bac...
web前端vue之CSS过渡效果示例
11-29
Vue.js 是一款流行的前端框架，它为开发者提供了丰富的功能，包括一套内置的过渡系统，使得在Web前端开发...通过合理地配置 `transition` 特性以及相应的CSS样式，可以轻松实现各种过渡效果，提升前端应用的整体质量。
web组件：Web组件示例
02-06
在本示例中，我们将深入探讨Web组件的核心特性，包括自定义元素、Shadow DOM、模板以及样式隔离。 1. **自定义元素（Custom Elements）**： 自定义元素是Web组件的基础，它让开发者能够创建自己的HTML标签。通过...
Web-Projects:HTML-CSS-用于教育目的PHP代码示例。 Copyleft
05-18
标题中的“Web-Projects:HTML-CSS-用于教育目的PHP代码示例。 Copyleft”表明这是一个包含Web开发项目的压缩包，特别关注HTML、CSS和PHP技术，并且是开放源码的，遵循Copyleft许可，意味着任何人都可以查看、使用、...
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
11-20
在CSS3中，我们可以利用`::webkit-scrollbar`伪元素来为Web浏览器中的滚动条自定义样式，这在设计用户界面时特别有用，可以提升滚动条的美观度和一致性。默认情况下，不同操作系统的滚动条样式各异，而通过CSS3，...
Web开发CSS网页模板
12-01
Web开发CSS网页模板
100套精美CSS+html网页实用模板打包
04-30
100套国外精美WEB2.0 CSS+html网页实用模板打包下载,精美实用
project-1:HTML和CSS示例Web应用程序-练习一
03-25
【HTML和CSS示例Web应用程序-练习一】是学习Web开发初阶阶段的重要实践项目，主要涉及HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）的基础知识及其实际应用。在这个练习中，我们将深入理解这两...
动态加载html 添加样式表,使页面动态加载不同CSS样式表，从而实现不同风格模板的方法...
weixin_31463861的博客
06-05 557
我们在制作网页时，有时会制作多种风格模板，而想把这些模板都用起来，而又不知道方法，通过以下两种方法，你就可以实现相同网站不同CSS模板的方法。ASP.Net中利用CSS实现多界面两种方法。方法一:＜%@page language="C#"%＞＜%@import namespace="System.Data"%＞＜script language="c#" runat="server"＞public ...
web前端技术练习题
在深度学习的路上不断探索
07-01 3966
web技术练习题
web----常用样式
weixin_53163211的博客
09-12 485
背景图片 url中放置图片路径（相对 绝对 网络） background-image: url(""); 设置背景图片是否重复 默认重复 background-repeat: no-repeat; 调整背景图片的位置 第一个值代表水平方向 第二个值代表竖直方向 /* background-position:0px 400px ; */ background-position: center center; 调整背景图片大小 第一个值代表背景图片宽度 第二个值代表背景图片高度
Web前端——CSS基础样式
巧克力布丁的博客
10-05 2221
一. 样式的继承 1. 定义 样式的继承，我们为一个元素设置的样式同时也会应用到它的后代元素上 2. 范围 继承是发生在祖先元素和后代元素之间 3. 优点 继承的设计是为了方便开发，利用继承我们可以将一些通用的样式统一设置到共同的祖先元素上，这样只需设置一次即可让所有元素都具有该样式 4. 注意 并不是所有的样式都会被继承 比如：背景相关的，布局相关的这些样式都不会被继承 5. 例子 注：span的背景颜色并不是被继承的，只是span的背景默认是透明的，所以p标签的背景颜色透了过去 <!DOCTYP
web开发 PC管理端常用样式汇总 - 个人笔记
树上骑个猴的博客
09-14 518
效果一，表单区域标题样式效果 效果： 代码： <div class="section-title"> 基本信息 </div> .section-title{ border-left: 4px solid #2483ff; color: #2483ff; padding: 0 10px; display: inline-block; margin-bottom:15px; background:linear
Web基础：初步认识CSS及样式表
m0_73058235的博客
01-01 840
CSS中文称层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现或等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。1）每个CSS样式由两部分组成，即选择符和声明，声明又分为属性和属性值2）属性必须放在花括号中，属性与属性值用冒号链接3）每条声明用分号结束4）当一个属性具有多种属性值时，属性与属性值不分先后顺序选择符{属性1：属性值1;属性2：属性值2;}
十天掌握Web标准：DIV+CSS入门教程
"DIV+CSS开发示例"教程旨在帮助初学者在十天内掌握Web标准布局技术，即使用Div元素和CSS进行网页设计。这个术语"DIV+CSS"虽然常见，但实际上是不准确的，因为它强调的是HTML5语义化标签（如`<div>`）与CSS样式的结合...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

jasmyn518

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值