乐趣区

CSSSassScss

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、定位
      Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示
      absolute:绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion 不为 static),否则为 Body 文档本身。relative:相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。fixed:固定定位;类似于 absolute,但不随着滚动条的移动而改变位置。static:默认值;默认布局.
      辅助属性:position 属性只是使元素脱离文档流,要想此元素能按照希望的位置显示,需要使用下面的属性(position:static 不支持这些):①left:表示向元素的左边插入多少像素,使元素向右移动多少像素。②right:表示向元素的右边插入多少像素,使元素向左移动多少像素。③top:表示向元素的上方插入多少像素,使元素向下移动多少像素。④bottom:表示向元素的下方插入多少像素,使元素向上移动多少像素。注:上面属性的值可以为负,单位:px。
  • 5、布局(省略)

3、sass

4、scss

退出移动版