CSS 行内样式 页内样式 外部样式

时间：2022-09-17 12:38:23

行内标签:

<!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>

图片

CSS 行内样式 页内样式 外部样式

业内标签:

<!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>

图片:

CSS 行内样式 页内样式 外部样式

外部样式:

div{

    color: brown;

    font-size: 50px;

}

p{

    background-color: yellow;

    color: darkgreen;

    font-size: 39px;

}

图片:

CSS 行内样式 页内样式 外部样式

<!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 行内样式 页内样式 外部样式

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

  1. &lbrack;19&sol;06&sol;05-星期三&rsqb; CSS基础&lowbar;样式表的位置&lpar;内联、内部、外部样式&rpar;、块元素&lpar;div&rpar;、内联元素&lpar;span&rpar;、常用的选择器

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

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

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

  3. JavaScript的DOM&lowbar;StyleSheet操作内联或链接样式表

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

  4. Ionic4&period;x Theming&lpar;主题&rpar; 增加内置主题 颜色 修改内置组件默认样式 修改底部 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&comma;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. 利用Select2优化&commat;Html&period;ListBoxFor显示，学会用MultiSelectList

    最近需要用到多选框,Asp.Net MVC自带的@Html.ListBox或@Html.ListBoxFor的显示效果太差,于是找到了Select2进行优化,并正式了解了多选框的操作方法. 首先介绍多 ...

  2. 从零开始学 Java - CentOS 下安装 Nginx

    早上下起了暴雨 闹钟还未响起就听到雨滴哗啦啦击打窗户的声音,被吵醒了.起床上班,在楼下的十字路口,暴雨大到完全看不清对面,两个穿着雨衣的交警站在路口中间指挥着过往的车辆,大家都慌慌张张.急急忙忙的打着 ...

  3. 第九周 psp

    团队项目PSP 一:表格     C类型 C内容 S开始时间 E结束时间 I时间间隔 T净时间(mins) 预计花费时间(mins) 讨论 讨论用户界面 9:50 12:45 35 45 80 分析与 ...

  4. c&num;后台进行窗体切换的方法

    Response.Redirect("http://localhost:60896/WebForm2.aspx");

  5. 基础01 dos命令

    常见的dos命令: 盘符:        进入指定的盘下面. 操作文件夹:                   dir                                   列出当前控制 ...

  6. 运行ASP程序报错

    错误提示: An error occurred on the server when processing the URL. Please contact the system administrat ...

  7. &lbrack;Guava官方文档翻译&rsqb; 1&period;Guava简介 &lpar;Introduction&rpar;

    用户指南 Guava包含Google在Java项目中用到的一些核心库:collections, caching, primitives support, concurrency 库, common a ...

  8. 在LINUX的命令提示符及CMD命令提示符中显示时间

    用途之一是可以查看某个命令或程序的执行时间. 一.CMD中显示时间设置 参数说明: $P:当前路径 $G:>(大于号) $T:当前时间,精确到0.01s 实验如下: C:\Users\g4-10 ...

  9. 如何在Linux中使用命令行卸载软件

    您可以使用“dpkg”命令来查看您的计算机,按“Ctrl + Alt + T”的所有已安装包的列表,打开一个终端窗口. 在提示符下键入以下命令,然后按Enter键.dpkg -- list 要卸载程序 ...

  10. pytorch查看CUDA支持情况，只需要三行代码，另附Cuda runtime error &lpar;48&rpar; &colon; no kernel image is available for execution处理办法

    import torch import torchvision print(torch.cuda.is_available()) 上面的命令只是检测CUDA是否安装正确并能被Pytorch检测到,并没 ...

相关文章