CSS 是什么？

CSS定义

css，层叠样式表（cascading syle sheets）,一种用来为结构化文档（基本就是html）添加样式的语言。

举例： 选择一个HTML页面所有的段落元素，然后将其中的文本改成红色，代码和结果如下：

<p>红色<p>
复制代码

p{
  color:red;
}
复制代码

浏览器的默认样式

学习HTML时，可以看到浏览器给每个标签的默认样式。浏览器通过内部样式表渲染HTML文件，这确保了标题会比正常文字大，链接被高亮，如下图所示：

有了CSS，可以添加自定义样式，还可以做一些特效和动画。

删除默认样式：为了自定义样式不被默认样式影响，可以先删除默认样式，删除与浏览器的关于内外边距的全局默认样式，只需添加css代码：
css * { margin:0; padding:0; }

CSS能做什么

• 实现样式和文档结构分离。没有css以前，所有样式都要混在HTML里，有了css，可以实现样式和文档结构分离。（有些情况下，css仍然可以在HTML里写，称为内联样式）
• 将css这样一门样式语言单独抽离出来，能够提供更大的表达空间，实现更为复杂多样的样式。

CSS结构

整个结构称为“规则集”，简称“规则”。

• 选择器：选择一个或多个需要添加样式的元素。选择器有不同的类型和优先级：

  选择器	选择器权重
  继承、*	0,0,0,0
  元素（标签）选择器	0,0,0,1
  类/伪类选择器	0,0,1,0
  ID选择器	0,1,0,0
  行内样式	1,0,0,0
  !Important	∞

• 声明：一个单独的规则，用来指定添加样式元素的属性

• 属性：指定要改变的HTML元素样式

• 属性的值：从指定属性的众多外观中选一个值

CSS特性——层叠与继承

层叠性 cascade

当应用两条同级别的规则到一个元素的时候，写在后面的就是实际使用的规则。执行层叠性的例子：有两个关于h1的规则，这两个规则有相同的优先级，但顺序在最后的生效：

<h1>This is my heading.</h1>
复制代码

h1 {
    color:red;
}
h1 {
    color:blue;
}
复制代码

选择器优先级相同，会执行层叠性，规则优先级不同，根据选择器的权重（优先级）执行

继承性

一些设置在父元素上的css属性是可以被子元素继承的，有些则不能。例子：

<p>text in p <span>text in sppan</span>.</p>
复制代码

p {
    color: blue;
}
span {
    color: black;
}
复制代码

CSS学习资源

免费课程

1. codecademy.com

老牌在线编程教育网站。全程交互式自助学习体验，适合CSS边学边练场景。

2. udacity.com

老牌在线编程教育网站。外文网站，中文友好，视频式教学+课后实验互动

3. w3schools.com & runoob.com

w3school & 菜鸟教程

4. freecodecamp.org

GitHub上star最多的项目，由社区贡献而成的全面的程序员自学课。

持续学习

1. MDN

伴随前端工程师职业生涯的-MDN文档

2. CSS-TRICKS

3. w3c CSS标准

解读css规则的原理

CSS常用规则

CSS布局

正常文档流

元素块在整篇文档中的位置如何确定呢？

• 默认的块级元素按照基于其父元素的书写顺序的块流动方向放置。每个块级元素会在上一个块级元素下面另起一行，会被设置好margin隔，块级元素是垂直组织。
• 内联元素不会另起一行，只要在其父级块元素的宽度内有足够的空间，他们与其他内联元素被安排在同一行。如果空间不够，溢出的文本或元素将移动到新的一行。

弹性盒子(最常用)

一种按行或列布局元素的一维布局方法。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。弹性布局可以完成90%的布局要求，非常灵活。

1. 一键开启弹性盒子，替代正常文档流。声明弹性布局，得到一个横排的布局，这是一个隐含的盒模型状态，容器类似于block，但宽度默认由子元素决定，子元素类似于inline-block，可设置宽高且不换行：

   .container {
     display:flex
   }
   复制代码

   

2. 更改弹性盒子的主轴。flex-direction属性控制子元素的排布顺序。

   .container {
     display:flex;
     flex-direction: row | row-reverse | column | column-reverse;
   }
   复制代码

   

3. 子元素主轴线上如何对齐。justify-content属性，确定子元素如何分配空间。

       .container {
         display: flex;
         justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
       }
   复制代码

   

4. 子元素横轴线上如何对齐。align-items确定子元素如何垂直对齐

       .container {
         display: flex;
         align-items: stretch | flex-start | flex-end | center | baseline;
       }
   复制代码

   

定位

CSS定位布局-Static, Relative, Absolute, Fixed, Sticky & z-index

非static值的定位让元素非常独立可控，广泛运用在弹窗、下拉选项、固定导航栏等场景。

浮动

……

装饰相关

字体

属性	描述
font-size	字号，单位通常为px
font-family	字体，如Microsoft YaHei
font-weight	粗细,默认粗细用normal或400表示，加粗为bold
font-style	样式 italic(斜体)
font	复合属性，字体相关属性连写，顺序为：style(可选)→weight(可选)→size→family

边框

属性	描述
border-style	样式，dotted点边框 / dashed虚线边框 / solid实线边框 / double两个边框
border-width	边框宽度，thick(3px) / medium(2px) / thin(1px)
border-color	边框颜色
复合属性	border: 5px solid red

阴影

box-shadow:h-shadow v-shadow blur spread color inset;
复制代码

值	描述
h-shadow	必需。水平阴影的位置，允许负值。
v-shadow	必需。垂直阴影的位置，允许负值。
blur	可选。模糊距离。
spread	可选。阴影的尺寸。
color	可选。阴影的颜色。
inset	可选。将外部阴影（outset）改为内部阴影

文字阴影

text-shadow: offset-x | offset-y | blur-radius | color;
复制代码

交互

cursor-pointer

cursor: help | wait | crosshair | not-allowed | zoom-in | grab ;
复制代码

:hover

动画

developer.mozilla.org/zh-CN/docs/…

CSS调试技巧、扩展和革新

CSS调试

Chrome浏览器vue调试工具devtools一键下载安装无须配置

CSS扩展

CSS 预处理器是一个能让你通过预处理器自己独有的语法来生成CSS的程序。绝大多数CSS预处理器会增加一些原生CSS不具备的特性，例如代码混合，嵌套选择器，继承选择器等。这些特性让CSS的结构更加具有可读性且易于维护。

要使用CSS预处理器，必须在web服务中服务器安装CSS编译工具。

流行的CSS预处理器:

• less，扩充的功能：变量类型，编译后会填充到对应位置，函数：实现样式的批量生产。
• scss

CSS革新

css的发展已经不一定需要写css文件了
以style-components代表的css-in-js方案，通过组件的方式复用属性，用js的力量武装css

//creat a title component that'll render an <h1> tag with some styles
const Title = styled.h1`
    font-size: 1.5em;
    text-align: center;
    color: palevioletred;
`;
//creat a wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
    padding: 4em;
    background: papayawhip;
`;
复制代码

//Use title and wrapper like any other React component - expect they're styled!
render(
    <Wrapper>
        <Title>
            Hellow world!
        </Title>
    </Wrapper>
)
复制代码

以tailwindcss为代表的方案，改样式就改HTML文件即可，好处：css的选择是无限制的，收拢css的选择（bg-blue-400）

参考

css-tricks.com/snippets/cs…

developer.mozilla.org/zh-CN/docs/…