简简单单玩转CSS3（1）

与其写一些理论的东西，到不如直接用代码来实践，代码都是试出来的。

建议拿下面的代码直接去运行，边调试边学习

字体、字号、背景、颜色、选择器、级联、盒子、位置、浮动

<!DOCTYPE html>
<html>
<head><title>玩转CSS</title>
</head>
<body style="color: green;background:white">会员<strong style="font-size: medium;font-family: 隶书;">飞得高</strong><br><p><strong style="font-weight: 200;font-size: 3em;font-family: 楷体">飞得高</strong><br></p><strong style="font-size: 30px;">摔得惨</strong><br><strong style="font-size: large;">飞得高</strong><h1 style="color: red;background: black">黑科技</h1><span style="font:30px 楷体">放暑假</span><br><span style="font:30px 楷体;line-height: 4.3">放寒假</span><div style="text-align: center;background: black;color:red;border: 5px solid #365423">睡觉</div>
</body>
</html>

优先级：内联 > id > 类 > 元素 > universal > 浏览器默认

<!DOCTYPE html>
<html>
<head><title>玩转CSS</title><link rel="stylesheet" type="text/css" href="1.css"><!--外挂--><style type="text/css">a:link{color: blue}body{text-align: center;}h1[title=aaa],h2{color: red;font-style: italic;font-size: large;font-family: 隶书;}#123{letter-spacing: 0.3em;background:cyan;font-family: 楷体;}.p{color: blue;font-style: normal;font-size: large;font-family: 楷体} </style>
</head>
<body ><h1>奋斗</h1><h1 title="aaa">搜客</h1><h2>前进</h2><div class="p">过一会</div><p id="123">睡觉</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title>玩转CSS</title><style type="text/css">body{text-align: center;}h1{color: red;font-style: italic;font-size: 130%;font-family: 隶书;}p{border-style: double;border-top-width: 10px;border-left-width: 20px;border-right-width:20px;border-bottom-width: 20px; border-color: lime; padding: 5px 5px 5px 5px;margin: 12px 12px 12px 12px;}#lg{position: relative;background-color: lightgreen;}span{top: 10px;border:2px solid black;}div{background-color: lightblue;}</style></head>
<body ><h1>奋斗</h1><h2>前进</h2><p>黑科技</p><div style="border-color: lime;">飞蛇</div><div><span>床前明月光</span><br><span id="lg">疑是地上霜</span><br><span>举头望明月</span><br><span>低头思故乡</span></div></body>
</html>

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">div{width: 96px;height: 96px;border:2px solid black;font-size: 88px;font-family: 楷体;position: relative;}.ji{background-color: white;color: black;}.ou{background-color: black;color: white;}#er{left: 100px;}#si{left: 200px;bottom: 100px;}</style>
</head>
<body ><div class="ji" id="yi">一</div><div class="ou" id="er">二</div><div class="ji" id="san">三</div><div class="ou" id="si">四</div><div class="ji" id="wu">五</div><div class="ou" id="liu">六</div><div class="ji" id="qi">七</div><div class="ou" id="ba">八</div>
</body>
</html>

<!DOCTYPE html>
<html>
<head><title></title><style type="text/css">p{background-color: lightyellow;margin-left: 30px;margin-right: 50px;}   img{vertical-align: middle;float: left;}</style>
</head>
<body><img src="1.jpg"><p>床前明月光</p><br><p>疑是地上霜</p><br><p>举头望明月</p><br><p>低头思故乡</p>
</body>
</html>

简简单单玩转CSS3（1）相关推荐

带你玩转css3的3D！
话不多说,先上demo 酷炫css3走马灯/正方体动画: https://bupt-hjm.github.io/cs... github源码地址:https://github.com/BUPT-HJM ...
手把手教你玩转CSS3 3D技术
手把手教你玩转 CSS3 3D 技术要玩转css3的3d,就必须了解几个词汇,便是透视(perspective).旋转(rotate)和移动(translate).透视即是以现实的视角来看屏幕上的2 ...
玩转CSS3(一)----CSS3实现页面布局
请珍惜小编劳动成果,该文章为小编原创,转载请注明出处. 摘要: CSS3相对CSS2增加了一些新的布局方式:多栏布局和盒子布局.在这篇文章中,将对CSS2的布局进行简单的回忆,并总结CSS3的布局方式 ...
【笔记】玩转CSS3新特性_from_JSPang
文章目录第一章:环境搭建,伪类选择器,伪元素 1.1.嫁汉嫁汉穿衣吃饭 1.2.新特性简介和浏览器支持情况 1.新特性简介 2.浏览器对CSS3的支持情况 3.渐进增强和优雅降级 1.3.伪类选择器 ...
玩转CSS3的3D动画效果
效果展示基础知识 transform-style:启用 3D 模式要利用 CSS3 实现 3D 的效果,最主要的就是借助 transform-style 属性.transform-style 只有 ...
3秒钟，教你玩转CSS3动画
文章目录小声嘀咕中--勿扰一.CSS3 的动画基础知识 1.CSS3 转换 2.CSS3动画是什么? 二.CSS3 的动画效果展示区 1.3D骰子动画 2.西游记四人行小声嘀咕中--勿扰如 ...
玩转CSS3渐变（知识点部分）
思维导图线性渐变 linear-gradient 某条直线沿一个方向产生渐变效果 1.起始颜色如果向从黄色渐变到天蓝色,那么应该这样写: 黄色写前面,天蓝色写在后面. background-ima ...
立方体移位html5游戏在线玩,HTML5 CSS3极富创意的立方体游泳动画
CSS 语言: CSSSCSS 确定 body { overflow: hidden; height: 100vh; perspective: 50em; background: radial-gra ...
html 气泡动画效果,css3实现好看的气泡按钮动画特效
CSS3在我们网页设计中是最关键的一环,为什么这么说呢?我们在浏览别人的网站时,经常会看到特别好看的动画效果,比如一个按钮啊,一个图片啊,每次看到都能够让人有种赏心悦目的感觉,这就使网站更具有吸引力和 ...

简简单单玩转CSS3（1）

与其写一些理论的东西，到不如直接用代码来实践，代码都是试出来的。

建议拿下面的代码直接去运行，边调试边学习

简简单单玩转CSS3（1）相关推荐

最新文章

热门文章