作用

image.png

版本

image.png
image.png

常用属性

image.png

兼容性

有的功能只是草稿，所以有的浏览器支持，有的不支持

属性前缀

某些属性不同浏览器兼容性不同，想要使用需要加一定的前缀，如下图要加-webkit-前缀。原因是怕某个草稿时期的属性后来成为标准被改名了，浏览器会自动解析成新名的属性
image.png
image.png
但后面用webpack打包会自动加

===================

格式

  1. /*样式名 : 样式值*/
  2. /*注释*/
  4. p{
  5.    font-size:20px;  /*设置文字字号*/
  6.    color:red;       /*设置文字颜色*/
  7.    font-weight:bold;/*设置字体加粗*/
  8. }

===================

应用方式

内联样式

  1. <html>
  2.   <head>
  3.   </head>
  4.   <body>
  5.     <p style="color:red ; font-size:12px">这里文字是红色。</p>
  6.   </body>
  7. </html>

style=”color:red ; font-size:12px” 就是内联样式，作为标签的一个属性style

内嵌样式

  1. <html>
  2.   <head>
  3.     <style type="text/css">
  4.       span{
  5.         font-size:20px;/*设置文字字号*/
  6.         color:red;/*设置文字颜色*/
  7.                font-weight:bold;/*设置字体加粗*/
  8.       }
  9.     </style>
  10.   </head> 
  11.   <body>
  12.     <span>...</span>
  13.   </body>
  14. </html>

作为head里面的一个style标签来统一设置

外部式（推荐）

  1. <html>
  2.   <head>
  3.     <title>嵌入式css样式</title>
  4.     <!--1.link引入-->
  5.     <link href="./style.css" rel="stylesheet" type="text/css" />
  7.     <!--2.style引入，效率比link低-->
  8.     <style>
  9.       @import url(./style.css);
  10.     </style>
  11.   </head>
  12.   <body>
  13.   </body>
  14. </html>

把CSS样式写在外部的后缀为.css的文件中。

  1. @charset "utf-8";  /*设定字符编码*/
  2. @import url(./style123.css); /*这里也可以引入其他的.css文件*/
  4. /*span 样式*/
  5. span{
  6.   font-size:20px;/*设置文字字号*/
  7.   color:red;/*设置文字颜色*/
  8.   font-weight:bold;/*设置字体加粗*/
  9. }

rel=”stylesheet” type=”text/css”为固定写法。

可以在谷歌浏览器F12调试器里面的NetWork里面看到，如果正确引入文件，刷新页面可以看到这个记录的status状态，成功就是成功引入，失败就是文件不存在或者地址不对

结构、样式分离

公共的写在一个css文件
不同功能卸载不同的css文件

优先级

内联 》内嵌 》外部

加!important 可以提高优先级到最优先

===================

查看

image.png

user agent stylesheet：浏览器默认给我们加的样式