千霜
千霜

css

目录

  • 一、介绍
  • 二、基础知识
    • 2.1、[应用css样式表][1]
      • 2.1.1、外部样式
      • 2.1.2、内部样式
      • 2.1.3、内联样式
    • 2.2、css语法
      • 2.2.1、css declarations
      • 2.2.2、css declaration blocks
      • 2.2.3、css rules
      • 2.2.4、at-rules
      • 2.2.5、注释
      • 2.2.6、速写（shorthand）
    • 2.3、选择器（selector）
      • 2.3.1、简单选择器
        • 2.3.1.1、通用选择器
      • 2.3.2、[属性选择器][2]
        • 2.3.2.1、Presence and value attribute selectors
        • 2.3.2.2、Substring value attribute selectors
      • 2.3.3、[Pseudo-classes and pseudo-elements][4]
        • 2.3.3.1、伪类
        • 2.3.3.2、[伪元素][6]
      • 2.3.4、[Combinators and groups of selectors][7]
    • 2.4、叠层和继承
      • 2.4.1、Importance
      • 2.4.2、Specificity
      • 2.4.3、Source order
      • 2.4.4、[继承][8]
    • 2.5、值和单位
      • 2.5.1、数值
        • 2.5.1.1、有单位数值
        • 2.5.1.2、无单位数值
      • 2.5.2、百分数
      • 2.5.3、颜色
      • 2.5.4、函数
    • 2.6、盒子模型
      • 2.6.1 外边距坍塌
      • 2.6.2、盒子模型类型
      • 2.6.3、其他相关内容
  • 三、Style
    • 3.1、[css值语法规则][13]
      • 3.1.1、例子一`font `
      • 3.1.2、例子二`background-position`
      • 3.1.3、例子三`background-color`
    • 3.2、style text
      • 3.2.1、font
      • 3.2.2、text layout
      • 3.2.3、其他
    • 3.3、style lists
    • 3.4、style links
    • 3.5、style background
    • 3.6、style borders
    • 3.7、style tables
    • 3.8、[advanced box effects][49]
    • 3.9 其他
      • 3.9.1 object-fit
  • 四、布局
    • 4.1、display
    • 4.2、flexbox layout
      • 4.2.1、默认行为及分类
      • 4.2.2、基础概念
      • 4.2.3、属性详解
    • 4.3、grid layout
      • 4.3.1、部分属性
      • 4.3.2、line-base placement
      • 4.3.3、grid template areas
      • 4.3.4、named grid lines
      • 4.3.5、对齐
    • 4.4、float
    • 4.5、position
    • 4.6、multiple-column layout
  • 五、其他
    • 5.1、media queries
    • 5.2、transitions（过渡）
    • 5.3、transforms（变换）
    • 5.4、animations
    • 5.5 @import
  • 参考

一、介绍

css（Cascading Style Sheets）叠层样式表，用来设计网页的外观。不要因为某个html元素有自己想要的样式就乱用元素，而是根据语义来选择元素，而css可以为你完成几乎任何想要的外观。

css内容很多，看看目录就知道了。学习css首先需要了解它的语法规则、选择器、盒子模型等基础知识，然后学习一堆的样式（即属性）。很多，学了又忘，但是每个属性都有它的文法，只要理解了文法规则，那么在了解属性的作用后，就能轻松使用该属性了。属性之间都不是单独存在的，很多属性都可以归为一类，因此按照类别来学习css属性十分有必要。再之后需要了解css的布局，css最强大的功能之一就是它的布局功能了。如果有必要，还可以了解一些和动画相关的内容。

二、基础知识

css（Cascading Style Sheets）叠层样式表，用于改变网页样式，最终和html形成DOM（Document Object Model ），而浏览器则将DOM展示出来。过程如下：
css_第1张图片

一个最简单的例子：
index.html:


<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experimenttitle>
    <link rel="stylesheet" href="style.css">
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>

style.css:

h1 {
  color: blue;
  background-color: yellow;
  border: 1px solid black;
}

p {
  color: red;
}

2.1、应用css样式表

一共三种方法可以将样式表应用到html文档中。

2.1.1、外部样式

head元素中添加即可。


<html>
  <head>
    <meta charset="utf-8">
    <title>My CSS experimenttitle>
    <link rel="stylesheet" href="style.css">
  head>
  <body>
    <h1>Hello World!h1>
    <p>This is my first CSS examplep>
  body>
html>

2.1.2、内部样式

将css样式放入