行内标签:

<!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. 浏览器桌面通知Notification探究

    首先说明,这篇博文不是科普讲解的,而是立flag研究的,是关于浏览器消息自动推送,就是下面这个玩意: 最近常常在浏览器看到这样的消息推送,还有QQ.com的推送,现在我对这个不了解,不知道叫消息自动推 ...

  2. Guid算法与标识列(自动增长字段)在表中的应用

    <<1>>int(bigint)+标识列(自动增长字段) 用标识列实现字段自增可以避免并发等问题.不需开发人员自己控制自增,用标识列的字段在Insert的时候不用指定主键的值. ...

  3. JAVA - IDEA快捷键(精简版)

    快捷键 功能 Ctrl + Alt + V 对应eclipse ctrl + l + 2 自动补全 Ctrl + Alt + L 对应eclipse ctrl + shift + o 代码格式化 Ct ...

  4. 【原创】Kakfa cluster包源代码分析

    kafka.cluster包定义了Kafka的基本逻辑概念:broker.cluster.partition和replica——这些是最基本的概念.只有弄懂了这些概念,你才真正地使用kakfa来帮助完 ...

  5. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  6. 关于C#基础

    前几天帮人做个社交网站,还是用的控件方式,不过学习了ajax和一般处理程序ashx后,也用在了里面一些,今天回来继续写博客.继续上次总结下基础知识,学的内容多,总结的可能比较杂乱,分条总结为平时能自己 ...

  7. 第一讲：WCF介绍

    代码 https://yunpan.cn/cPns5DkGnRGNs   密码:3913                                                         ...

  8. hibernate----component-entity （人-地址-学校）

    package com.ij34.dao; import javax.persistence.*; @Entity @Table(name="school_inf") public ...

  9. tps （事务处理系统）

    事务处理系统:Transaction processing systems (TPS) 提高事务处理效率与保证其正确性 在数据(信息)发生处将它们记录下来 通过OLTP产生新的信息 将信息保存到数据库 ...

  10. MongoDB-query查询接口

    在上一篇中简要使用了C# 对MongoDB进行数据操作,这里补充一些MongoDB query查询条件文档: Query.All("name", "a",&qu ...