行内标签:

<!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. PHP--冒泡、选择、插入排序法

    使用php来实现常用三种排序方法: 冒泡.选择.插入中,最优的是插入排序,我就把插入排序的流程画下来了: 插入排序法的流程图: 插入排序的代码: function InsertSort(&$a ...

  2. Ubuntu14.04安装postgresql9.4

    安装前的检查 首先查看是否已经安装了旧版本: dpkg -l |grep postgresql 如果已经安装了某个版本的postgresql,请先卸载. 安装postgresql 添加postgres ...

  3. 画一画javascript原型链

    在javascript中,几种数据类型String,Number,Boolean,Object,Function都是函数,可称之为函数对象. 可以说拥有prototype属性的都是函数. 所有对象都拥 ...

  4. MySqlHelper、CacheHelper

    MySqlHelper代码: using System; using System.Collections; using System.Collections.Generic; using Syste ...

  5. APP Widget的开发

    Android中经常用到APP Widget,如时钟,天气预报等. 长按屏幕,在弹出的对话框中选择“窗口小部件”,然后就列出了可选择的小部件,这些小部件就是APP Widget. 本文开发一个APP ...

  6. JAVA多线程和并发基础面试问答（转载）

    JAVA多线程和并发基础面试问答 原文链接:http://ifeve.com/java-multi-threading-concurrency-interview-questions-with-ans ...

  7. Visual C++中的一些编程小技巧

    在应用程序的任意地方实现窗体的最大化.最小化.正常窗口等功能 // 设置Windows窗体的状态void CMinWindowsDlg::SetWindowState(int nWindowSize) ...

  8. AspectJ对AOP的实现

    一:你应该明白的知识 1.对于AOP这种编程思想,很多框架都进行了实现.Spring就是其中之一,可以完成面向切面编程.然而,AspectJ也实现了AOP的功能,且实现方式更为简捷,使用更加方便,而且 ...

  9. redis主从 以及认证配置

    以前用redis用的很多,各种数据类型用的飞起,算是用得很溜了.不过那都是封装好的方法,自己直接调用.以前的公司比较规范,开发只是开发,很少去做跟运维相关的事情. 换了一份工作,不过这边项目刚开始起步 ...

  10. linux系统新建用户ssh远程登陆显示-bash-4.1$解决方法

    linux系统新建的用户用ssh远程登陆显示-bash-4.1$,不显示用户名路径 网络上好多解决办法,大多是新建.bash_profile文件然后输入XXXXX....然而并没有什么用没有用.... ...