表现形式CSS

CSS(Cascading StyleSheets的缩写),翻译为“层叠样式表”或者“级联样式表”,简称样式表

Cascading StyleSheets 的首字母缩写,意思是层叠样式表。有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容表现形式完全交给CSS,html文档变得更加简洁

用来给HTML网页来设置外观或者样式HTML网页中的文字的大小、颜色、字体,网页的背景颜色、背景图片

CSS的3种书写方式:

1、行内式(内联式):

CSS代码书写在HTML标签style__属性中;style是一个通用属性,每一个标签里面都拥有这个属性!

<div style="width:100px; height:100px;background:red ">......</div>

 

2、嵌入式:

-   将CSS代码嵌入到HTML文件中,嵌入式是通过HTML中的_style标签_将CSS代码嵌入到HTML网页中!

<style type="text/css">
div{ width:100px; height:100px; background:red }
......</style>`

3、外链式:

外链式是指单独写一个以.css为扩展名的文件,然后在head标签中使用link标签,将这个css文件链接到html文件中

注意:css文件不能单独的运行,它必须要依赖于HTML文件!

书写方式

写法

特点

行内式

<p style=“color:red”>一段文字</p>

样式过多,会造成代码重复度高

嵌入式

<head>

     <style>

       p{color:red}

   </style>

</head>

多网页,同样的代码设置重复

外链式

<head>

<link href=“./css/test.css” >

</head>

HTML和CSS结构分离,便于查找和管理

 

 

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/474057.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

LeetCode 第 206 场周赛(733/4491,前16.3%)

文章目录1. 比赛结果2. 题目1. LeetCode 5511. 二进制矩阵中的特殊位置 easy2. LeetCode 5512. 统计不开心的朋友 medium3. LeetCode 5513. 连接所有点的最小费用 medium4. LeetCode 5514. 检查字符串是否可以通过排序子字符串得到另一个字符串 hard1. 比赛结果 做出来3题。继…

lightoj 1026 无向图 求桥

题目链接&#xff1a;http://lightoj.com/volume_showproblem.php?problem1026 #include<cstdio> #include<cstring> #include<cmath> #include<iostream> #include<algorithm> #include<queue> #include<vector> using namespace …

python基础知识点小结(2021/2/9)

python基础知识点小结(2021/2/9)持续更新中~~ 入门小知识 cmd 在cmd上进行python&#xff0c;直接输入 python\quad pythonpython退出cmd输入 exit()\quad exit()exit()到指定文件夹上运行python文件 python路径文件名.py\quad python 路径文件名.pypython路径文件名.py pyt…

CSS_属性入门

width设置元素(标签)的宽度&#xff0c;如&#xff1a;width:100px; height设置元素(标签)的高度&#xff0c;如&#xff1a;height:200px; background设置元素背景色或者背景图片&#xff0c;如&#xff1a;background:gold; 设置元素背景色为金色 画图演示 边框内边距,外边…

03.结构化机器学习项目 W1.机器学习策略(1)

文章目录1. 机器学习策略2. 正交化 Orthogonalization3. 单一数字评估指标4. 满足和优化指标5. 训练/开发/测试集划分6. 开发集和测试集的大小7. 什么时候该改变开发/测试集和指标8. 人类的表现水准9. 可避免偏差10. 理解人的表现11. 超过人的表现12. 改善你的模型的表现测试题…

CSS—常用选择器

选择器是指通过一定的语法规则选取到对应的HTML标记&#xff0c;然后给这个对应的HTML标记设置样式 1.标签选择器 写法:标签名{属性:值;属性:值} 标签选择器影响范围大&#xff0c;一般用来做一些通用设置&#xff0c;或用在层级选择器中。 举例&#xff1a; div{color:red}…

Educational Codeforces Round 104 (Rated for Div. 2)A~E解题报告

Educational Codeforces Round 104 (Rated for Div. 2) A. Arena \quad原题链接 http://codeforces.com/contest/1487/problem/A \quad解题思路 首先&#xff0c;我们看战斗次数是无限的&#xff0c;任意非最小值的英雄都有赢得次数&#xff0c;既然有场次可以赢&#xff0…

LeetCode 1130. 叶值的最小代价生成树(区间DP/单调栈贪心)

文章目录1. 题目2. 解题2.1 DP2.2 单调栈贪心1. 题目 给你一个正整数数组 arr&#xff0c;考虑所有满足以下条件的二叉树&#xff1a; 每个节点都有 0 个或是 2 个子节点。数组 arr 中的值与树的中序遍历中每个叶节点的值一一对应。&#xff08;知识回顾&#xff1a;如果一个…

CSS属性提升

CSS样式 属性提高 text-align设置文字水平对齐方式&#xff0c;如text-align:center 设置文字水平居中 text-indent设置文字首行缩进&#xff0c;如&#xff1a;text-indent:24px; 设置文字首行缩进24px font-style设置字体是否倾斜&#xff0c;如&#xff1a;font-style:no…

03.结构化机器学习项目 W2.机器学习策略(2)

文章目录1. 进行误差分析2. 清除标注错误的数据3. 快速搭建你的第一个系统&#xff0c;并进行迭代4. 使用来自不同分布的数据&#xff0c;进行训练和测试5. 数据分布不匹配时&#xff0c;偏差与方差的分析6. 定位数据不匹配问题7. 迁移学习 Transfer learning8. 多任务学习 Mul…

属性和索引器的使用

索引器允许您按照处理数组的方式索引类、结构或接口。参数相当于中介。 http://msdn.microsoft.com/zh-cn/library/2549tw02(vvs.80).aspx 转载于:https://www.cnblogs.com/iammackong/p/3268187.html

列表与表单

有序标签orderlist - 基本用法 - -<ol> - <li>列表内容</li> - <li>列表内容</li> - ..... - </ol> - 快速构建表格的快捷键 ol>(li>a)*4 无序标签 unorderlist -->经常使用 -<ul> …

Codeforces Round #702 (Div. 3)解题报告

Codeforces Round #702 (Div. 3) 全部题解 读错题意&#xff0c;写了半天真是心态爆炸&#xff0c;总的来看这次题目不难的。 A. Dense Array http://codeforces.com/contest/1490/problem/A 解题思路 相邻的数字必然是倘若不满足的话是需要插入数据的&#xff0c;那么我们…

LeetCode 930. 和相同的二元子数组(哈希+前缀和)

文章目录1. 题目2. 解题1. 题目 在由若干 0 和 1 组成的数组 A 中&#xff0c;有多少个和为 S 的非空子数组。 示例&#xff1a; 输入&#xff1a;A [1,0,1,0,1], S 2 输出&#xff1a;4 解释&#xff1a; 如下面黑体所示&#xff0c;有 4 个满足题目要求的子数组&#xff…

poj 3469(网络流模版)

题目链接&#xff1a;http://poj.org/problem?id3469 思路&#xff1a;终于把网络流的模版测试好了&#xff0c;在Dinic和Sap之间还是选择了Sap,事实证明Sap确实比Dinic效率高&#xff0c;在此贴出自己的网络流模版&#xff1a; 1 #include<iostream>2 #include<cstd…

盒子的真实宽高

盒子的宽 两边border 两边padding 盒子的高度 上下border 上下padding

leetcode第 46 场双周赛

题目A https://leetcode-cn.com/problems/longest-nice-substring/ 因为 length≤100length \leq 100length≤100&#xff0c;我们直接就可以遍历子串然后更新答案。 class Solution { public:bool Check(string s){unordered_set<int> m;for (auto u : s)m.insert(u);…

margin相关技巧

1、设置元素水平居中; margin:0 auto; margin负值让元素位移及合并边框 外边距合并&#xff1a; 外边距合并指的是:当两个垂直外边距相遇时,他们将行程一个外边距.合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者:一个格子距下30px,下面的格子距上100px,边距…

04.卷积神经网络 W1.卷积神经网络

文章目录1. 计算机视觉2. 边缘检测示例3. 更多边缘检测4. Padding5. 卷积步长6. 三维卷积7. 单层卷积网络8. 简单卷积网络示例9. 池化层10. 卷积神经网络示例11. 为什么使用卷积&#xff1f;作业参考&#xff1a; 吴恩达视频课 深度学习笔记 1. 计算机视觉 举例&#xff1a;图…

httpClient学习笔记1

客服端以post请求输入xml的输入流&#xff0c;来到服务器端&#xff0c;服务器端接到输入流&#xff0c;进行处理&#xff0c;处理完毕后&#xff0c;返回xml信息的返回输出流&#xff0c;来告诉对方成功与否。 htppClient的使用至少需要commons-httpclient-3.1.jar&#xff0c…