08-CSS基础-体验CSS

作者: 极客江南 | 来源:发表于2016-10-04 19:29 被阅读3569次

CSS起源

  • web的衰落:

  • 在web早期(1990-1993),html是一个很局限的语言。几乎完全由用于描述段落,超链接,列表和标题的结构化元素组成。随着万维网的出现(用户交互体验的加强),对html的要求越来越大,人们迫切需要html增加新的元素,去完成一个特定的功能

  • 迫于压力,html开始出现<font>,<i> , <s>等标签。但是html是一种描述结构的语言,也开始描述外在表现了。几年之后这种随便的做法暴露出严重的问题:1:由于html既写结构又写样式,导致页面缺乏结构性,降低了网页的可访问性。2:页面维护越来越困难

  • 大救星Css

  • 当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;其中:不能省略, 分号大多数情况下也不能省略(当有多个属性时, 最后一个可以省略)

  • CSS怎么学?

  • CSS的学习一共分为两大部分, 一个是CSS的属性, 另一个是CSS选择器. 也就是说着两部分学完CSS就没有别的东西了


学习交流方式:
1.微信公众账号搜索: 李南江(配套视频,代码,资料各种福利获取)
2.加入前端学习交流群:
302942894 / 289964053 / 11550038

相关文章

  • 08-CSS基础-体验CSS

    CSS起源 web的衰落: 在web早期(1990-1993),html是一个很局限的语言。几乎完全由用于描述段落...

  • 08-CSS基础-体验CSS

    CSS起源 web的衰落: 在web早期(1990-1993),html是一个很局限的语言。几乎完全由用于描述段落...

  • 08-CSS基础-定位流

    position定位属性 取值static: 静态定位 默认relative: 相对定位 相对自己原来...

  • 08-css动画

    css3新增选择器 1、css3圆角设置某一个角的圆角,比如设计左上角的圆角。 2、rgba(新的颜色值表示法)1...

  • 08-CSS浮动流

    网页布局方式 什么是网页的布局方式?网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的 标准流(文档流/...

  • CSS基础--体验CSS

    CSS起源 web的衰落: 在web早期(1990-1993),html是一个很局限的语言。几乎完全由用于描述段落...

  • CSS学习资源

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • 【2016年特别福利】史上最全CSS学习资料大全

    基础篇 CSS 最核心的几个概念 CSS 简写指南 CSS样式基础 CSS样式设置 CSS布局模型 CSS文字排版...

  • Python学习之旅-08-CSS选择器

    1.什么是Xpath 简单说,xpath就是选择XML文件中节点的方法。 在 XPath 中,有七种类型的节点:元...

  • react学习路线图

    基础 HTML学习 HTML 基础学习 HTML 基础CSS学习 CSS 基础在上一步练习的基础上为页面添加样式使...

网友评论

  • bb72be99b4e3:江哥,测试题在哪里啊?
  • 36a9c858d9f1:江哥,最喜欢你的HTML教程系列了。可是找不到你教学的课堂资料,和作业呢。比如说这节课的测试题。我好焦灼啊,不知道你还在简书吗?能告诉大家这些资料在哪可以找到吗?拜托了.........:pray: :pray: :pray:
  • 随风远颺:江哥,测试题在哪里?
  • 夜是诗人:论坛的被和谐了,还好有简书,谢谢江哥,情怀可敬👍
    极客江南:@夜是诗人 http://study.163.com/course/courseMain.htm?courseId=1003864040
    极客江南:@夜是诗人 http://study.163.com/course/courseMain.htm?courseId=1003864040
  • 767a9627f389:江哥最棒,课程讲的很清晰,太帅了。
  • e1a53d75381f:谢谢你文章!
  • 新晋小牛牛:简单明了

本文标题:08-CSS基础-体验CSS

本文链接:https://www.haomeiwen.com/subject/uozlyttx.html