行内标签:

<!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. Html页面head标签元素的意义和应用场景

    相信在html5之前,很少人会关注html页面上head里标签元素的定义和应用场景,可能记得住的只有"title"."keyword"和"descri ...

  2. linux下的C语言开发

    在很多人的眼里,C语言和linux常常是分不开的.这其中的原因很多,其中最重要的一部分我认为是linux本身就是C语言的杰出作品.当然,linux操作系统本身对C语言的支持也是相当到位的.作为一个真正 ...

  3. C#的变迁史 - C# 2.0篇

    在此重申一下,本文仅代表个人观点,如有不妥之处,还请自己辨别. 第一代的值类型装箱与拆箱的效率极其低下,特别是在集合中的表现,所以第二代C#重点解决了装箱的问题,加入了泛型.1. 泛型 - 珍惜生命, ...

  4. 孙鑫MFC学习笔记8：对话框编程（下）

    1.在按钮上没有字体设置,但是在对话框上有字体设置 2.让按钮进行消息响应 *1.创建按钮 *2.创建从按钮继承的类 *3.关联对象 3.属性页编程 *1.在对话框资源中新建属性页 *2.为属性页创建 ...

  5. 疯狂Android讲义 - 学习笔记（二）

    Android应用的用户界面编程 2.1 界面编程与视图(View)组件 Android应用的绝大部分UI组件放在android.widget.android.view包及其子包中,所有UI组件都继承 ...

  6. 建立MySQL的ODBC

    1. 进入控制面板->管理工具->数据源(ODBC): 2. 点击添加,数据源驱动程序选择MySQL ODBC 5.1 Driver: 3. 弹出MySQL Connecotor/ODBC ...

  7. 利用servlet3.0上传，纯原生上传，不依赖任何第三方包

    tomcat7里面自带的servlet3.0.jar,支持很多新特性,例如,annotation配置servlet,上传,异步等等.... 如果你的tomcat版本低于7的话,单独在项目中引入serv ...

  8. ThinkCMF-smeta扩展字段

    ThinkCMF - 添加文章功能 没有上传文件功能,为了扩展这一功能,在页面加入如下代码: <tr> <td> <div style="text-align: ...

  9. 三层架构与MVC之间的区别

    文章转发自:http://www.admin10000.com/document/535.html 我们平时总是将三层架构与MVC混为一谈,殊不知它俩并不是一个概念.下面我来为大家揭晓我所知道的一些真 ...

  10. springmvc参数绑定

    1. @PathVariable当使用@RequestMapping URI template 样式映射时, 即 someUrl/{paramId}, 这时的paramId可通过 @Pathvaria ...