理解CSS|青训营笔记

狮里
72 阅读8分钟

这是我参与「第四届青训营」笔记创作活动的第1天

CSS为何者？

  • (层叠)样式表（Cascading Style Sheets）
  • 作用：
    • 设置字体颜色
    • 设置位置和大小
    • 添加动画效果

HTML 与CSS 与 Javascript之间的关系可以比喻为：去拍照

各位都有拍照的经历，在座若有小姐姐（HTML），试想您去拍照的时候，即使自己的颜值再怎么能打，相信也都得梳妆打扮一番呀（CSS），这样才能把自己的美丽尽可能的展现出来，不过这样够吗？显然不够滴～在相机咔嚓的时候，咱要摆着pose呀（Javascript）

很显然，咱的CSS就是为了美化 HTML存在的呀。

CSS的简单构成

选择器Slector
 {
     选择器Property:value;
 }

选择器Selector

  • 找出页面中的元素，以便给他们设置样式（作用）
  • 使用多种方式选择元素
    • 按照标签名、类名或id
    • 按照属性
    • 按照在DOM树的位置

大概有以下选择器(Selector)：

  • 通配选择器(*)

在 CSS 中，一个星号 (*) 就是一个通配选择器。它可以匹配任意类型的 HTML 元素。在配合其他简单选择器的时候，省略掉通配选择器会有同样的效果。比如，*.warning 和.warning 的效果完全相同。 通配选择器效率最低。

    *{
        padding: 0px;
        margin: 0px 0px;
        list-style: none;
    }

  • 标签选择器

      p{
      font-size: 24px;
  }

  • id选择器(id是唯一的)

CSS ID 选择器根据元素id属性的值匹配元素。为了选择元素，它的id属性必须与选择器中给出的值完全匹配。

#id{
    width: 300px;
    height: 300px;
}

  • 类选择器

      .class(类名自定义){
      font-size: 34px;
  }

    我们可以为多个标签设置类名，如此一来，拥有相同类名的多者都会有相同的效果。

  • 属性选择器

    我们可以利用一些标签内的属性进行选择

      a[href^="#"]{
      color:black;
      blackground: 0 center/1em;
  }
  a[href$=".jpg"]{
      color: red;
      blackground: 0 center/1em;
  }

基本格式为:标签名[属性名（^/$）=“”];

  • ^=: 以...为首
  • $=: 以...为尾

伪类选择器（：）

CSS伪类是用来添加一些选择器的特殊效果，伪类包含两种：状态伪类（UI伪类）和结构性伪类。

  1. 状态伪类(基于元素当前状态进行选择)

在与用户的交互过程中元素的状态是动态变化的，因此该元素会根据其状态呈现不同的样式。当元素处于某状态时会呈现该样式，而进入另一状态后，该样式也会失去

常用的状态伪类有：

:link应用于未被访问过的链接；

:hover应用于鼠标悬停到的元素；

:active应用于被激活的元素；

:visited应用于被访问过的链接，与:link互斥。

:focus应用于拥有键盘输入焦点的元素。

:target应用于链接点击后指向元素

