web前端:3_初识CSS与文本背景样式

已于 2023-07-11 10:54:56 修改
阅读量42 收藏
点赞数
文章标签： 前端 css
于 2023-07-10 22:41:43 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45906368/article/details/131648439
版权

1,css的内部样式表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式表</title>

    <!-- style就是样式,我们可以把CSS样式写在这个标签里 -->
    <style>

    /* 1,标签选择器  选择网页里的所有该标签----全部修改*/
        p {
            color: #096;        /*修改字体颜色*/
            font-size: 70px;   /*修改字体大小*/
        }

        /* 2, id选择器: 先给标签设置id,然后通过 #id名 的方式找到该标签  id是唯一的 一个人使用
        id 只给一个标签加样式*/
        #hot{
            color: red;
            font-size: 20px;
        }

        /* 3,class 选择器(类):先给标签设置class类名/类型  然后通过 .class名 的方式找到该标签
        class 为类型,可以有多个 */
        .money{
            color: blue;
            font-size: 20px;
        }

        /* 4,通配符选择器(*)  *表示选择网页中的所有元素(正式开发不用) 
        <有领导先听领导的,再通配符的>*/
        *{
            color: blueviolet;
            font-size: 50px;
                } 

    </style>
</head>
<body>
    <p>锄禾日当午</p>
    <p>汗滴禾下土</p>
    <p>谁知盘中餐</p>
    <p>粒粒皆辛苦</p>

    <span>xdqwg</span>
    <span class="money">xdqwg</span>
    <span class="money">xdqwg</span>
    <span class="money">xdqwg</span>
    <span class="money">xdqwg</span>
    <span>xdqwg</span>
    <span>xdqwg</span>
    <span>xdqwg</span>
    <span>xdqwg</span>

    <b  id="hot">wdcwe</b>
    <b>wdcwe</b>
    <b>wdcwe</b>
    <b>wdcwe</b>

</body>
</html>

 2,外部样式表  (把CSS代码写入一个专门的.css文件里,需要使用的时候就用link标签导入  类似于py的模块)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式写法</title>


    <!-- 外部样式表 -->
    <link rel="stylesheet"  href="demo.css">

    <!-- 内部样式表 -->
    <style>
        .kylin{
            color: brown;
            font-size: 70px;
        }
    </style>
</head>
<body>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>

    <p  id="heal">学生接触外界才好!</p>
</body>
</html>

css文件

#heal{
    color:#096;
    font-size: 20px;
}

 3,行内样式表   --通过标签属性style直接把样式写在标签里

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS样式写法</title>


    <!-- 1, 外部样式表 
    <link rel="stylesheet" href="文件路径">   -->
    <link rel="stylesheet"  href="demo.css">

    <!-- 2,内部样式表 -->
    <style>
        .kylin{
            color: brown;
            font-size: 70px;
        }
    </style>
</head>
<body>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
    <p class="kylin">朋友们!多喝热水!</p>
   

    <p  id="heal">学生接触外界才好!</p>



    <!-- 3, 内部样式表.写在标签里面 -->
    <p style="color: brown; text-align: center; ">我是内部样式表</p>

</body>
</html>

P1:样式表的优先级 (就近原则)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>样式表优先级</title>

    <!-- 样式表的优先级参考就近原则 
     行内样式 > 内部样式/外部样式(谁离标签近就听谁的) -->
    <link ref="stylesheet"  href="demo.css">
    <style>
        b{
            color: blue;
        }
    </style>
</head>
<body>
    <b style="color: #096; font-size: 70px;">我是低温iu</b>
    <b>123</b>
    <b>234</b>
</body>
</html>

 P2 :div盒子

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        /* w300+h300+bgc#096 的盒子 */
        .box{
            width: 300px;
            height: 300px;
            background-color: #096;
            text-align: center;   
        }
        .money{
            color: crimson;
        }
    </style>
</head>
<body>
    <!-- 快速创建一个id为xxx的盒子  #xxx  .box
    快速创建一个 -->

    <div class="box">
        <img src="C:\Users\zxr\Desktop\前端文件\img\皮卡丘.jpg" alt=""  width="100" height="150">
        <h2>我是一只皮卡丘</h2>
        <p>我的技能是十万伏特</p>
        <p>只需<span class="money">998</span>元</p>
    </div>
</body>
</html>

P3:一个标签里面可以有多个类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>多个类名使用方式</title>
    <style>
        .fs70{
            font-size: 70px;

        }

        .hot{
            color: maroon;
        }
    </style>
