css基础框架及用法

css主要框架
作为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>
	

行内样式:

<b style="font-size:56px;">浏览器不支持 iframe。</b>

外链样式:

<link rel="stylesheet" type="text/css" href="css/main.css">

嵌入样式:

<style type="text/css">
  @import url("css/style.css");</style>
  

介绍了css的引入方式,接下来就是css的选择符了,这个在本文顶部的思维导图中有详细的讲解在这里就不细说了。(还是老规矩实际操作搞起来,装逼呀🐶)
这是代码页
这是代码在浏览器打开的样子
这是当我们把鼠标移动到图像上时的样子
我们可以看到图二与图三的差距,当我们把鼠标移动到图二中的box上时,box就会向图三进行转变。这种转变的过程是用transition进行的。我们在transition中加入我们想要进行变化的元素以及元素变化的样式和时长。
Transiction:
property(参与过渡效果的属性)
duartion(过渡效果花费的时间)
timing(执行速度的快慢)
由此我们可以定义css中盒子的运动变化。
一般我们css使用的引入样式主要分为嵌入式和外链式。
嵌入式我们已经示范给大家看了,接下来我们示范外链式:
这是文件html部分
这是html文件
这是文件css部分
这是css文件
在浏览器中的样式
这是文件在浏览器中的样式。

我们可以看见利用外链式我们可以非常简洁明了的了解css部分与html部分的区别以及各个部分元素的属性和变化(我个人更喜欢这个引入方式),当然在我们制作css短小的文件时我建议使用嵌入式更加节省时间成本,但是当css部分特别长时,最好使用外链式,外链式有利于我们进行查补错误和更改。
由此可见使用哪种引入方式并不影响我们文件的运行,只是在不同情况下选择最合适的方式才是最重要的。
到此就是css具体的使用和框架。

  • 23
    点赞
  • 42
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值