CSS基础【1】:体验CSS

CSS起源

  • web的衰落:在 web 早期(1990-1993),html是一个很局限的语言。几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成。随着万维网的出现(用户交互体验的加强),对 html 的要求越来越大,人们迫切需要 html 增加新的元素,去完成一个特定的功能
  • 迫于压力,html 开始出现<font>,<i> , <s>等标签。但是 html 是一种描述结构的语言,也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题:1:由于 html 既写结构又写样式,导致页面缺乏结构性,降低了网页的可访问性。2:页面维护越来越困难
  • 当 html 中存斥着的表现标记问题,W3C 并没有忽视。在1995年,W3C 开始发布一种正在进行的计划(work-in-prrgress) 称之为CSS
  • 与 html 相比,CSS支持更丰富的文档外观,CSS可以为任何元素的文本和背景设置颜色;允许在任何元素外围设置边框;允许改变文本的大小,装饰(如下划线),间隔,甚至可以确定是否显示文本。

体验CSS

  • 用HTML完成

  • 哪个标签有哪个属性难以记忆

  • 需求变更影响较大(例如像修改成功法则以下的文字颜色需要修改 4 个地方)

    <h1 align="center"><font face="微软雅黑" color="red">成功法则</font>
    </h1>
    <p align="center"><font face="微软雅黑" color="blue" size="5">迟到毁一生</font>
    </p>
    <p align="center"><font face="微软雅黑" color="blue" size="5">早退穷三代</font>
    </p>
    <p align="center"><font face="微软雅黑" color="blue" size="5">按时上下班</font>
    </p>
    <p align="center"><font face="微软雅黑" color="blue" size="5">必成高富帅</font>
    </p>
  • 用HTML+CSS完成

  • 不用记忆哪些属性属于哪个标签

  • 当需求变更时我们不需要修改大量的代码就可以满足需求

  • 在前端开发中CSS只有一个作用,就是用来修改样式

    <style type="text/css">h1 {text-align: center;color: red;font-family: "微软雅黑";}p {text-align: center;color: blue;font-size: 20px;}
    </style><h1>成功法则</h1>
    <p>迟到毁一生</p>
    <p>早退穷三代</p>
    <p>按时上下班</p>
    <p>必成高富帅</p>

CSS格式

  • 格式

    <style type="text/css">标签名称 {属性名称: 属性对应的值;...}
    </style>
  • 注意点:

    • style 标签必须写在 head 标签的开始标签和结束标签之间(也就是必须和 title 标签是兄弟关系)
    • style 标签中的 type 属性其实可以不用写,默认就是type="text/css"
    • 设置样式时必须按照固定的格式来设置:key: value;其中:不能省略,分号大多数情况下也不能省略(当有多个属性时,最后一个可以省略)

转载于:https://www.cnblogs.com/qiuxirufeng/p/10158854.html

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

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

相关文章

JS中的兼容问题总结

今天总结总结在JS里面遇到的兼容性问题 1.获取滚动距离的兼容性问题: document.documentElement.scrollTop || document.body.scrollTop &#xff08;兼容IE&#xff09; 2.获取非行间样式 getComputedStyle(元素,false)[attr] || 元素.currentStyle[attr] 3.索引…

linux网络唤醒,如何在Ubuntu Server 18.04中启用网络唤醒(WOL)

网络唤醒(WOL)是一种行业标准协议&#xff0c;用于远程唤醒服务器。如果您管理着很多设备&#xff0c;因此不需要为了唤醒服务器而去数据中心。启用允许您远程执行此操作的功能&#xff0c;这样您可以更高效地工作。Ubuntu 系统默认没有启用WOL&#xff0c;所以我们要设置它。我…

php 分页处理

1、利用bootstrap的css框架的前提下&#xff0c;封装个Php的分页框架 命名为test.php&#xff0c;具体代码如下 1 <?php2 class Pagination3 {4 private $cfg;5 private $content ; //分页导行条内容部份6 7 public function __constr…

ActiveMQ –经纪人网络解释

目的 这个由7部分组成的博客系列将分享有关如何创建ActiveMQ代理网络以实现高可用性和可伸缩性的信息。 为什么要建立经纪人网络&#xff1f; ActiveMQ消息代理是企业中消息传递基础结构的核心组件。 它需要高度可用并且可以动态伸缩&#xff0c;以促进具有不同容量需求的动态…

13 创建高级联结

13.1 使用表别名 在之前的例子中&#xff0c;我们用的都是用的列别名&#xff0c;SQL还允许给表名起别名。 13.2 使用不同类型的联结 我们在上一章使用的只是称为内部联结或等值联结&#xff08; equijoin&#xff09; 的简单联结&#xff0c;现在来看3种其他联结&#xff0c;…

JS中undefined和null的区别,以及出现原因

区别&#xff1a;null是一个表示无的对象&#xff0c;转换为数值为0&#xff1b; undefined表示一个无的原始值&#xff0c;转化为数值为NAN&#xff08;与任何数字相加也为NAN&#xff09; undefined出现原因&#xff1a;(口诀&#xff1a;一变量二函数一对象) 1.变量被声明了…

