HTML连载12-体验CSS
一、通过标签来修改标签有哪些缺点：
（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的更多相关文章
- 2015年最佳的12个 CSS 开发工具推荐
CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...
- CSS基础【1】：体验CSS
CSS起源 web的衰落:在 web 早期(1990-1993),html是一个很局限的语言.几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成.随着万维网的出现(用户交互体验的加强),对 h ...
- 前端进阶（12） - css 的弱化与 js 的强化
css 的弱化与 js 的强化 web 的三要素 html, css, js 在前端组件化的过程中,比如 react.vue 等组件化框架的运用,使 html 的弱化与 js 的强化 成为了一种趋势, ...
- 12个CSS高级技巧汇总
1.使用 :not() 在菜单上应用/取消应用边框 先给每一个菜单项添加边框 CSS Code复制内容到剪贴板 /* add border */ .nav li { border-right: 1px ...
- html学习第三天—— 第12章——css布局模型
清楚了CSS 盒模型的基本概念. 盒模型类型, 我们就可以深入探讨网页布局的基本模型了.布局模型与盒模型一样都是 CSS 最基本. 最核心的概念. 但布局模型是建立在盒模型基础之上,又不同于我们常说的 ...
- 12 个CSS 高级技巧汇总[转载]
使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使用SVG 优化显示文本 对纯CSS滑块使用 ma ...
- 第 12 章 CSS 入门
学习要点: 1.使用 CSS 2.三种方式 3.层叠和继承 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS(层叠样式表),它是用来对 HTML 文档外观的表现形式进行排版和格式化. 一．使用 ...
- 12个css高级技巧.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 12 个 CSS 高级技巧汇总
下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-child 选择项目 对图标使 ...
- 好程序员web前端分享12个CSS高级技巧汇总
好程序员web前端分享下面这些CSS高级技巧,一般人我可不告诉他哦. 使用 :not() 在菜单上应用/取消应用边框 给body添加行高 所有一切都垂直居中 逗号分隔的列表 使用负的 nth-chil ...
随机推荐
- String中substring方法内存泄漏问题
众所周知,JDK中以前String类中的substring方法存在内存泄漏问题,之所以说是以前,是因为JDK1.7及以后的版本已经修复了,我看都说JDK1.6的版本也存在这个问题,但是我本机上安装的1 ...
- C#步骤控件
C#开发step步骤条控件 现在很多的javascript控件,非常的不错,其中step就是一个,如下图所示: 那么如何用C#来实现一个step控件呢? 先定义一个StepEntity类来存储步骤 ...
- win10 uwp 使用 msbuild 命令行编译 UWP 程序
原文:win10 uwp 使用 msbuild 命令行编译 UWP 程序 版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 http:// ...
- Android中集成支付宝
手机的在线支付,被认为是2012年最看好的功能,我个人认为这也是移动互联网较传统互联网将会大放光彩的一个功能. 人人有手机,人人携带手机,花钱买东西,不再需要取钱付现,不再需要回家上网银,想买什么,扫 ...
- PHP中间uniqid在高并发重复问题
在公用事业最近项目生成token检查问题.首先考虑php中间uniqid()函数生成一个随机字符串,但因为该函数的良好似基于微秒的水平.在高并发的情况下,,也能够产生相同的值. 解1:uniqid(r ...
- 简单的讲Erlang一些运营商
Erlang 有几个运营商.对照.数学运算符.布尔运算符,旨在使这些类型的操作者的讨论,参考erlang文件,以样例说明. Erlang的比較运算符 写法例如以下: Expr1 op Expr2 1& ...
- 【转载】FusionSphere架构详解
FusionSphere底层使用Xen架构: 1.单台物理机上建立hypervisor系统. 2.将所有单个hypervisor系统整合起来管理使用. 安装CNA节点,所有的物理服务器都会先成为CNA ...
- H3C交换机配置ACL禁止vlan间互访
1.先把基础工作做好,就是配置VLAN,配置Trunk,确定10个VLAN和相应的端口都正确.假设10个VLAN的地址分别是192.168.10.X,192.168.20.X......192.168 ...
- WPF编游戏系列 之九 物品清单再优化
原文:WPF编游戏系列 之九 物品清单再优化 在"第三篇"和"第四篇"中通过用户控件和数据绑定功能对物品清单进行一些优化减少了部分C#代码,但感觉 ...
- MEF 插件式开发 - 小试牛刀
原文:MEF 插件式开发 - 小试牛刀 目录 MEF 简介 实践出真知 面向接口编程 控制反转(IOC) 构建入门级 MEF 相关参考 MEF 简介 Managed Extensibility Fra ...