我们想做这样一个样式,应该怎么做?

分析:

有一个标题(h1),还有一些段落(p)

标题是居中的,段落也是居中的,所以我们可以设置h标签和p标签居的align属性等于center来实现

标题和段落都有颜色,都有字体,都有大小

所以需要给文字包裹一个font标签,然后通过font标签来设置样式和字体以及大小

  1. 需要记忆哪些标签有哪些属性,如果该标签没有这个属性,那么设置了也没用
  2. 当需求变更时我们需要修改大量的代码才能满足现有需求
  3. HTML只有一个作用就是用来添加语义

这样写代码比较繁琐,所以企业开发中都是交给css来做的

2.通过css来修改样式有什么好处?

  1. 不用记忆哪些属性属于哪些标签
  2. 当需求变更时我们不需要修改大量的代码就可以满足需求
  3. 在前端开发中css只有一个作用就是用来修改样式

如何按照css来修改代码?

课时59.体验css(理解)的更多相关文章

  1. CSS理解之padding--非原创

    因为在慕课网观看了张大神的视频,学习到了一点东西,向和大家分享.视频地址 代码如下: <!DOCTYPE html> <html lang="zh-CN"> ...

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

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

  3. [CSS]理解line-height

    字面意思 "行高"顾名思意指一行文字的高度.具体来说是指两行文字间基线之间的距离.基线实在英文字母中用到的一个概念,我们刚学英语的时使用的那个英语本子每行有四条线,其中底部第二条线 ...

  4. 图解 CSS: 理解样式表的逻辑(转载)

    原文:http://www.cnblogs.com/del/archive/2009/02/01/1382141.html 样式表可以是外部的.内联的或嵌入的; 链接外部样式文件一般是:<lin ...

  5. HTML+CSS理解

    HTML+CSS1.对WEB标准以及W3C的理解与认识标签闭合.标签小写.不乱嵌套.提高搜索机器人搜索几率.使用外 链css和js脚本.结构行为表现的分离.文件下载与页面速度更快.内容能被更多的用户所 ...

  6. css -理解盒模型

    标准模式: 总宽度/高度=width/height+padding+border+margin 怪异模式(quirks 模式): 总宽度/高度=width/height + margin = 内容区宽 ...

  7. 59.纯 CSS 创作彩虹背景文字

    原文地址:https://segmentfault.com/a/1190000015352436 修改后地址:https://scrimba.com/c/cqK3LaTQ 感想: 又一次见识到CSS的 ...

  8. CSS初步理解

    近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...

  9. CSS和SVG中的剪切——clip-path属性和<clipPath>元素

    剪切是什么 剪切是一个图形化操作,你可以部分或者完全隐藏一个元素.被剪切的元素可以是一个容器也可以是一个图像元素.元素的哪些部分显示或隐藏是由剪切的路径来决定的. 剪切路径定义了一个区域,在这个区域内 ...

随机推荐

  1. APP测试点集合

    一.功能性测试: (1)根据产品需求文档编写测试用例 (2)软件设计文档编写用例 二.兼容性适配性测试: (1)Android.iOS版本的兼容性 (2)手机分辨率兼容性 (3)网络的兼容性:2G/3 ...

  2. 【Linux】Linux系统启动过程

    1.Linux系统的启动过程并不是大家想象中的那么复杂,其过程可以分为5个阶段: 内核的引导. 运行 init. 系统初始化. 建立终端 . 用户登录系统. 1.Linux系统的启动过程并不是大家想象 ...

  3. avalon实现日期联动

    前言 上一篇我们说了下Avalon的一些概念,以及一些主要特性,至于Avalon的一些基础教程,正美老师已经做了非常全面的讲述,参见:http://www.cnblogs.com/rubylouvre ...

  4. artDialog组件应用学习(一)

    个人觉得artDialog是一组很不错的对话框组件.写的是artDialog_v6应用. 官方称其兼容性测试通过:IE6~IE11.Chrome.Firefox.Safari.Opera. 官网:ht ...

  5. 移动H5页面,Android手机下,input获取焦点弹出系统虚拟键盘时,挡住input解决方法

    最近在写移动端页面的时候,遇到一个问题,在Android手机下,虚拟键盘会将input框遮挡住,具体情况如下图所示: 正常页面显示  IOS端显示情况 Android端显示情况 解决方式: <t ...

  6. final关键字介绍

    许多程序设计语言都有自己的办法告诉编译器某个数据是“常数”.常数主要应用于下述两个方面: (1) 编译期常数,它永远不会改变 (2) 在运行期初始化的一个值,我们不希望它发生变化 对于编译期的常数,编 ...

  7. Android滑动删除功能

    今天学习了新的功能那就是滑动删除数据.先看一下效果 我想这个效果大家都很熟悉吧.是不是在qq上看见过这个效果.俗话说好记性不如赖笔头,为了我的以后,为了跟我一样自学的小伙伴们,我把我的代码粘贴在下面. ...

  8. SQL Server中的高可用性----复制

    在本系列文章的前两篇对高可用性的意义和单实例下的高可用性做了阐述.但是当随着数据量的增长,以及对RTO和RPO要求的严格,单实例已经无法满足HA/DR方面的要求,因此需要做多实例的高可用性.本文着重对 ...

  9. 一个简单的 HTML 文档,带有最基本的必需的元素

    <html> <head> <title>文档的标题</title> </head> <body> 文档的内容... ... & ...

  10. python3的学习经验

    网上资料非常多,颇有些“乱花渐欲迷人眼”的意味,个人看了不少,拖之前从事前端的福,发现廖雪峰大神的网站里有.学了2天之后发觉获益良多,网址:https://www.liaoxuefeng.com/wi ...