</head>
<body>

    <!-- 一个标签里面可以有多个类 -->
    <p class="fs70  hot">鸽子为什么那么大</p>
    <p class="fs70  hot">鸽子为什么那么大</p>
    <p class="fs70  hot">鸽子为什么那么大</p>
    <p class="fs70  hot">鸽子为什么那么大</p>
    <p class="fs70  hot">鸽子为什么那么大</p>
    <p class="fs70  hot">鸽子为什么那么大</p>
    <p class="fs70  hot">鸽子为什么那么大</p>
    <p class="fs70  hot">鸽子为什么那么大</p>
    
    <b class="fs70">cwqhjc</b>
    <b class="fs70">cwqhjc</b>
    <b class="fs70">cwqhjc</b>
  
</body>
</html>

P4：文本样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本样式</title>

    <style>
        .fan{
            font-size: 70px;  /*字体大小  px像素  em字符大小*/
            font-size: 2em;

            font-family: "Microsoft YaHei";    /*  设置字体（宋体，微软雅黑） */

            font-weight: 900;   /*字体粗细 100~900*/

            font-style: italic;   /*  字体样式   --倾斜*/

            text-indent: 2em;   /*文字缩进  --前缩进2个字*/

            text-align: center;  /*文本对齐  -- 居中*/

            text-decoration: underline;   /*设置文本样式   underline  --设置下划线   none  --去除样式，没有线
                                            overline  --上划线*/
            line-height: 100px;    /* 设置文本的上下位置 */
        }
    </style>
</head>
<body>
    <p  class="fan">剩下的货币</p>
</body>
</html>

P5:背景样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景样式</title>

    <style>
        body{
            background-color: #096;  /*设置背景颜色*/
            background-image: url(C:\Users\zxr\Pictures\img\1.jpg);  /* 设置背景图片 */
        }

        .box{
            width: 500px;
            height: 500px;
            background-image: url(C:\Users\zxr\Pictures\img\1.jpg);
            background-position: center; /*设置背景位置 */
            background-size: cover;  /*  设置背景大小  cover --等比例缩放*/
            background-repeat: no-repeat;  /*设置背景重复   no-reapt  --背景不重复*/
        }
    </style>

</head>
<body>
        <div class="box">
        
        </div>
</body>
</html>

 作业1：

网页内有3个p标签,写着: 七零老师 / 多喝热水 / #096
用三种css样式写法(行内,内部,外部).给p标签分别添加样式(改字号/变颜色都可,自行发挥)
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>作业3_设置样式</title>
    <style>

        /* 外部设置样式 */
        <link ref="stylesheet" href="demo.css">

        /* 内部设置样式 */
        #water{
            color: crimson;
            font-size: 200px;

        }


        .hot{
            color: deeppink;
            font-weight: 600;
            font-style: italic;  /*倾斜*/
        }

    </style>
</head>
<body>
    <!-- 标签内部设置样式 -->
    <p style="color: darkmagenta;font-size: 2em; ">七零老师</p>
    <p  id="water">多喝热水</p>
    <p  class="hot">#096</p>
</body>
</html>

 作业2:

完成作业图片效果
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>设置文本样式</title>
    <style>
        span{
            font-size: 100px;
            font-family: fantasy;
            text-align: center;
        }

        #A{
            color: blue;
        }

        #B{
            color: darkred;
        }

        #C{
            color: darkorange;
        }

        #D{
            color: blue;
        }

        #E{
            color: dodgerblue;
        }

        #F{
            color: brown;
        }


    </style>
</head>
<body>
    
    <span id="A">G</span>
    <span id="B">o</span>
    <span id="C">o</span>
    <span id="D">g</span>
    <span id="E">l</span>
    <span  id="G">e</span>
    
</body>
</html>

 

 

