初学HTML的自我修养之css基础样式和浮动实例

最新推荐文章于 2024-07-14 12:31:08 发布
最新推荐文章于 2024-07-14 12:31:08 发布
阅读量226 收藏
点赞数 1
文章标签： css html css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_59631426/article/details/121686547
版权

什么是 CSS？

  • CSS 指的是层叠样式表* (Cascading Style Sheets)
  • CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素
  • CSS 节省了大量工作。它可以同时控制多张网页的布局
  • 外部样式表存储在 CSS 文件中

    为何使用 CSS？

    CSS 用于定义网页的样式，包括针对不同设备和屏幕尺寸的设计和布局。

    CSS 实例

    body {
  background-color: lightblue;
}

h1 {
  color: white;
  text-align: center;
}

p {
  font-family: verdana;
  font-size: 20px;
}

    CSS 节省了大量工作！

    样式定义通常保存在外部 .css 文件中。

    通过使用外部样式表文件，您只需更改一个文件即可更改整个网站的外观！

    CSS 语法

    CSS 规则集（rule-set）由选择器和声明块组成：

    CSS 选择器

    选择器指向您需要设置样式的 HTML 元素。

    声明块包含一条或多条用分号分隔的声明。

    每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。

    多条 CSS 声明用分号分隔，声明块用花括号括起来。

    实例

    在此例中，所有 <p> 元素都将居中对齐，并带有红色文本颜色：

    p {
  color: red;
  text-align: center;
}

     

    外部 CSS

    通过使用外部样式表，您只需修改一个文件即可改变整个网站的外观！

    每张 HTML 页面必须在 head 部分的 <link> 元素内包含对外部样式表文件的引用。

    实例

    外部样式在 HTML 页面 <head> 部分内的 <link> 元素中进行定义：

    <!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
  • 以下是css实例：利用css制作沁园春·长沙
  • <!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>18160029 </title>
</head>
<style>
    .box {
        font-size: 25pt;
        font-weight: bolder;
    }
    
    .box1 {
        font-size: 10pt;
        color: rgb(56, 241, 10);
    }
    
    .box2 {
        color: rgb(22, 120, 247);
        font-size: 18pt;
    }
    
    .box3 {
        font-size: 10pt;
        color: rgb(70, 4, 145);
    }
    
    .box4 {
        font-size: 18pt;
        color: rgb(255, 87, 87);
    }
    
    .box5 {
        font-size: 15pt;
        color: rgb(196, 7, 243);
    }
    
    .box6 {
        font-size: 21pt;
        color: rgb(9, 230, 20);
    }
    
    .box7 {
        color: rgb(253, 94, 19);
        font-size: 25pt;
    }
</style>
 
<body>
    <div align="center">
        <p class="box">沁园春·长沙
            <text class="box1">[毛泽东]</text>
        </p>
        <p class="box2">独立寒秋
            <text class="box3">湘江北去</text> 橘子洲头。
        </p>
        <p class="box4">看万山红遍，层林尽染；
            <text class="box5">漫江碧透，</text> 百舸争流。
        </p>
        <p class="box2">鹰击长空，
            <text class="box1">鱼翔浅底，</text>万类霜天竞自由。
        </p>
        </p>
        <p class="box4">怅寥廓，
            <text class="box6">问苍茫大地，谁主沉浮？</text>
        </p>
        <p class="box5">携来百侣曾游，忆往昔峥嵘岁月稠。</p>
        <p class="box6">恰同学少年，风华正茂；书生意气，挥斥方遒。</p>
        <p class="box2">指点江山，激扬文字，粪土当年万户侯。</p>
        <p class="box4">曾记否，到中流击水，
            <text class="box5">浪遏</text>
            <text class="box7">飞&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;舟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;？</text>
        </p>
    </div>
</body>
 
</html>

    运行效果图如下

  • 2.css基础 样式和浮动

  • <html>

