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基础-内联样式和内部样式表的更多相关文章

  1. HTML&CSS基础-内联和块元素

    HTML&CSS基础-内联和块元素 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.html源代码 <!DOCTYPE html> <html> ...

  2. HTML基础 内联样式改进 三毛语录

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  3. HTML&CSS基础-内联框架

    HTML&CSS基础-内联框架 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,在同一个路径中有两个网页 <!DOCTYPE html> < ...

  4. html css的内联样式 内部样式表 外部样式表的优先级

    http://www.w3school.com.cn/html/html_css.asp 这三种样式是有优先级的,记住他们的优先级:内联式 > 嵌入式 > 外部式,但是嵌入式>外部式 ...

  5. CSS的引用方式（引用外部样式表、内部样式表、内联样式表）

    CSS引用外部样式表的优点:一般的浏览器都带有缓存功能,所以用户不用每次都下载此CSS文件,所以外部引用相对于内部引用和内联引用来说是是节省资源的. CSS使用内部样式表.内联样式表的优点:可以直观的 ...

  6. 你真的知道css三种存在样式（外联样式、内部样式、内联样式）的区别吗？

    css样式在html中有三种存在形态: 内联样式:<div style="display: none"></div> 内部样式: <style> ...

  7. CSS3——注释 id 和 class 选择器 css创建（外部、内部、内联样式表）

    注释 /*         注释内容          */ id 和 class 选择器 id   ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用 < ...

  8. Vue学习之路第十二篇：为页面元素设置内联样式

    1.有了上一篇的基础,接下来理解内联样式的设置会更简单一点,先看正常的css内联样式: <dvi id="app"> <p style="font-si ...

  9. Vue 内联样式

    前置说明 Vue 绑定HTML 全局属性style,可以动态地改变属性值.这里就不讲内联样式的基础了,具体轻查看官网文档 Class 与 Style 绑定. 主要分为以下两个步骤进行: v-bind ...

随机推荐

  1. Nginx添加静态页面

    1.编辑配置文件 sudo vim /etc/nginx/nginx.conf 在http {}中添加如下 server { listen 80; server_name localhost; loc ...

  2. javafx这些学会后，开发就不难了，往tablecloumn列中添加按钮，修改javafx中tableview中tablecell中的值，修改完回车表示保存到内存中

    javafx开发过程中遇见难题,往tablecloumn列中添加按钮 想了很久的方法,也配有办法判断每行中有数据的地方添加按钮set bank_caozuo.setCellFactory((col)- ...

  3. chrome 报错 ERR_CERT_AUTHORITY_INVALID

    场景: 本地调试https/wss程序,使用了openssl自签名的证书,解决方法:添加到信任证书 根据以下图片流程操作 然后 打开selfsigned.cer 清空该网站缓存 参考资料: https ...

  4. Ubuntu14 配置开机自启动/关闭

    1.ubuntu默认运行级别为2(runlevel),所以在/etc/rc2.b中S开头的链接文件(连接到/etc/init.d)就是自启动项.不想开机自动启动可以把S开头的文件重命名或删除,重命名好 ...

  5. 项目在服务器部署后打开出现Invalid Host header

    一.问题描述在服务器部署启动了项目,页面显示Invalid Host header. 二.问题分析新版的webpack-dev-server出于安全考虑,默认检查hostname,如果hostname ...

  6. (CSDN迁移)JAVA多线程实现-单线程化线程池newSingleThreadExecutor

    JAVA通过Executors提供了四种线程池,单线程化线程池(newSingleThreadExecutor).可控最大并发数线程池(newFixedThreadPool).可回收缓存线程池(new ...

  7. 【idea】全局搜索、替换只显示100条的问题

    没有修改之前 修改之后 如果用的是idea默认的快捷键,按Ctrl+Shift+A,然后输入Registry 如果是eclipse的快捷键

  8. [转帖]POW , POS 与 DPOS 一切都为了共识

    POW , POS 与 DPOS 一切都为了共识 https://www.jianshu.com/p/f99e8fe57c9a   共识机制的背景 加密货币都是去中心化的,去中心化的基础就是P2P节点 ...

  9. 如何申请高德地图用户Key

    打开网页https://lbs.amap.com/,进入高德开发平台. 单击箭头处[注册],打开注册页面.(如果您已注册为高德地图开发者可跳过此步骤,直接登录即可). 选择[成为个人开发者],如果您是 ...

  10. LeetCode 5071. 找出所有行中最小公共元素（Java）

    题目:5071. 找出所有行中最小公共元素 给你一个矩阵 mat,其中每一行的元素都已经按 递增 顺序排好了.请你帮忙找出在所有这些行中 最小的公共元素. 如果矩阵中没有这样的公共元素,就请返回 -1 ...