CSS、Sass、Scss

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

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》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

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

Pro CSS and HTML Design Patterns

Pro CSS and HTML Design Patterns

Michael Bowers / Apress / April 23, 2007 / $44.99

Design patterns have been used with great success in software programming. They improve productivity, creativity, and efficiency in web design and development, and they reduce code bloat and complexit......一起来看看 《Pro CSS and HTML Design Patterns》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换