weixin_45906368
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
初识CSS样式 与 文本背景样式
yz_518的博客
03-21 1138
昨天我们已经开始学习了关于web前端的html的一点知识,今天我们开始学习前端三剑客里面的的另一个css样式还有文本背景样式.这些都是我个人的学习,欢迎大家一起和谐讨论.CSS（层叠样式表，Cascading Style Sheets）是一种用于描述HTML或XML（包括如SVG、XHTML等派生语言）文档样式的计算机语言。CSS描述了如何在屏幕、纸质、音频等各种媒体中渲染元素。
初识前端，学习html+css.zip
01-02
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
web前端：初识HTML、JavaScript、CSS
qq_45020131的博客
03-05 263
这篇blog应该算是复习资料吧，虽然笔记整理的有点乱。 接下来是一段HTML代码, 我的笔记都是根据这部分代码来写的 <!DOCTYPE html> <html lang="zh"> <head> <link rel="stylesheet" href="./demo.css"> <style> <!-- style...
WEB前端(3)—— 初识CSS
qq_46187519的博客
08-10 369
什么是CSS CSS，英文全称是Cascading Style Sheets,中文名为级联样式单，也有人称其为层叠样式单。层叠就是样式可以层层叠加，可以对一个元素多次设置样式，后面定义的样式会对前面定义的样式进行重写，在浏览器中看到的效果是使用最后一次设置的样式。CSS是一种表现语言，是对网页结构语言的补充。CSS主要用于网页的风格设计，包括字体，颜色，位置等方面的设计。在HTML网页中加入CSS，可以使网页展现更丰富的内容。 ...
web前端基础（一）——HTML+CSS
热门推荐
广龙宇的博客
08-18 13万+
系列文章目录 web前端基础（一）——HTML+CSS 目录 系列文章目录 前言 HTML HTML的介绍 1. html的定义 2. html的作用 HTML的基本结构 1. 结构代码 2. 浏览网页文件 vscode的下载与使用 1. vscode 的基本介绍 2. vscode 的安装 3. vscode 的插件安装 4. vscode 的插件卸载 5. 设置字体大小 6. 设置颜色主题 7. 设置默认浏览器[可选] 初识常用的HTML标签 1. 常用的 ..
web前端学习笔记：初识Web前端开发
薛定谔的猫
03-03 313
行业发展与岗位变化 Web访问流程 网站-----网站与Web应用 网页设计师/网页制作员-----Web前端工程师 PC端-----移动端 Web端产品开发流程 相关岗位名称 招聘要求例 相关理论--万维网 万维网（World Wide Web）：简称WWW或3W，是目前互联网上最流行的一种基于超文本形式的资源组织形式。 万维网基于三个机制向用户提供资源： （1）协议 协议是一组标准的规则，用于实现通过通信信道发送信息所需的数据表示、信号发送、身份验证及错...
【前端基础篇】HTML5 + CSS3 入门知识
前端知识分享喵
06-09 1785
，HTML5和CSS3核心知识
web前端学习（二）初识HTML与CSS
jjjh968的博客
08-31 95
1.1.什么是HTML？什么是CSS？ HTML是HyperText Markup Language(超文本标记语言) 它不是一种编程语言，而是一种标记语言，用于告诉浏览器如何构造你的页面。它可以由一系列HTML元素组合成web开发人员想要的简单或者复杂的页面。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。HTML也是一种规范，一种标准，它通过标记符号来标记要显示的网页中的各个部分。网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何显示其中的内容（如：文字
040_初识 web 前端 & HTML 超文本标记语言
煮面要加牛奶的博客
02-11 1327
1. web前端开发技术 web 前端开发语言主要包括：html语言，css样式代码，javascript脚本，html5，css3，jQuery，ajax，Bootstrap，Backbone html语言：网页的基本标记语言，也是最基础的语言，掌握起来比较简单。 css样式代码：是用来控制html代码如何显示的，html语言只是网页的标记，但如何更好的在网页上展示你想要的效果，由cs...
Web前端：HTML~CSS~JS
万箭穿心，习惯就好。
06-15 942
HTML什么是HTMLCSS什么是CSS
Web前端开发技术-初识JavaScript.pptx
07-07
任务1 初识JavaScript;学习目标;JavaScript概述;JavaScript：是Web开发领域中的一种功能强大的编程语言，主要用于开发交互式的Web页面。在计算机、手机等设备上浏览的网页，其大多数的交互逻辑几乎都是由JavaScript...
前端开发Vue基础篇：Day01 初识Vue.pdf
11-08
前端开发Vue基础篇Day01资料文档
blog::writing_hand:qize的博客
05-02
初识createDocumentFragment Promise原理与实现探究的一种思路 Tip Content-Security-Policy的理解 初识createDocumentFragment Vue2的独立构建与运行时构建的差别 JavaScript的异步性和队列问题 CommonJS模块化规范...
高级语言程序设计：chap02_初识C源程序及其数据类型.ppt
09-17
符号常量是通过#define预处理器指令定义的，提供了一种定义常量的方式，例如#define PI 3.14159。 了解这些基础知识对于理解和编写C语言程序至关重要，因为它们构成了程序的基本构建块，决定了数据如何存储和操作，...
webClient + fastJSON2 获取json格式的数据，同时解析至java class 并 下划线转驼峰
qq_46662528的博客
06-17 253
决定返回值是什么格式一般情况可以不写，但这里要获取JSON格式的。可以将JSON和java的class属性自动进行匹配。webClient中。fastJSON2中。
netcore 生成验证码
qq_51172697的博客
06-20 231
提供一个生成验证码和校验的接口。
风水研究会官网源码系统-可展示自己的领域内容-商品售卖等
最新发布
haojiehero123的博客
06-23 74
整洁大气，非常漂亮，前端内容均可通过后台修改。
qml实现点击按钮往Columnt添加一个组件对象
海涛高软
06-17 211
FR：徐海涛(hunkxu)
问题 A: 实验11_4_初识链表
05-26
int nums[] = {1, 2, 3, 4, 5}; int n = sizeof(nums) / sizeof(int); ListNode *head = createList(nums, n); traverseList(head); insertNode(head, 2, 6); traverseList(head); deleteNode(head, 3); ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值