判断一个数是不是质数

number int(input("请输入数字&#xff1a;"))count 2while count < number -1: if number % count 0: #质数是除了1和它本身能除尽。将这个数从2开始除&#xff0c;除到number-1&#xff0c;如果有除尽的就不是质数&#xff0c;如果没有就是质数。…

Java 8:功能接口示例

为了支持Java 8中的lambda表达式&#xff0c;他们引入了Functional Interfaces。 具有单一抽象方法的接口可以称为功能接口。 Runnable&#xff0c;Comparator&#xff0c;Cloneable是功能接口的一些示例。 我们可以使用Lambda表达式实现这些功能接口。 例如&#xff1a; Th…

正则表达式验证问题(用户名、密码、email、身份证

实现的代码如下&#xff1a; 1 <html>2 <head>3 <meta charset"UTF-8">4 </head>5 <body>6 <p>用户名正则表达式 &#xff0c;4到16位&#xff08;字母&#xff0c;数字&#xff0c;下滑线&#xff0c;减号&#xff09;</p&g…

MySQL协议分析(1)

MySQL协议分析 此阶段的协议分析是在未压缩未加密情况下的协议分析 思路&#xff1a; 结合Oracle官网和自己用wireshark抓的网络数据包进行协议分析 官网说明 mysql包共分为4段&#xff0c;格式如下&#xff1a; 第一段&#xff1a;payload&#xff08;通常是执行的SQL语句&…

linux raw socket 例子,raw socket编程例子

raw socket编程例子内容安排:1.原始套接字介绍1.1 原始套接字工作原理与规则1.2 简单应用2 FTP密码窃取器实现(简单的rootkit)2.1 设计思路2.2 实现2.3 不足与改进之处开始,嗯,喝口茶水先...........1.原始套接字(raw socket)1.1 原始套接字工作原理与规则原始套接字是一个特殊…

谨慎使用Hibernate中的本机SQL

我真的很喜欢Hibernate&#xff0c;但我也不知道同时具备强大功能和欺骗性的工具。 我可以写一本书&#xff0c;讲述仅与Hibernate相关的生产和货物崇拜编程中的意外情况。 与用户相比&#xff0c;与工具相比&#xff0c;这更多的是问题&#xff0c;但请不要让它过于保修。 所…

js 编辑数组

删除数组第一个元素使用var length arr.shift(); 删除arr的第一个元素后, 返回值是删除后的数组长度 删除数组最后一个元素使用var length arr.pop(); 删除arr的最后一个元素后, 返回值是删除后数组的长度 在数组开头添加元素使用var length arr.unshif…

tensorboard运行

终端中进入存放even文件的文件夹的上一步&#xff0c;然后&#xff0c;输入tensorboard --logdir存放even文件的文件夹 转载于:https://www.cnblogs.com/wzwi/p/10931397.html

DevExpress WPF v18.2新版亮点(五)

买 DevExpress Universal Subscription 免费赠 万元汉化资源包1套&#xff01; 限量15套&#xff01;先到先得&#xff0c;送完即止&#xff01;立即抢购>> 行业领先的.NET界面控件2018年第二次重大更新——DevExpress v18.2日前正式发布&#xff0c;本站将以连载的形式…

JavaFX技巧3:使用回调接口

作为UI框架开发人员&#xff0c;提供自定义控件外观和行为的方法是我工作的一部分。 在许多情况下&#xff0c;这是通过允许框架用户在控件上注册工厂来完成的。 过去&#xff0c;我会为此创建一个工厂接口&#xff0c;并在框架内提供一个或多个默认实现。 这些事情在JavaFX中…

爱课程c语言函数2的作业答案,C语言程序设计

Q&#xff1a;本门课程面向的授课群体是什么&#xff1f;没有任何基础能学习本课程吗&#xff1f;A&#xff1a;本门课程的基本内容是面向零基础的学生。进阶内容是面向有一定编程基础或者大学计算机基础的学生&#xff0c;但是进阶内容不做为课程考试内容。Q&#xff1a;本课程…

旧文章搬运完毕

花了一天时间&#xff0c;把原来百度空间里200多篇文章里的70篇重要文章&#xff08;除去扯淡的&#xff09;搬了出来。 希望这些资料对初学者能够有点用&#xff0c;以后有时间还是继续多写一些有用的内容出来。转载于:https://www.cnblogs.com/achillis/p/10183787.html

voinc vue实现级联选择

需求&#xff1a; vonic中实现级联选择 <!DOCTYPE html> <html> <head><title>下拉框</title><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1"><link rel…

爬虫521错误(又是一次和可爱的前端vs的故事)

起因: 今天突然想重构一下代理池,并且想扩充一下代理,所以就想着爬点代理IP,然后就有了下面的故事 一上来先进行了一顿操作: def get_xxdaili(url):headers {User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.119 Safar…