例子：

  a:link {color:#FF0000;} /* 未访问的链接 */`
  a:visited {color:#00FF00;} /* 已访问的链接 */`
  a:hover {color:#FF00FF;} /* 鼠标划过链接 */`
  a:active {color:#0000FF;} /* 已选中的链接 */`

PS:

在CSS定义中，a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的。

在 CSS 定义中，a:active 必须被置于 a:hover 之后，才是有效的。

伪类的名称不区分大小写。

  1. 结构性伪类

常用的结构性伪类：

:first-child选择某个元素的第一个子元素；

:last-child选择某个元素的最后一个子元素；

:nth-child()选择某个元素的一个或多个特定的子元素；

:nth-last-child()选择某个元素的一个或多个特定的子元素，从这个元素的最后一个子元素开始算；

:nth-of-type()选择指定的元素；

:nth-last-of-type()选择指定的元素，从元素的最后一个开始计算；

:first-of-type选择一个上级元素下的第一个同类子元素；

:last-of-type选择一个上级元素的最后一个同类子元素；

:only-child选择的元素是它的父元素的唯一一个子元素；

:only-of-type选择一个元素是它的上级元素的唯一一个相同类型的子元素；

:empty选择的元素里面没有任何内容。

组合选择器

' '  后代组合器（Descendant combinator）

后代选择器用于选取某元素的后代元素。

'>'  直接子代组合器（Child combinator）

与后代选择器相比，子元素选择器（Child selectors）只能选择作为某元素直接/一级子元素的元素。

'~'  一般兄弟组合器（General sibling combinator）

选取所有指定元素之后的相邻兄弟元素。

'+'  紧邻兄弟组合器（Adjacent sibling combinator）

选择紧接在另一元素后的元素，且二者有相同父元素。

选择器组

li,ol,p,div{
    padding: 0px;
    margin: 0px;
}

{}内的样式对","隔开的各个Selector都有效

CSS使用的三种方式

  1. 外链式样（推荐使用哦）

       <link rel="stylesheet" type="text/css" href="index.css" />

    ps:用这个样式时要当心，是否将css样式加载进去～即href是否有值

  2. 嵌入

      <style>
      p{ font-size: 24px;}
      ul{ list-style: none;}
  </style>

  3. 内联

         <p style="margin: 1 em 0> Example Contents </p>

CSS颜色

  • RGB
    • (Red,Green,Blue)取值范围0-255
  • HSL
    • Hue(色相)：色彩的基本属性取值范围0-360.
    • Saturation(饱和度):色彩的鲜艳程度,越高越鲜艳，取值范围0-100%。
    • Lightness(亮度):色彩的明亮程度，越高越明亮，取值范围0-100%。
  • #六位十六进制

色彩透明度(Alpha):越大越不透明，取值范围0-1。可与上三折者共用，记做rgba 或者 hsla或者 #八位十六进制

CSS文字相关

font-family的使用

  • 字体列表最后加入通用字体族
    • 代表一类字体，它用于字体的回退机制，告诉浏览器在字体列表中所有的字体都无效的情况下，使用系统中的某类字体作为当前的字体，防止找不到字体的情况出现。

通常会在字体列表的最后定义一个字体族。字体族的名称通常是一个关键字，常见的字体族有：serif、sans-serif、cursive、fantasy和monospace。

通用字体族的名称是关键字，不需要使用双引号来引用。如果你使用的某种字体和通用字体族的名称相同，必须使用双引号将该字体引起来，以便和通用字体族关键字区分开来。

  • 英文字体放在中文字体前

    • 英文字体不作用在中文不一定有，而中文字体作用在英文上。

  • 使用WebFont

    • 下载自定义问题，有更多选择

    • 对性能有影响，会有较大开销

        例：
  @font-face {
    font-family: "myFont";
    src: url("myFont.ttf");
  }

font

font:style weight size/height family;
h1{
    font: bolid 14px/1.7 Helvitica,sans-serif;
}

spacing

(字符间距)属性设置文本字符之间的水平间距行为。在呈现文本时，此值会添加到字符之间的自然间距。正值使字符分散得更远，而负值使字符靠得更近。

语法：

letter-spacing: normal;（默认。规定字符间没有额外的空间。）
letter-spacing: inherit;（规定应该从父元素继承 letter-spacing 属性的值。）
letter-spacing: lenght;（定义字符间的固定空间，允许使用负值）

letter-spacing: 0.3em;
letter-spacing: 3px;
letter-spacing: .3px;

text-indent

text-indent属性可以定义一个元素首行文本内容之前的缩进量。

/* <length> 长度值 */
text-indent: 3mm;
text-indent: 40px;

/* <percentage>百分比值取决于其包含块（containing block）的宽度*/
text-indent: 15%;

/* 关键字 */
text-indent: 5em each-line;
text-indent: 5em hanging;
text-indent: 5em hanging each-line;

/* 全局值 */
text-indent: inherit;
text-indent: initial;
text-indent: unset;

text-decoration

文字装饰

text-decoration = 
  <'text-decoration-line'>   ||
  <'text-decoration-style'>  ||
  <'text-decoration-color'>

white-space

CSS 属性是设置如何处理元素中的空白（en-US）

nomaral:默认。空白会被浏览器保留。

pre:连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行

nowrap:和 normal 一样，连续的空白符会被保留。但文本内的换行无效。

pre-wrap:连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子 (line boxes)」时才会换行。

pre-line:- 连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子 (line boxes)」时会换行。

inherit:规定应该从父元素继承 white-space 属性的值。

CSS如何工作的：

如图：

pic1.jpg

关于DOM树:

一个 DOM 有一个树形结构，标记语言中的每一个元素、属性以及每一段文字都对应着结构树中的一个节点（Node/DOM 或 DOM node）。节点由节点本身和其他 DOM 节点的关系定义，有些节点有父节点，有些节点有兄弟节点（同级节点）。

当浏览器打开时，开始加载HTML,而后解析HTML，形成一个树状结构，即DOM树，此时通过以上三种方式加载CSS样式，DOM树每个节点解析出CSS样式并附加，形成渲染树。最后展示出来。

调试CSS

  • 右击页面选择[检查]
  • 快捷键
    • ctrl+shift+i(windows)
    • command+option+I（Mac）

赶紧去学习吧～

avatar
文章
阅读
粉丝