行内标签:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

</head>

<!--style="background-color: red;"-->

<body style="background-color: red;">

<!--行内样式-->

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <p style="font-size: 40px; color: yellow;">旭宝爱吃鱼</p>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

    <div style="font-size: 30px; color: red; background-color: green;">旭宝爱吃鱼</div>

</body>

</html>

图片

业内标签:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <!--

      css遵循一个规律:

      1.就近原则

      2.叠加原则

    -->

    <style>

        div{

           color: purple;

           font-size: 40px;

           background-color: yellowgreen;

        }

        p{

            color: deeppink;

            font-size: 50px;

        }

    </style>

    <link href="css/index.css" rel="stylesheet">

</head>

<body>

   <div style="color: hotpink; background-color: red;">旭宝爱吃鱼</div>

   <div>旭宝爱吃鱼</div>

   <div>旭宝爱吃鱼</div>

   <div>旭宝爱吃鱼</div>

   <div>旭宝爱吃鱼</div>

   <p>旭宝爱吃鱼</p>

   <p>旭宝爱吃鱼</p>

   <p>旭宝爱吃鱼</p>

   <p>旭宝爱吃鱼</p>

</body>

</html>

图片:

外部样式:

div{

    color: brown;

    font-size: 50px;

}

p{

    background-color: yellow;

    color: darkgreen;

    font-size: 39px;

}

图片:

<!DOCTYPE html>

<html>

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <link rel="stylesheet" href="css/index.css">

</head>

<body>

   <div>旭宝爱吃鱼</div>

   <p>旭宝爱吃鱼</p>

</body>

</html>

图片:

CSS 行内样式 页内样式 外部样式的更多相关文章

  1. [19/06/05-星期三] CSS基础_样式表的位置(内联、内部、外部样式)、块元素(div)、内联元素(span)、常用的选择器

    一.概念 CSS(Cascading Style Sheets,层叠样式表) 可以用来为网页创建样式表,通过样式表可以对网页进行装饰. 所谓层叠,就是可以将整个网页想象成是一层一层的结构,层次高的将会 ...

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

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

  3. JavaScript的DOM_StyleSheet操作内联或链接样式表

    使用 style 属性,仅仅只能获取和设置行内的样式,如果是通过内联<style>或链接<link>提供的样式规则就无可奈何了,使用 getComputedStyle 和cur ...

  4. Ionic4.x Theming(主题) 增加内置主题 颜色 修改内置组件默认样式 修改底部 Tabs 背景颜色以及按钮颜色

    1.Ionic4.x Theming(主题) Ionic4.x 修改主题颜色的话需要在 src/theme/variables.scss 文件中修改. https://ionicframework.c ...

  5. javescrip内嵌样式与外联样式怎么做？

    对于前端初学者,个人JS样式常用的有两种:内嵌样式 ,外联样式:下面通过一个简单的鼠标点击出现设定的验证数字为例进行演示: 先看下效果: 鼠标点击前效果: 鼠标点击后效果: 图中的这个ojbk是我js ...

  6. css中块级元素、内联元素（行内元素、内嵌元素）

    Block element 块级元素    顾名思义就是以块显示的元素,高度宽度都是可以设置的.比如我们常用 的<div>.<p>.<ul>默认状态下都是属于块级元 ...

  7. 闲来无事做了一个项目，内有redis,EasyUI样式简单应用，七层分页查询，API跨域。

    <link href="~/jquery-easyui-1.5.3/themes/default/easyui.css" rel="stylesheet" ...

  8. Windows Phone 为指定容器内的元素设置样式

    在Windows Phone中设置元素样式有多种 拿TextBlock来说 1.我们可以直接在控件上设置: <TextBlock Text="自身样式设置" Width=&q ...

  9. jQuery实现页内查找相关内容

    当需要在页面中查找某个关键字时,一是可以通过浏览器的查找功能实现,二是可以通过前端脚本准确查找定位,本文介绍通过jQuery实现的页面内容查找定位的功能,并可扩展显示查找后的相关信息. 本文以查找车站 ...

随机推荐

  1. linux专题三之如何悄悄破解root密码（以redhat7.2x64为例）

    root用户在linux系统中拥有至高无上的权限.掌握了root密码,差不对可以对linux系统随心所欲了,当然了,root用户也不是权限最高的用户. 但是掌握了root密码,基本上够我们用了.本文将 ...

  2. [python基础]关于装饰器

    在面试的时候,被问到装饰器,在用的最多的时候就@classmethod ,@staticmethod,开口胡乱回答想这和C#的static public 关键字是不是一样的,等面试回来一看,哇,原来是 ...

  3. 理解SQL Server是如何执行查询的 (2/3)

    查询执行的内存授予(Query Execution Memory Grant) 有些操作符需要较多的内存才能完成操作.例如,SORT.HASH.HAS聚合等.执行计划通过操作符需要处理数据量的预估值( ...

  4. MVC中使用EF+MySQL

    最近一段时间,想在EF中使用MySQL,于是就进行了测试. 我的环境是VS2013+EF6+MySQL5.7.4 首先要下载MySQL For VisualStudio 1.1.4.Connector ...

  5. ASP.NET MVC程序播放H.264视频

    在这篇之前,Insus.NET不管是在ASP.NET还是ASP.NET MVC实现很多视频播放,你可以参考这篇链接:http://www.cnblogs.com/insus/category/4650 ...

  6. STOP:c0000218 {Registry File Failure}

    这几天够折腾的了,一台很老很老的服务器,在启动之后,一个阵列磁盘掉线了: 也许是磁盘坏了: 服务器4个硬盘做的是RAID1,正常来说,坏了其中一二个硬盘是没有问题的.现更换了一个好的硬盘之后,系统无法 ...

  7. [前端]使用JQuery UI Layout Plug-in布局 - wolfy

    引言 使用JQuery UI Layout Plug-in布局框架实现快速布局,用起来还是挺方便的,稍微研究了一下,就能上手,关于该布局框架的材料,网上也挺多的.在项目中也使用到了,不过那是前端的工作 ...

  8. C# IDisposable接口

    public class MyClass : IDisposable { public int a; public MyClass() { //构造 } public void Dispose() { ...

  9. Note: This element neither has attached source nor attached Javadoc and hence no Javadoc could be found.

    在Eclipse中开发Android项目时,鼠标停放在想要查看帮助文档的类上面,发现没有显示帮助文档,显示了下面一句话: Note: This element neither has attached ...

  10. java的spilt（“，”）方法bug处理

    java split方法以逗号分隔如字符串",,,,,," 这样会得到一个空的数组 String str ={1,2,3,,,,, } String[] str1 =spilt(& ...