三中的使用方法的简单实例如下:
行内样式:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>css行内样式</title> </head> <body> <div style="width:100px;height:100px;background:red;"></div>> </body> </html>
内嵌样式:
<!!doctype html> <html> <head> <meta charset="UTF-8"> <title>css内嵌样式</title> </head> <body> <style type="text/css"> #div{width:100px;height:100px;background:red;} </style> <div id="div"></div>> </body> </html>
外部式:
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>css内嵌样式</title> <link rel="stylesheet" type="text/css" href="ccss.css"> </head> <body> <div id="div"></div>> </body> </html>
css文件
#div{width:100px;height:100px;background:red;}
简言之:
行内样式:就是代码写在具体网页中的一个元素内;比如:<div style="color:#f00"></div>
内嵌式:就是在</head>前面写;比如:<style type="text/css">.div{color:#F00}</style>
外部式:就是引用外部css文件;比如:<link href="css.css" type="text/css" rel="stylesheet" />
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
简介: 阿里CIO学堂独家出品,零售课程实录公开。《零售数据中台通关指南》来啦...
前言: 对于数字加减按钮的实现,以前用过不少方案,诸如: 1.使用背景图片这种...
在使用Dreamweaver CS6进行网页制作的时候,页面布局样式会很多。可以利用插入cs...
很多人说IE6不支持PNG透明,其实IE支持100%透明的PNG,疯狂的IE6只是不支持png的...
记录下一个疑问,最近在重新看canvas做点Demo这样,时间是写在2019年11月5日,以...
引言 2006年,云计算概念甫一问世,便搅动了天下风云。而后弹性计算能力第一次作...
文本将介绍 CSS 媒体查询中新增的几个特性功能: prefers-reduced-motion prefer...
PSD转div css网页切图示例 第一步:先把把所有标记归置内外边距归置为0,其实还有...
在平常我们的店铺装修中,经常会遇到在一张图片上做产品链接,或者在一张海报上...
DreamWeaver制作的的网页都可以分为各个不同功能的板块,将这些板块结合起来就是...