url('其他的css文件')
想引入几个css文件就用几个@import
url
注意路径的的书写
首页需要两个css文件index.css和common.css
就在index.css的首行写入(两个css文件在同一个目录下)
@import
url('common.css')
这样只需要在首页链接一个index.css文件就可以了。
当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:1、外部样式表当样式需要被应用到很多页面的时候,外部样式表将是理想的选择。使用外部样式表,你就可以通过更改一个文件来改变整个站点的外观;
例如:
2、内部样式表当单个文件需要特别样式时,就可以使用内部样式表。你可以在
head
部分通过
标签定义内部样式表;
例如:<style
type="text/css">body
{background-color:
red}p
{margin-left:
20px}
3、内联样式当特殊的样式需要应用到个别元素时,就可以使用内联样式。使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何
CSS
属性。以下实例显示出如何改变段落的颜色和左外边距。
例如:
This
is
a
paragraph
在前端项目中写样式,往往会根据不同的情况给 DOM 元素不同的样式类来实现一些效果。用 React 项目举例,比如定义一个按钮:
再比如定义一个元素是否被激活:
区分这种样式常规的写法:
这种写法让人感觉非常的啰嗦,不优雅。而且如果判断条件和存在的样式类特别多,会写的很长很恶心。
如最常见的 Button 组件,它会有不同的样式、尺寸、显示方式、ghost 等等,这时候使用拼接和判断语句的方式都显得特别麻烦。
此时 classnames 闪亮登场!下面是它的用法:
classnames 很好的解决了按需使用不同样式类的问题。下面是一个 React 例子:
前后对比,明显优雅了很多。
回到按钮的问题,有了 classnames 就可以很好的解决样式类拼接麻烦的问题了。
墙裂推荐 classnames!