CSS的三种样式

最新推荐文章于 2020-06-28 21:26:32 发布
最新推荐文章于 2020-06-28 21:26:32 发布
阅读量128 收藏
点赞数
分类专栏： CSS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46100406/article/details/103893430
版权

内联样式： 把css代码直接写在现有的HTML标签中

嵌入式： 把css样式代码写在style标签之间

外部式： 把css代码写一个单独的外部文件（.css为扩展名）中，在head标签中通过link标签链入文件在，如下面代码：

<link href="./qw.css" rel="stylesheet" type="text/css"/>

三种样式优先级：内联式 > 嵌入式 > 外部式（一般情况下），
满足就近原则：谁离被设置的元素越近谁就优先级越高，这里离得近是看在嵌套的第几层 而不是代码离得近

丫呀nice
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 三种样式
天空之外
08-21 3009
本节我们要学习一下 CSS 样式的几种形式，在实际应用中向 HTML 中引入 CSS 样式的方法有三种，分别是行内样式、内部样式、外部样式。我们会依次学习这三种方式的优缺点以及应用场景，本节我们先来讲一下行内样式。 什么是行内样式 行内样式，其实从它的名字就可以看出来它的特点，就是直接在 HTML 标签中使用 style 属性设置 CSS 样式。例如像下面这样的： <p style="font-size: 18px;">行内样式</p> HTML 中的 style 属性提供了一种改
CSS3样式
DGL_CSDN的博客
08-31 245
1 文本 1.1 text-shadow 设置⽂本的阴影 参数：⽔平位移 垂直位移 模糊程度 阴影颜⾊ text-shadow: 20px 27px 22px pink; p { font: bolder 50px "Microsoft Yahei"; text-align: center; margin-top: 10px; color: teal; text-shadow: 10px 10px 5px red; } text-sha...
css三种样式表写法
weixin_30614109的博客
05-22 219
css三种样式表：1、内嵌样式表：<head><style type="text/css">样式表写法</style></head>2、外链样式表：<link rel="stylesheet" href="1.css">3、行内样式表：<h1 style="font-size:30px;color:p...
css样式的三种写法
止水Itachi
03-09 697
css三种样式 1: 内部样式 存在在head标签中 <head> <style type="text/css"> 选择器{属性:值;} </style> </head> 2: 内联样式 以属性style的方式添加在标签中 在标签中添加属性 <div style="属...
HTML/CSS实现文字环绕图片布局
weixin_46100406的博客
03-27 2857
1.CSS 利用float: left <!DOCTYPE html> <html lang="zh-cn"> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .aaa{ width: 500px } ...
常见定位方案（三种文档流）
weixin_46100406的博客
01-08 1029
定位方案（文档流）是控制元素的布局，有三种常见方案: 1.普通流 (normal flow) 在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。 普通流其实就是指BFC中的FC 2....
使用背景图片显示不出来，也不报错的原因
weixin_46100406的博客
05-28 961
开始用的relative与absolute不太好调整，后来用背景图片就好设置了。 background: url(…/images/round-orange.png) no-repeat; …/images/round-orange.png是本地地址 不加no-repeat的话会出现重复图片不容易去掉 /*css部分：*/ .round-text-box { width: 120px; height: 90px; } .round-text-box .round-text-orange { c
CSS画图
weixin_46100406的博客
02-28 370
一. 梯形 1.1 画一个正方形（边长100px）边框，边框宽度为10px width: 100px; height: 100px; border: 10px solid red; 效果图： 这里的border平均分配如下图所示： 1.2 画出梯形 1.2.1 思路一 将其余三条边隐藏即可 简洁写法 width: 100px; height: 100px; bor...
vu的图片渲染问题
weixin_46100406的博客
06-03 209
左边的服务类型： 使用v-for渲染页面 布局：左中右的 父级flex布局 并且设置justify-content: space-between;中间文字长短不一，不会出现三个都是左对齐 需要给左边的img和中间的文字一起加一个div 让他flex布局 右边的应用统计： 没有使用v-for 直接拿数据 右边的服务监控： flex布局 一个title+4个盒子 给title的width：100% 独占一行 就可以让四个盒子flex布局 图片渲染 如果是下面的代码是不管是网址路径还是本地
左边定宽右边自适应
weixin_46100406的博客
04-01 127
方法一：左边设置左浮动，右边宽度设置100% .left{ float: left; } .right{ width: 100%; } 方法二： 父容器设置 display：flex；Right部分设置 flex：1 对父元素设置为弹性盒子（flex布局），其子元素可以通过设置 flex 的数值来控制所占空间的比例。 body{ display: flex; ...
盒模型
weixin_46100406的博客
01-05 127
#1.盒模型的组成： 由里到外分别是content（内容），padding（内边距），border（边框），margin（外边距） **#2.盒模型的两种标准：**标准模型 和 IE模型 #3.标准盒模型与IE盒模型的区别： 标准盒模型的width/height指的是content（内容）的宽高，而IE盒模型的width/height指的是content（内容）+padding（内边距）+bo...
三栏布局
weixin_46100406的博客
06-28 118
方法一：margin 左侧和右侧用浮动或定位，中间用margin居中 margin:0 60px 方法二：position 左侧和右侧用position:absolute，中间用margin居中 margin:0 60px 方法三：BFC 左边float:left;右边float:right;中间overflow:hidden; 方法四：父元素display:flex 中间设置flex: 1; ...
CSS3-2D
weixin_46100406的博客
03-01 99
一.兼容性问题： div { transform: translate(50px,100px); -ms-transform: translate(50px,100px); /* IE 9 */ -webkit-transform: translate(50px,100px); /* Safari and Chrome */ } 二.涉及到的代码 border-radius:...
CSS3-3D
weixin_46100406的博客
03-01 86
一.平移translate3d() /*transform: translate3d(x,y,z); x和y可以是px可以是% z只能是px*/ transform: translate3d(100px,100px,300px); 二.翻转rotate() 要翻转效果一定要给父元素设置perspective body{ 对父元素设置 perspective: 500px...
智能锁（远程开锁、指纹开锁、密码开锁、刷卡开锁）
07-19
按键功能：输入密码，并能根据密码来决定开门还是进入管理员模式 密码功能：能够更换开门密码/管理员密码，且具有掉电不丢失功能 刷卡功能：能够判断卡片是否登记；刷卡开门；删除/登记开门卡片 指纹功能：指纹开门；删除/登记指纹 语音功能：播放不同功能的语言提示 门铃功能：机械开关控制门铃响 阿里云服务器接入：连接阿里云服务器，可以上报设备信息，也可以通过服务器端无线控制，如修改密码、恢复出厂设置、调节音量大小、远程开门等
基于Arduino的循迹小车项目设计与代码
最新发布
07-19
一. 硬件需求： Arduino Uno 或 Nano L298N 电机驱动模块 直流电机与车轮 红外循迹传感器模块 电源（如电池组） 小车底盘 二. 硬件连接： 1.电机驱动连接： 将电机1的两根线连接到L298N的OUT1和OUT2。 将电机2的两根线连接到L298N的OUT3和OUT4。 将L298N的IN1、IN2、IN3和IN4分别连接到Arduino的数字引脚（如：IN1 -> D8, IN2 -> D9, IN3 -> D10, IN4 -> D11）。 将L298N的ENA和ENB分别连接到Arduino的数字引脚（如：ENA -> D5, ENB -> D6，作为PWM控制）。 2.红外循迹传感器连接： 将传感器模块的VCC和GND连接到Arduino的5V和GND。 将传感器模块的输出引脚分别连接到Arduino的模拟或数字引脚（如：传感器1的OUT -> A0，传感器2的OUT -> A1）。
【故障诊断】基于矮猫鼬优化算法DMOA优化长短记忆网络LSTM实现故障诊断附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
【故障诊断】基于金枪鱼优化算法TSO优化长短记忆网络LSTM实现故障诊断附matlab代码.rar
07-19
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
css样式的三种定义方式
04-04
1.内联样式：在HTML标签中使用style属性定义样式。...在style.css文件中定义样式： div { color: red; } 在HTML头部使用引入样式表： <link rel="stylesheet" href="style.css"> <div>Hello World! </body>

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值