CSS概要

作者: June_Done | 来源:发表于2018-03-22 09:48 被阅读0次

从头开始巩固CSS,跟着这位博主学习学习,总结的真不错,学习之后简单做个笔记吧 ^ _ ^(原文注:http://www.cnblogs.com/wangfupeng1988/p/4276321.html

  • 学习CSS的三个突破点。

1.浏览器如何加载和解析CSS——CSS的5个来源;
2.CSS和html如何结合起来——选择器;
3.CSS能控制那些显示方式——盒子模式、浮动、定位、背景、字体等;


  • 样式来源
    css之所以有“层叠”的概念,是因为有多个样式来源,通常css的样式来源有5个,开发人员只能接触到后面3个。


    image

1. 浏览器默认样式表
浏览器自带的默认的样式,不同浏览器的默认样式有些地方是不一样。在写css时,都会首先设置 * {margin:0; padding:0;},解决浏览器兼容性问题。
2.用户样式表
浏览器自带的样式( 用户设置了字体和字号之后,它们会覆盖掉浏览器默认的样式。)
3.<link>引用的css文件
4.<style>中编写的样式代码
5.<a style=’ ’>中编写的样式代码

  • 浏览器默认样式表:浏览器加载了html之后只为一件东西——dom树,浏览器把html变为dom树结构,就完成了对html的结构化。至于后来对视图的渲染,p是block、br换行,那是整合了css之后的事情。而浏览器整合css又是另一个路线,和解析html是分开的。这里的“css”就包含了浏览器默认样式。
    (所以说,浏览器将载入的html变为dom树,但是此时没有任何显示样式。所以显示的样式,都是css定义的,浏览器只会通过css来渲染视图样式。一直还以为是浏览器内核自带的呢 @_@!!)
  • 层叠规则:后者覆盖前者(增加!important,则不会覆盖,如下)
span{
    color: blue !important;
    font-weight:bolder;
}

相关文章

  • CSS概要

    从头开始巩固CSS,跟着这位博主学习学习,总结的真不错,学习之后简单做个笔记吧 ^ _ ^(原文注:http:/...

  • css概要

    本系列文章主要是学习 《css世界》的记录与总结 知识点主要 css2.1,不涉及css3 css2.1 开始由I...

  • 03-CSS3

    CSS教程 01-CSS入门基础 课程概要 一、CSS介绍 CSS概述 CSS指层叠样式表 CSS样式表极大地提高...

  • CSS3中新的布局方式flex box

    下面是文章的翻译,概要,来自这篇文章。 https://css-tricks.com/snippets/css/a...

  • 仿禅意花园

    前提条件 Flex 布局 CSS 常用属性概览 概要 类型:实践难度:中等 任务描述 了解下 CSS 禅意花园。做...

  • CSS常见分层方法

    概要 为什么要分层? SMACSS BEM SUIT ACSS ITCSS 参考的网站 CSS, Sass, SC...

  • Web 前端 与 Unity 通信

    概要 UI 部分,由 HTML+CSS 实现 图形绘制部分,由 Unity 实现 【通信方向:Web 应用 => ...

  • 电子商务网站开发与建设

    概要 64学时 3.5学分 章节安排 电子商务网站概况 HTML5+CSS3 JavaScript Node 电子...

  • 第四讲 CSS选择器

    课程概要 这一讲,我们会学习CSS中几种常用的选择器。首先,什么是css选择器?像我们之前的写法,都是直接给标签名...

  • 仿手机版的今日头条

    前提条件 Flex 布局 CSS 常用属性概览 会用 Chrome 模拟手机页面 概要 类型:实践难度:简单 任务...

网友评论

    本文标题:CSS概要

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