CSS简单学习笔记

CSS

笔记来源于 bilibili av29469349
感谢 UP 主上传精彩教学视频，建议 1.5 倍速，半天看完
（UP 主声音很好听，声音控可以正常速度听完）

css 样式规则

                       声明               声明
                         |                  |
            +------------+------------------+-----------------+
            |            |                  |                 |
  +----+    |   +--------------+  +--------------------+      |
  | h1 |    | { |  color:red;  |  |  front-size:25px;  |   }  |
  +----+    |   +----|-----|---+  +-------|-------|----+      |
     |      |        |     |              |       |           |
     |      +--------+-----+--------------+-------+-----------+
     |               |     |              |       |
   选择器           属性    值            属性     值

添加 css 的三种方法

1. 外部样式表
   CSS 保存在 .css 文件中，在 HTML 里使用 <link> 引用

2. 内部样式表
   不使用外部 CSS 文件，将 CSS 放在 HTML <style> 里

3. 内联样式表（不推荐，维护困难）
   仅仅影响一个元素，在HTML 元素的 style 属性里添加

CSS 选择方式

<p class="paragraph" id="paral" > text </p>

一般 id 指的是在一个 html 页面中唯一的那一个标签，id 的值在 html 文件中独一无二

/*通过标签种类进行选择*/
p{
    color:red;
}

/*通过 class 选择*/
.paragraph{
    color:red;
}

/*通过 id 选择*/
#paral{
    color:red;
}

了解更多选择器知识 from mozilla

CSS 颜色设置

方式	示例	说明
关键词	black，silver，white	网页安全颜色
RGB	rgb(255,0,0)	RED、Green、Blue
RGBA	rgb(255,0,0,0.5)	RAB alpha，最后一项为 0 ~ 1 ，代表透明度
十六进制	#ff0000
HSL	hsl(0,100%,50%)	Hue、Saturation、lightness
HSLA	hsl(0,100%,50%,0.5)

了解更多颜色知识 from mozilla

了解更多颜色知识 from serennu

CSS 字体

使用 font-family 属性

{
    /* 字体优先级问题 */
    font-family:Arial,Helvetica,sans-serif
}

{
    /* 字体名字有空格，需要 "" */
    font-family:"Gill Sans",sans-serif
}

衬线 serif

sans-serif 无衬线 类比于黑体

serif 有衬线 类比于宋体，带一个三角

monospace 等宽字体

了解更多字体知识 from mozilla

了解更多颜色知识 from cssfontstack

了解更多颜色知识 from google

Type is Beautiful

字谈字畅

西文字体1/2

西文排版

CSS Box 模型

1.模型示意图

margin  外边距
border  边框
padding 内边距

  +---------------------------------------------------------------+
  |                         margin                                |
  |                                                               |
  |     /// border            |
  |     //                                           //           |
  |     //                  padding                  //           |
  |     //    **********************************     //           |
  |     //    * width                          *     //           |
  |     //    *             content            *     //           |
  |     //    *                          height*     //           |
  |     //    **********************************     //           |
  |     //                                           //           |
  |     //                                           //           |
  |     ///           |
  |                                                               |
  |                                                               |
  +---------------------------------------------------------------+

2.外边距塌陷

假设有四个 box 拼在一起

错误示例：外边距会取二者较大值，只显示一份
+--------------++--------------+
|  //  ||  //  |
|  //      //  ||  //      //  |
|  //  ||  //  |
+--------------++--------------+
+--------------++--------------+
|  //  ||  //  |
|  //      //  ||  //      //  |
|  //  ||  //  |
+--------------++--------------+

正确示例：
+------------+--------------+
|  //|  //  |
|  //      //|  //      //  |
|  //|  //  |
+------------+--------------+
|  //|  //  |
|  //      //|  //      //  |
|  //|  //  |
+------------+--------------+

3.设置 margin padding

margin padding 语法相同

以 margin 为例

p{
    margin-top:5px;
    margin-bottom:5px;
    margin-right:10px;
    margin-left:10px;
}

更简单的写法

p{
    /* 上5 右10 下5 左10 */
    margin:5px 10px 5px 10px;
}

p{
    /* 上下5 左右10 */
    margin:5px 10px;
}

p{
    /* 上5 左右10 下5 */
    margin:5px 10px 5px;
}