一、通过标签来修改标签有哪些缺点：

（1）需要记忆那些标签有哪些属性

（2）若该标签没有这个属性，则修改失败

（3）需求变更，需要修改大量的代码

（4）HTML标签及用于添加语义，与我们的定义不相符

因此我们需要CSS来解决上面的问题，CSS的优点在于：

（1）不用记忆哪些属性属于哪些标签

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

（3）在前端开发中CSS只有一个作用，就是用来修改样式。

我们先举一个修改标签属性的例子作为参考例子。


<h1 align="center">

    <font face="微软雅黑" color="#7fffd4">成功法则</font>

</h1>

<p align="center">

    <font face="微软雅黑" color="#dc143c" size="10">能吃</font>

</p>

<p align="center">

    <font>能喝</font>

</p>

<p align="center">

    能睡

</p>

接下来我们使用CSS来演示一下上面的改进方法：

首先，我们的CSS标签是放在head标签中。

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style type="text/css">

        h1{

            text-align: center;

            color: crimson;

            font-family:"微软雅黑";

​

        }

        p{

            text-align: center;

            color:red;

            font-size:20px

​

        }

</style>

</head>

我们利用style标签来实现，把h1和p标签里面的内容通过设置一系列的属性来实现样式的定义。

二、源码d59_exprience_CSS

地址：https://github.com/ruigege66/HTML_learning/blob/master/d59_exprience_CSS

2.CSDN：https://blog.csdn.net/weixin_44630050（心悦君兮君不知-睿）

3.简书：https://www.jianshu.com/u/a9169ca4f1c9（心悦君兮君不知dqr）

4.欢迎关注微信公众号：傅里叶变换，后台回复“礼包”获取Java大数据学习视频礼包。

HTML连载12-体验CSS的更多相关文章

  1. 2015年最佳的12个 CSS 开发工具推荐

    CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...

  2. CSS基础【1】：体验CSS

    CSS起源 web的衰落:在 web 早期(1990-1993),html是一个很局限的语言.几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成.随着万维网的出现(用户交互体验的加强),对 h ...

  3. 前端进阶（12） - css 的弱化与 js 的强化

    css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...

  4. 12个CSS高级技巧汇总

    1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...

  5. html学习第三天—— 第12章——css布局模型

    清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...

  6. 12 个CSS 高级技巧汇总[转载]

    使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...

  7. 第 12 章 CSS 入门

    学习要点: 1.使用 CSS 2.三种方式 3.层叠和继承 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化. 一．使用 ...

  8. 12个css高级技巧.html

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 12 个 CSS 高级技巧汇总

    下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...

  10. 好程序员web前端分享12个CSS高级技巧汇总

    好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...

随机推荐

  1. Cordova 返回键切换后台

    这里需要用到 cordova-plugin-backbutton 这个插件 1.安装插件,命令窗口输入(当前目录是你项目所在的目录) cordova plugin add cordova-plugin ...

  2. UnitOfWork

    数据访问层之UnitOfWork   接上文 项目架构开发:数据访问层之IQuery 本章我们继续IUnitOfWork的开发,从之前的IRepository接口中就可以看出,我们并没有处理单元事务, ...

  3. c语言学习笔记（3）——输入输出

    一.基本的输入和输出函数的用法 printf()  //屏幕输出 用法: (1)printf("字符串\n"); (2)printf("输出控制符", 输出参数 ...

  4. C# WPF 一直保持多个Topmost窗体的置顶顺序

    原文:C# WPF 一直保持多个Topmost窗体的置顶顺序 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/m0_37862405/article/ ...

  5. Oracle 一些实用的DBA语句

    --查询LOB的大小和所在表空间 SELECT A.TABLE_NAME, A.COLUMN_NAME, B.SEGMENT_NAME, B.SEGMENT_TYPE, B.TABLESPACE_NA ...

  6. ASP.NET Core 基础教程-约定 - ASP.NET Core 基础教程 - 简单教程，简单编程

    原文:ASP.NET Core 基础教程-约定 - ASP.NET Core 基础教程 - 简单教程,简单编程 ASP.NET Core 基础教程-约定 因为 ASP.NET Core 是可以跨平台的 ...

  7. RTB业务知识2-Open-RTB全景

    一个.前言 openrtb这是一套开源的竞价广告系统,来自IAB贡献,井. 有许多值太借鉴,提供sdk api接口文档介绍,整理了相关的资料.主要包含其生态图体系.业务流程和基本的对象模型和数据模型. ...

  8. 分析MySQL各项指标

    MySQL各项指标(因为这不是大多数搜索引擎的区别故意) INDEX(总指数):主要指标,不管是什么限制 ALTER TABLE `table_name` ADD INDEX index_name ( ...

  9. C#WPF 如何绘制几何图形 图示教程 绘制sin曲线 正弦 绘制2D坐标系 有图有代码

    原文:C#WPF 如何绘制几何图形 图示教程 绘制sin曲线 正弦 绘制2D坐标系 有图有代码 C#WPF 如何绘制几何图形? 怎么绘制坐标系?绘制sin曲线(正弦曲线)? 这离不开Path(Syst ...

  10. WPF使用MediaElement显示gif图片

    原文:WPF使用MediaElement显示gif图片 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/SANYUNI/article/details ...