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

本堂课重点内容

• 介绍CSS和CSS基础结构
  

• CSS使用方法
  

• CSS工作原理
  

• 选择器
  

• 颜色
  

• 字体
  

• CSS调试
  

CSS

CSS是什么？

- Cascading Style Sheets
- 定义页面元素的样式
     1.设置字体和颜色
     2.设置位置和大小
     3.添加动画效果

---

基础代码包含：选择器，选择器属性，属性值
选择器属性+属性值 = 声明

在页面中使用CSS方法

1.外链：css单独放在一个文件，由link标签引入页面
2.嵌入：把样式代码嵌入标签
3.内联：写在每个标签的style属性里面
推荐外链，实现内容和样式的分离

页面完整例子

CSS是如何工作的

选择器

1.通配选择器

---

2.标签选择器

---

3.id选择器：给标签设置id，id的值为唯一，选择时 # + id

---

4.类选择器：标签的class设置相同的为一类，选择时 . + class

---

5.属性选择器

    【属性】,只要元素由这个属性就被选择
    【属性=特定值】
           

       a【href^="#"】,^=表示指定开头
       a【href$=".jpg"】,$=表示指定结尾
           

---

6.伪类选择器

    i.状态性伪类
    e.g 链接的link默认，visited访问过，hover鼠标位于链接，active鼠标按下后
    

    ii.结构性伪类：根据在dom节点的位置来选中
    e.g 有序列表中first-child,last-child

---

 7.组合，选择器的各种组合

---

 8.选择器组   

颜色属性

 1.RGB(0-255)，#8fac87，rgb(143,172,135)
 2.HSL:Hue色相(0-360)，Saturation饱和度，Lightness亮度，hsl(18,12%,84%)
 3.颜色名字
 4.alpha透明度：alpha=1不透明，rgba(255,0,0,0.47)=hsla(0,100%,50%,0.47)=#ff00078

字体属性

font-family 字体样式

  设置多个字体-设备从前到后设置值字体
  英文字体写在前，中文字体在后，否则中英文全部以中文字体展示
  在设置的最后加上通用字体族
  

  可以使用Web Font
  

font-size 字号

  1.关键字 small，medium，large
  2.长度 px，em
    em为相对大小，如父级为20px，设置本级为2em 则20*2=40px
  3.百分数 相对于父元素的字体大小

font-style 风格

  Normal非斜体，Italic斜体

font-weight 字重

  normal非粗体:400，bold：700粗体，一般都有这两个

line-heigt 行高

  当没有单位时，行高为自身的多少倍，行高=1.6 自身字体的1.6倍

这些都可以写在font属性里，不需要写全，可以用默认

text-align属性

  文本排列方式 left向左对齐，right向右对齐，center居中对齐，justify分散对齐

spacing属性

text-indent属性

text-decoration属性

  none，underline，overline，linethrough，blink

white-space属性

 normal合并多个空格，nowrap不换行，pre保留所有的空格和换行，pre-wrap自动换行&保留空格，pre-line保留换行合并空格

属性值可参考www.w3school.com.cn/cssref/pr_t…

CSS调试

右键点击页面，选择“检查” ctrl+shift+I

课后总结

这节课知识点多但不难，多练习运用