HTML&CSS基础-内联样式和内部样式表
HTML&CSS基础-内联样式和内部样式表
作者:尹正杰
版权声明:原创作品,谢绝转载!否则将追究法律责任。
一.CSS(Cascading Style Sheets)简介
层叠样式表(Cascading Style Sheets) css可以用来为网页创建样式表,通过样式表可以对网页进行装饰。
所谓层叠,可以将整个网页想象成一层一层的结构,层次高的将会覆盖层次低的。 而CSS就可以分为网页的各个层次设置样式。
二.使用火狐(Mozilla Firefox)浏览器的Tilt插件的3D效果来看层叠样式表
1>.如下图所示,按住"alt"键,点击"工具",选择"Web 开发者"后再点击"Tilt"
2>.会进入到一个如下图所示的界面
3>.我们可以旋转当前网页
4>.发现我们看到的图竟然是一层一层累加起来的,于是我们将网页转动到侧面,如下图所示
三.demo.html源代码
<!DOCTYPE html>
<html>
<head>
<title>尹正杰的网页</title>
<meta charset="utf-8"/> <!--
内部样式表:
也可以即将CSS样式编写到head中的style标签里,注意:type属性是MIME的类型,建议大家显示写上,如果不写可能会在一些较老的浏览器无法识别CSS代码。
将样式表编写在style标签中,然后通过CSS选择器选中指定的元素,然后可以同时为这些元素一起样式,这样可以使样式进一步复用;
将样式表编写到style标签中,也可以使标签和结构进一步分离它也是我们推荐的使用方式;
-->
<style type="text/css">
p {
color:red;
font-size:40px;
}
</style>
<head> <body>
<!--
虽说font标签可以将字体设置为红色,但我们并不推荐这样使用,而是推荐使用css来修饰。
-->
<h1>我的博客地址:<font color="red" size="7">https://www.cnblogs.com/yinzhengjie/</font></H1> <!--
可以将CSS样式编写到元素的style属性当中
将样式直接编写到style属性中,这中样式我们成为内联样式;
内联样式只对当前的元素中的内容起作用,内联样式不方便复用;
内联样式属于结构与表现耦合,不方便后期的维护,不推荐使用;
-->
<p><<静夜思>></p>
<p style="color:yellow; font-size:80px">窗前明月光,疑是地上霜</p>
<p>举头望明月,低头思故乡</p> </body>
</html>
四.浏览器打开以上代码渲染结果
HTML&CSS基础-内联样式和内部样式表的更多相关文章
- HTML&CSS基础-内联和块元素
HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...
- HTML基础 内联样式改进 三毛语录
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- HTML&CSS基础-内联框架
HTML&CSS基础-内联框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...
- html css的内联样式 内部样式表 外部样式表的优先级
http://www.w3school.com.cn/html/html_css.asp 这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式 ...
- CSS的引用方式(引用外部样式表、内部样式表、内联样式表)
CSS引用外部样式表的优点:一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件,所以外部引用相对于内部引用和内联引用来说是是节省资源的. CSS使用内部样式表.内联样式表的优点:可以直观的 ...
- 你真的知道css三种存在样式(外联样式、内部样式、内联样式)的区别吗?
css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...
- CSS3——注释 id 和 class 选择器 css创建(外部、内部、内联样式表)
注释 /* 注释内容 */ id 和 class 选择器 id ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...
- Vue学习之路第十二篇:为页面元素设置内联样式
1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...
- Vue 内联样式
前置说明 Vue 绑定HTML 全局属性style,可以动态地改变属性值.这里就不讲内联样式的基础了,具体轻查看官网文档 Class 与 Style 绑定. 主要分为以下两个步骤进行: v-bind ...
随机推荐
- IntelliJ IDEA Error:(24, 35) java: 常量字符串过长
在转换一个JSON转Java对象是 idea 编译不通过 提示:Error:(24, 35) java: 常量字符串过长 File -> Settings -> Build,Execut ...
- 通过下载git包来安装git
Git是一个开源的分布式版本控制系统,可以有效.高速的处理从很小到非常大的项目版本管理.而国外的GitHub和国内的Coding都是项目的托管平台.但是在使用Git工具的时候,第一步要学会如何安装gi ...
- 使用 Alibaba 的 Homebrew 镜像源进行加速
使用 Alibaba 的 Homebrew 镜像源进行加速 平时我们执行 brew 命令安装软件的时候,跟以下 3 个仓库地址有关: brew.git homebrew-core.git homebr ...
- 关于jQuery请求后台成功一直走error回调函数问题
如果dataType声明与响应不符就会进入error回调.就算接口请求成功,也是走error回调函数.
- html中定义模板
定义一个html中不解析的模板,有如下三种方法1.使用<xmp>标签 <xmp id="test"> <div>测试</div> & ...
- java 调用Spring接口上传文件及其他参数填充
第一步:在Spring配置中添加以下内容 <!-- 配置MultipartResolver 用于文件上传 使用spring的CommosMultipartResolver --> < ...
- CF-Educational Codeforces Round 77 (Rated for Div. 2)(A-E题解)
A. Heating (水题) 题目链接 大致思路: 因为是代价是平方,所以让每一个房间的大小平均即可,即最大和最小相差不超过一. 代码: #include<bits/stdc++.h> ...
- Python之logging.basicConfig函数各参数
filename: 指定日志文件名 filemode: 和file函数意义相同,指定日志文件的打开模式,'w'或'a' format: 指定输出的格式和内容,format可以输出很多有用信息,如上例所 ...
- 【LeetCode】 #7:反转整数 C语言
目录 题目 思路 初步想法 进一步想法 总结 最近打算练习写代码的能力,所以从简单题开始做. 大部分还是用C语言来解决. @(解法) 题目 给出一个 32 位的有符号整数,你需要将这个整数中每位上的数 ...
- SQL SERVER 查询所有表大小
DECLARE @T TABLE ( [name] VARCHAR(max), [rows] INT, reserved VARCHAR(max), data_size VARCHAR(max), i ...