css基础

Cascading Style Sheets(层叠样式表)

CSS有三种引入方式

  • 外部链接引入
  • style标签(内部样式)
  • import引入 @import属于CSS语法只能在CSS文件中或者style标签中使用
<link rel="stylesheet" type="text/css" href="index.css">


<style type="text/css">
  h1 {
    color: red;
    font-size: 20px;
  }
</style>


<style>
  @import url("hello.css");
  @import "world.css";
</style>

CSS 选择符优先级

常见的选择器种类：

  • 内联样式（Inline Style）,如  <span style="color:black">...</span>；
  • ID选择符（ID selectors），如#id；
  • Class选择符（Class），如 .class {...}、[href=‘’]、:hover；
  • 标签选择符（Tag）,如 div,:before 

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。

W3C的盒模型方式被称为“content-box”，IE的被称为“border-box”，使用box-sizing: border-box;就是为了在设置有padding值和border值的时候不把宽度撑开。

常用css属性

 

1.*block(块级)

行高 line-height:数值 | inherit | normal;
字间距 letter-spacing: 数值 | inherit | normal;
词间距 word-spacing: 数值 | inherit | normal;
空格 white-space: pre(保留) | nowrap(不换行) | normal;

// 显示 display

none; /*不显示，使用的场景非常多*/
block; /*把内联标签变成块级标签*/
inline; /*把块级标签变成内联标签*/
list-item; /*列表项*/
run-in; /*追加部分*/
compact; /*紧凑*/
marker; /*标记*/
table;
inline-table;
table-raw-group;
table-header-group;
table-footer-group;
table-raw;
table-column-group;
table-column;
table-cell;
table-caption; /*表格标题*/

常用css属性

 

2.*box(盒子)

宽度 width: 长度 | 百分比 | auto;
高度 height: 长度 | 百分比 | auto;
清除 clear: none | left | right | both;
边界 margin: 上 右 下 左 ;
填充 padding: 上 右 下 左 ;
定位 position: absolute | relative | static;
透明度 visibility: inherit | visible | hidden;
溢出 overflow: visible | hidden | scroll auto;
 

常用css属性

 

3.*float(浮动)

浮动 float: left | right | none; 在页面布局

 

产生副作用，当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”，需要清除浮动

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

常用css属性

 

(4) position（定位）

position: static | absolute | relative | fixed; 

 

产生副作用，当包含框的高度小于浮动框的时候，此时就会出现“高度塌陷”，需要清除浮动

.clearfix:after{
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

CSS预处理器

CSS 自诞生以来，基本语法和核心机制一直没有本质上的变化，它的发展几乎全是表现力层面上的提升。最开始 CSS 在网页中的作用只是辅助性的装饰，轻便易学是最大的需求；然而如今网站的复杂度已经不可同日而语，原生 CSS 已经让开发者力不从心。

于是，在前端领域，天降大任于斯人也，CSS 预处理器应运而生。而 CSS 这门古老的语言以另一种方式 “重新适应” 了网页开发的需求。

预处理器赋予我们的 “超能力”

文件切分

页面越来越复杂，需要加载的 CSS 文件也越来越大，我们有必要把大文件切分开来，否则难以维护。传统的 CSS 文件切分方案基本上就是 CSS 原生的 @import 指令，或在 HTML 中加载多个 CSS 文件，这些方案通常不能满足性能要求。

CSS 预处理器扩展了 @import 指令的能力，通过编译环节将切分后的文件重新合并为一个大文件。这一方面解决了大文件不便维护的问题，另一方面也解决了一堆小文件在加载时的性能问题。

模块化

把文件切分的思路再向前推进一步，就是 “模块化”。一个大的 CSS 文件在合理切分之后，所产生的这些小文件的相互关系应该是一个树形结构。

树形的根结节一般称作 “入口文件”，树形的其它节点一般称作 “模块文件”。入口文件通常会依赖多个模块文件，各个模块文件也可能会依赖其它更末端的模块，从而构成整个树形。

entry.styl
 ├─ base.styl
 │   ├─ normalize.styl
 │   └─ reset.styl
 ├─ layout.styl
 │   ├─ header.styl
 │   │   └─ nav.styl
 │   └─ footer.styl
 ├─ section-foo.styl
 ├─ section-bar.styl
 └─ ...

选择符嵌套

选择符嵌套是文件内部的代码组织方式，它可以让一系列相关的规则呈现出层级关系。在以前，如果要达到这个目的，我们只能这样写：

.nav {margin: auto /* 水平居中 */; width: 1000px; color: #333;}
    .nav li {float: left /* 水平排列 */; width: 100px;}
        .nav li a {display: block; text-decoration: none;}
.nav
    margin: auto  // 水平居中
    width: 1000px
    color: #333
    li
        float: left  // 水平排列
        width: 100px
        a
            display: block
            text-decoration: none

在 CSS 预处理语言中，嵌套语法可以很容易地表达出规则之间的层级关系，为单条声明写注释也很清晰易读：

变量

在变更出现之前，CSS 中的所有属性值都是 “幻数”。你不知道这个值是怎么来的、它的什么样的意义。有了变量之后，我们就可以给这些 “幻数” 起个名字了，便于记忆、阅读和理解。

/* 原生 CSS 代码 */
strong {
	color: #ff4466;
	font-weight: bold;
}

/* ... */

.notice {
	color: #ff4466;
}
// 用 Stylus 来写
$color-primary = #ff4466

strong
	color: $color-primary
	font-weight: bold

/* ... */

.notice
	color: $color-primary

运算

光有变量还是不够的，我们还需要有运算。如果说变量让值有了意义，那么运算则可以让值和值建立关联。有些属性的值其实跟其它属性的值是紧密相关的，CSS 语法无法表达这层关系；而在预处理语言中，我们可以用变量和表达式来呈现这种关系。

.wrapper {
	overflow-y: hidden;
	line-height: 1.5;
	max-height: 4.5em;  /* = 1.5 x 3 */
}
.wrapper
  $max-lines = 3
  $line-height = 1.5

  overflow-y: hidden
  line-height: $line-height
  max-height: unit($line-height * $max-lines, 'em')

乍一看，代码行数似乎变多了，但代码的意图却更加清楚了——不需要任何注释就把整件事情说清楚了。在后期维护时，只要修改那两个变量就可以了。

函数

把常用的运算操作抽象出来，我们就得到了函数。

.button {
	background-color: #ff4466;
}
.button:hover {
	background-color: #f57900;
}
.button
  $color = #ff9833

  background-color: $color
  &:hover
	background-color: darken($color, 20%)

此外，预处理器的函数往往还支持默认参数、具名实参、arguments 对象等高级功能，内部还可以设置条件分支，可以满足复杂的逻辑需求。

我相信即使是最资深的视觉设计师，也很难分清 #ff4466 和 #f57900 这两种颜色到底有什么关联。而如果我们的代码是用预处理语言来写的，那事情就直观多了：

Mixin

Mixin 是 CSS 预处理器提供的又一项实用功能。Mixin 的形态和用法跟函数十分类似——先定义，然后在需要的地方调用，在调用时可以接受参数。能提高你代码的重复使用率并简化你的代码。

@mixin button { 
 font-size: 1em; 
 padding: 0.5em 1.0em; 
 text-decoration: none; 
 color: #fff; 
}

@mixin button1($background) { 
 font-size: 1em; 
 padding: 0.5em 1.0em; 
 text-decoration: none; 
 color: #fff; 
 background: $background; 
}
.button-green { 
 @include button; 
 background-color: green; 
}

.button-green { 
 @include button1(green); 
}
Made with Slides.com