CSS、Sass、Scss

栏目: CSS · 发布时间: 5年前

1、描述

  • CSS 指层叠样式表 (Cascading Style Sheets)
  • Sass (Syntactically Awesome StyleSheets), Sass 是一款强化 CSS 的辅助工具,是对 CSS 的扩展,它在 CSS 语法的基础上增加了 变量 (variables)、嵌套 (nested rules)、混合 (mixins)、继承(extend)、导入 (inline imports) 等高级功能,这些拓展令 CSS 更加强大与优雅。使用 Sass 以及 Sass 的样式库(如 Compass)有助于更好地组织管理样式文件,以及更高效地开发项目。
  • SCSS (Sassy CSS),SCSS 是 Sass 3 引入新的语法,其语法完全兼容 CSS3,并且继承了 Sass 的强大功能。也就是说,任何标准的 CSS3 样式表都是具有相同语义的有效的 SCSS 文件。SCSS 需要使用分号和花括号而不是换行和缩进。SCSS 对空白符号不敏感,其实就和css3语法一样。

2、css

主要知识点:

  • 1、CSS的书写方式
行内式:将CSS代码书写在HTML标签的style属性中。style是一个通用属性,每一个标签里面都拥有这个属性,规则:
                                                        <标签名  style=”属性:值;属性:值;”></标签名>
    嵌入式:将CSS代码嵌入到HTML文件中,嵌入式是通过HTML中的<style>标签将CSS代码嵌入到HTML网页中,规则:
                                                                    <style  type=”text/css”>
                                                                              /*书写CSS代码*/
                                                                              选择器{属性:值;属性:值;}
                                                                    </style>
   外链式:写以.css扩展名的文件,然后在<head></head>标签中使用<link />标签,将css文件链接到html文件中,规则:
                                                             <标签名  style=”属性:值;属性:值;”></标签名>
  • 2、选择器
元素选择器、id选择器、类选择器、
      属性选择器(如为带有 title 属性的所有元素设置样式 [title] {somestyles} )、
      属性和值选择器(如为带有 title="W3School" 的所有元素设置样式 [title=W3School] {somestyles} )、
      派生选择器(通过依据元素在其位置的上下文关系来定义样式),有三种
          后代选择器:    空格隔开;
          子元素选择器:  >隔开,只能选择作为某元素子元素的元素;
          相邻兄弟选择器:选择紧接在一元素后的元素,且二者有相同父元素,
                         如设置紧接 h1 后出现的 p 的字体颜色:h1 + p {color: red;};
          注1:.a,.b该逗号表示存在其中一个类的元素就设置,多元选择;
          注1:.a.b没有空格表示同时拥有两个类的元素。
  • 3、盒子模型
所有HTML元素可以看作盒子,CSS盒模型本质上是一个盒子,封装周围的HTML元素,
       它包括:margin(外边距)、border(边框)、padding(内边距)、content(内容)
       盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
  • 4、定位
  • 5、布局

3、sass

4、scss


以上所述就是小编给大家介绍的《CSS、Sass、Scss》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

失业的程序员

失业的程序员

沈逸 / 2014-5-1 / 39.00元

这是一个程序员从失业到自行创业的奋斗历程,虽然囧事连连、过程曲折,却充满了趣味。本书以作者的真实创业经历为主线,文字幽默诙谐,情节生动真实,包括了招聘、团队管理和用户公关,以及技术架构设计、核心代码编写、商务谈判、项目运作等场景经验。 从初期的创业伙伴、领路人,到商业竞争对手,各种复杂的关系在各个关键时刻却都发生了意想不到的逆转。在历经千辛万苦,眼看快要成功时,主人公却几乎再次失业。 ......一起来看看 《失业的程序员》 这本书的介绍吧!

html转js在线工具
html转js在线工具

html转js在线工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具