<head>
    <title>摆弄形状</title>
    <!-- 我们应该在此<head>标记中链接什么文件? -->
    <link rel="stylesheet" href="C:\Users\mayn\Desktop\12.2style.css">
</head>

<body>
    <div id="container">
        <div id="first-row" class="row">
            <div class="square"></div>
            <div class="circle green"></div>
            <div class="square"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
        </div>

        <div id="second-row" class="row">
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle fancy green"></div>
        </div>

        <div id="third-row" class="row">
            <div class="circle"></div>
            <div class="circle green"></div>
            <div class="circle"></div>
            <div class="square fancy"></div>
            <div class="square"></div>
        </div>

        <div id="fourth-row" class="row">
            <div class="square"></div>
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="circle"></div>
        </div>

        <div id="fifth-row" class="row">
            <div class="circle"></div>
            <div class="circle fancy"></div>
            <div class="circle"></div>
            <div class="square"></div>
            <div class="circle green"></div>
        </div>
    </div>
</body>

</html>

    运行效果图如下

  •  看完请关注智商欠费不死也废i

昨天花了15元
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
沁园春.长沙HTML风格化制作简单代码
geqianna的博客
12-03 714
代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &lt...
将沁园春长沙写出来使用html css,高一语文教案：《沁园春长沙》教案设计二
weixin_39951378的博客
06-17 129
高一断肠句子：难过的诗句子。http://n.sinaimg.cn/news/1_img/dfic/2b0c102b/107/w1024h683/20190807/0ecd-iaxiufn3904685.jpg却见，法庭将行政确权、民事侵权二审以次侵犯召过堂前会此雕刻壹做法不单处理了当前存放内行政确权、民事侵权孤立而招致的当事人中间男得利的破开绽，同时顺应了法庭“壹致裁剪判规范”的设置初衷，还能...
PC端重置reset.css
weixin_43837268的博客
10-11 856
/* 把我们所有标签的内外边距清零 */ * { margin: 0; padding: 0 } /* em 和 i 斜体的文字不倾斜 */ em, i { font-style: normal } /* 去掉li 的小圆点 */ li { list-style: none } img { /* border 0 照顾低版本浏览器 如果 图片外面包含了链接会有边框的问题 */ border: 0; /* 取消图片底侧有空白缝隙的问题 */ .
css3自定义字体实现毛体输出沁园春雪以及font属性
xiaozhuangyumaotao的博客
04-27 1050
案例效果如下图： 本案例是前边两篇论述@font-face属性的延伸与巩固。这里使用的是毛体，各位可以去字体网站上自行搜索下载，也可以使用其他字体来练习。 html代码： <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> </head> ...
40个适合初学者练习HTML和CSS的案例
web前端开发
10-14 3774
英文 | https://niemvuilaptrinh.medium.com/40-html-css-projects-for-beginner-2021-5bd01ff62361翻译...
html+css基础教程入门篇之CSS 浮动行框和清理
2401_84098018的博客
04-07 856
你要问前端开发难不难，我就得说计算机领域里常说的一句话，这句话就是『难的不会，会的不难』，对于不熟悉某领域技术的人来说，因为不了解所以产生神秘感，神秘感就会让人感觉很难，也就是『难的不会』；当学会这项技术之后，知道什么什么技术能做到什么做不到，只是做起来花多少时间的问题而已，没啥难的，所以就是『会的不难』。我特地针对初学者整理一套前端学习资料分享给大家，戳这里即可领取领域里常说的一句话，这句话就是『难的不会，会的不难。
CSS基础（盒子模型案例,边框和阴影,浮动）
qq_45585640的博客
12-20 1988
CSS基础（盒子模型案例,边框和阴影,浮动）
Html-and-css.rar_html实例
09-23
3. CSS布局技术：包括盒模型、浮动布局、Flexbox（弹性盒子布局）和Grid布局，这些都是创建复杂网页布局的关键工具。 4. CSS3的新特性：了解如何利用CSS3实现动态效果、响应式设计和新的选择器功能。 5. HTML与CSS的...
html_css 最全前端教程和手册带实例，html，css
11-26
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是前端开发的基石，用于构建和设计网页。本教程涵盖了这两个领域的全方位知识，旨在帮助初学...开始探索HTML和CSS的世界，开启你的前端开发之旅吧！
html+css实例小demo
05-31
在这个“html+css实例小demo”项目中，我们可以看到一系列实例，涵盖了从基础到高级的HTML和CSS用法，同时也涉及到JavaScript、JQuery以及Vue.js等前端技术。 首先，HTML作为网页的结构语言，用于定义网页内容的...
HTML网页代码实例，帮助初学者
04-15
对于初学者来说，理解HTML和CSS的基础知识是至关重要的。通过创建个人网站，你可以学习如何组织网页结构、应用样式以及创建交互性。实例中的网页展示了如何结合文字、图像和链接构建一个简单的网页，包括头部导航、...
上百个CSS实例|CSS基础学习|CSS入门基础|CSS样式集合
04-23
本资源集合包含了“上百个CSS实例”，旨在帮助初学者快速掌握CSS的基础知识和应用技巧。 1. **CSS选择器**：CSS的选择器是定位HTML元素的关键，包括标签选择器、类选择器、ID选择器、属性选择器等。例如，`p` 选择...
CSS 技巧与案例详解：开篇介绍
粉丝们务必加入微信粉丝群
07-14 20
本系列文章分为多个部分，每个部分都详细解析了CSS的各种实用技巧和经典案例。CSS 单位速查表 & 自定义引用标记 & 重置所有样式：了解常见CSS单位，并学习如何创建自定义的引用标记和重置样式表。隐藏空元素 & 完美的嵌套边框圆角 & 排版比例基础知识：掌握隐藏元素的方法，实现嵌套圆角边框，以及排版比例的基本概念。自定义文本选择 & 流式排版：定制文本选择的样式，探索流式排版的奥秘。为什么line-height是无单位的 & 兄弟元素淡出效果 & 蚀刻文字效果。
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 2631
title>充电效果
scss概念及使用
m0_74293254的博客
07-10 1124
/ 样式规则使用参数在上面的例子中，@mixin 关键字定义了一个名为 mixin-name 的混合，可以接受多个参数（如果需要的话），并在其中定义一组样式规则。SCSS 的三种循环结构 @for、@each 和 @while 分别用于按照索引循环、遍历列表或 map 类型数据、以及根据条件循环生成样式。这些循环结构使得 SCSS 更加强大和灵活，能够根据需求生成复杂的 CSS 规则。在 SCSS 中，可以使用自定义函数来增强样式表的功能，这些函数可以接受参数并返回处理后的值。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1228
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
05.CSS 缓动变量 && 首字下沉 & 放大缩小动画
最新发布
粉丝们务必加入微信粉丝群
07-14 30
我们可以轻松定义自定义缓动变量,帮助我们的设计脱颖而出。事实上,上面提到的内置函数也可以使用。虽然这些函数适合日常使用,但还有一个功能更强大但令人生畏的选项可用,即。首字下沉，让第一段的第一个字母比其余文本大。在设计中,大多数 Web 开发人员对于。创建一个放大缩小的动画效果。的大多数用例使用内置的。
旋转木马案例
喵喵的博客
07-08 769
旋转木马 如果接口需要的数据格式和原始数据提供的格式有差异 不要去改接口方法 也不要改原始数据 做一层中间件(数据处理函数/方法) <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
HTML实例网页代码，适合于初学HTML的同学
02-03
这段代码中包含了CSS的样式设置以及div的样式布局，使得该实例较为全面，对学生的学习有很大的帮助。本文将通过从设计个人网站开始，并将其转换为代码的过程来实践网页设计。 该作品展示了一个企业网站的制作效果。...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值