css基础框架及用法

最新推荐文章于 2024-05-04 13:19:57 发布

Ikch

最新推荐文章于 2024-05-04 13:19:57 发布

阅读量281

点赞数

原文链接：https://blog.csdn.net/weixin_53283606/article/details/111702435

版权

作为web前端的表现层css担任着将整个网页做得更加美观的重要任务。当然想要掌握css也会比html稍微困难一些。
css有四种引入格式：内嵌式引入
行内样式
外链样式
嵌入样式
内嵌式引入：

<!DOCTYPE html>
<html lang="en"><head>   <meta charset="UTF-8">   <title>Document</title>
   <style type="text/css">
   body{font-size:36px;}
   </style>
   </head>
   <body>

1
2
3
4
5
6
7
8
行内样式：

<b style="font-size:56px;">浏览器不支持 iframe。</b>
1
外链样式：

我们可以看到图二与图三的差距，当我们把鼠标移动到图二中的box上时，box就会向图三进行转变。这种转变的过程是用transition进行的。我们在transition中加入我们想要进行变化的元素以及元素变化的样式和时长。
Transiction:
property(参与过渡效果的属性)
duartion(过渡效果花费的时间)
timing（执行速度的快慢）
由此我们可以定义css中盒子的运动变化。
一般我们css使用的引入样式主要分为嵌入式和外链式。
嵌入式我们已经示范给大家看了，接下来我们示范外链式：

这是html文件

这是css文件

这是文件在浏览器中的样式。

我们可以看见利用外链式我们可以非常简洁明了的了解css部分与html部分的区别以及各个部分元素的属性和变化（我个人更喜欢这个引入方式），当然在我们制作css短小的文件时我建议使用嵌入式更加节省时间成本，但是当css部分特别长时，最好使用外链式，外链式有利于我们进行查补错误和更改。
由此可见使用哪种引入方式并不影响我们文件的运行，只是在不同情况下选择最合适的方式才是最重要的。
到此就是css具体的使用和框架。
————————————————
版权声明：本文为CSDN博主「日沉归山海」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_53283606/article/details/111702435

Ikch

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css基础框架及用法

作为web前端的表现层css担任着将整个网页做得更加美观的重要任务。当然想要掌握css也会比html稍微困难一些。css有四种引入格式：内嵌式引入行内样式外链样式嵌入样式内嵌式引入：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&...
复制链接

扫一扫