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

了解CSS

什么是CSS

CSS用来定义页面元素的样式，可

设置字体和颜色
设置位置和大小
添加动画效果

使用CSS

CSS有三种使用方式

外链

<link rel="stylesheet" href="style.css">

嵌入

<style>
    p {
        color: pink;
        line-height: 15px;
    }
</style>

内联

<p style = "font-size: 20px;">段落</p>

CSS是怎样工作的

调试CSS

右键点击页面，选择检查
使用快捷键
- Windows Ctrl + Shift + I
- Mac Cmd + Opt + I

选择器

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

通配选择器

用 * 代指所有标签

* {
  margin: 0;
  padding: 0;
}

标签选择器

html中已有标签名作为选择器名称，格式：标签名{ }

a {
  text-decoration: none;
  color: #333;
}

id选择器

把标签中id属性的属性值作为选择器名称，格式：#id属性值{ }
注意：id选择器只能使用一次

#header{
    margin: 30px auto;
    height: 70px;
    background-color: pink; 
}

类选择器

把标签中class属性的属性值作为选择器名称，格式：.class属性值{ }
注意：类选择器能使用多次

.banner{
    height: 500px;
    background-color: #f5f5f5;
}

属性选择器

[属性] {}
标签[属性="属性值"]{}
标签[属性^="以此开头"]{}
标签[属性$="以此结尾"]{}

[disabled] {
  background: #eee;
  color: #999;
}
input[type="password"] {
  border-color: red;
  color: red;
}
a[href^="#"] {
  
}
a[href$=".jpg"] {
  
}

伪类选择器

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

a:hover {
  color: orange;
}

li:first-child {
  
}

li:last-child {
  
}

选择器组合

选择器组

用,隔开，多种选择器构成选择器组

body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,dl,dt,dd,input {
  margin: 0;
  padding: 0;
}

文本样式

颜色

#000000采用16进制，前两位表示红，中间两位表示绿，最后两位表示蓝
rgb(0,0,0)采用二进制，分别表示红，绿，蓝
hsl(0,100%,100%)H色相（0-360），S饱和度（0-100%），L亮度（0-100%）
透明度：在原有表示基础上，再加上一位，如#00ff00ff，rgba(0,255,0,1)，hsla(0,50%,50%,0.5)

字体

font-family字体

部分通用字体族如下：

使用建议：字体列表最后写上通用字体族，英文字体放在中文字体前面

补充：还可以引用其他字体，需加入url

@font-face {
    font-family: "Megrim";
    src: url(https://fonts.gstatic.com/s/megrim/v11/46kulbz5WjvLqJZVam_hVUdI1w.woff2) format('woff2');
  }

font-size字号

关键字：small,medium,large
长度：px,em
百分数：相对于父元素字体大小

font-style字形

font-style: normal
font-style: italic斜体

font-weight字重

font-weight，取值100-900间的整百数，其中400对应normal，700对应bold

line-height行高

line-height取值不加单位为字号的倍数，加单位px为像素

font整体书写

文本

text-align文字对齐

text-align取值left左对齐，center居中，right右对齐，justify两端对齐

spacing间距

letter-spacing字母之间的间距
word-spacing单词之间的间距

text-indent文本缩进

text-indent单位px

text-decoration文本修饰

text-decoration取值：none，underline（下划线），line-through（中划线），overline（上划线）

white-space文本空白处理

normal默认，忽略空白
nowrap忽略空格，文本不会换行
pre保留空白
pre-wrap保留空白，可正常换行
pre-line合并空白，保留换行

了解CSS | 青训营笔记