走进前端技术栈——CSS|青训营笔记

沉舟望海楼
76 阅读4分钟

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

今天主要内容：

  1. css的代码构成
  2. css的使用方法
  3. css流程之选择器组、文本渲染
  4. 调试css

走进前端技术栈——CSS

什么是css？

Cascading Style Sheet——层叠样式表，用来定义页面的样式

h1.png

在页面中使用CSS

  1. 外链（推荐）
<link rel="stylesheet" href="jing.css">
  1. 嵌入
  <style>
        h1 {
            color: #ccc;
        }
   </style>
  1. 内联（不推荐）
<h1 style=" color: #ccc;">lala</h1>

一般情况下使用第一种外链的样式，实现内容和样式相分离。

CSS的工作原理

css.png

当用户打开一个页面，浏览器就会加载html,随后解析html，解析出来是一个树形的结构，称为DOM树，在解析html的时候，就会加载css，然后解析css，然后这些样式就会添加到DOM树里面，然后在渲染页面。

选择器 Selector

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

标签选择器

 p {
            color: green;
        }
        div {
            color: pink;
        }

类选择器

/* 类选择器口诀 样式点定义，结构类（class）调用 一个或多个，开发最常用 */
        .pink {
            color: pink;
        }

id选择器

/* id选择器口诀：样式#定义 ，结构id调用，只能调用一次，别人不能使用 */
        #pink {
            /* #号后面跟的是自己起的名字 */
            color: pink;
        }

通配符选择器

 * {
      color: aqua;
   }

        /* 所有的标签颜色都会变化 */

  • 属性选择器

 /* 必须是Input，但是同时具有value这个属性，才能选择这个值 */
        /* input[value] {
            color: pink;
            outline: none;
        } */

        /* 首先选择input，同时type值为text,才能选择 */
        input[type=text] {
            color: pink;
        }

        /* []中括号是属性选择器，权重是10 */

        /* 选择首先是div，然后具有class属性，并且属性值必须是Icon开头的这些元素 */
        div[class^=icon] {
            color: aqua;
        }

        /* class里面以以data结尾的元素 */
        div[class$=data] {
            color: blue;
        }

        /* 只要class里面有icon就可以被选择 */
        div[class*=icon] {
            color: red;
        }

  • 结构伪类选择器

 /* 1、选择ul里面的第一个孩子 */
        ul li:first-child {
            color: pink;
        }

        /* 选择Ul里面的最后一个孩子 */
        ul li:last-child {
            color: red;
        }

        /* 选择父元素里面特定的子元素 */
        /* :nth-child(n) 里面的n可以是数字、公式、关键字 */
        /* n可以是关键字：even偶数 odd奇数 */
        ul li:nth-child(3) {
            color: blue;
        }

        /* 选择所有的偶数项 */
        ul li:nth-child(even) {
            background-color: green;
        }

        /* 选择所有的奇数项 */
        ul li:nth-child(odd) {
            background-color: yellow;
        }

        /* ol lo:nth-child(n) 这个里面必须是n,不能是其他字母，表示选择了里面所有的孩子 */
        /* ol li:nth-child(n) {
            background-color: pink;
        } */

        /* ol li:nth-child(2n) {
            background-color: pink;
        } */


        /* n从0开始计算 */
        ol li:nth-child(2n+1) {
            background-color: pink;
        }

  • 伪类选择器

  div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }


        /* 伪元素，权重为1 */
        div::before {
            /* 必须写content,这是一个行内元素，不能设置大小 */
            content: '啦啦啦啦啦啦啦';
        }

        div::after {
            content: '嘿嘿';
        }

颜色

  1. RGB：红、绿、蓝（225）

eg：rgb(11,21,200) 或 #ccc

  1. HSL yan.png

eg：hsl(31，100%，50%）

3、alpha 透明度（0-1）

rgba(11,21,200,.3)

hsla(31，100%，50%,.3)

字体属性

  • 字体样式 font-family
  • 字体大小 font-size: 16px;/* 千万要记住字体的单位为px */
  • 字体粗细：font-weight: 500; /* 实开发中多用数字，表示加粗或变细 */ 400正常 700加粗
  • 文本样式：font-style: italic; 倾斜
  • 字体的复合属性:
/* 文本样式 字体粗细 字体大小 字体样式 */
/* font:font-style font-weight font-size/line-height font-family */
/* 复合属性的前后顺序不能改变 */
    font: italic 100 200px 'Mircosoft yahei'
 /* font可以省略font-style font-weight  但是其他两个不能省略*/

文本属性

  • 颜色： color: rgb(200,0,190);
  • 对其文本：text-align: center;
  • 装饰文本
       div { 
            /* 下划线 */
            /* text-decoration: underline; */
            /* 上划线 */
            /* text-decoration: overline; */
            /* 删除线 */
            text-decoration: line-through;
        }
        a {
            /* 将下划线去掉 */
            text-decoration: none;
        }
  • 文本缩进
           /* 文本的第一行缩进的距离 */
            /* text-indent: 20px; */
            text-indent: 2em;
            /* em是一个相对单位，2em表示缩进两个文字的大小 */
avatar
文章
阅读
粉丝