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

CSS上 | 青训营前端

在页面中使用css

外链 <link rel="stylesheet" href="xxx.css"></link>
嵌入 <style> 标签名 { 样式内容 }</style>
内联（不推荐） <p style="{ color: 'blue' }">我是蓝色滴</p>

CSS工作流程图

选择器 Seletor

通配选择器 *

表示所有标签，通配选择器里的样式适用于全部元素 写法 * { 样式内容 }

标签选择器

    // 写法 标签名 { 样式内容 }
    p {
        color: blue;
        font-size: 16px;
    }

id 选择器

    // 写法 #idName { 样式内容 }
    html:
        <p id="blue">我是蓝色滴</p>
    css:
        #blue {
            color: blue;
            font-size: 16px;
        }

类选择器

    // 写法 .className { 样式内容 }
    html:
        <p class="blue">我是蓝色滴</p>
    css:
        .blue {
            color: blue;
            font-size: 16px;
        }

属性选择器 []

    html:
        <label>用户名：</label>
        <input value="zhao" disabled />
    css: 
        [disabled] {
            background: #eee;
            color: #999;
         }

组合选择器

组合名称	语法
直接组合	AB
后代组合	A B
亲子组合	A > B
兄弟选择器	A ~ B
相邻选择器	A + B

伪类选择器

伪类：不基于标签和属性定位元素

选择器组

用逗号分隔开，同时选择多个标签 p,div { 样式内容}

颜色

RGB

(red,green,blue) 数值都在 0-255

HSL

(hue 0-360 色相, saturation 0-100% 饱和度, lightness 0-100% 亮度)

透明度alpha

rbga() hsla()

alpha的值可以用数值或者百分数表示 0-1 | 0-100% ，其中1对应100%

字体族font-family

写法

body {
     font-family: Helvetica, sans-serif;  // 浏览器会根据书写的顺序一个个找
}

使用建议

字体列表最后加上通用字体族，可以保证浏览器正常显示
英文字体放置在中文字体前面，因为部分中文字体里面包含英文，为达到想要的效果应该把英文字体放在中文字体前面

使用 Web Fonts

@font-face {
    font-family: 自定义的字体名;
    src: url("该网络字体的网址") format("对应的字体名");
}

字体大小 font-size

三种写法：

关键字 large medium small
长度单位 px rem

10px 2rem  
注意： px是像素单位  rem是相对单位
body {
    font-size: 10px  // 当前的根元素字体大小为10px, 2rem = 2*10px = 20px
}

百分数相对于父元素字体的大小

字体样式 font-style

属性值有三个： normal 选择font-family的常规字体 italic 斜体 oblique 斜体

字体粗细 font-weight

属性值为100-900

注意：有时候设置字重不改变，可能是因为你选择的字体本身没变化

行高 line-height

属性值：数字、长度、百分比、关键字normal

1. 数字 2.5

该属性的应用值是这个无单位数字<数字>乘以该元素的字体大小。计算值与指定值相同。大多数情况下，这是设置line-height的推荐方法，不会在继承时产生不确定的结果。

2. 长度 3em 32px

指定<长度>用于计算 line box 的高度

3. 百分比 150%

与元素自身的字体大小有关。计算值是给定的百分比值乘以元素计算出的字体大小。百分比值可能会带来不确定的结果

4. 关键字 normal 取决于用户端。桌面浏览器（包括 Firefox）使用默认值，约为1.2，这取决于元素的 font-family

text-align

text-align CSS 属性定义行内内容（例如文字）如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐，只控制它的行内内容的对齐。

left 行内内容向左侧边对齐。
right 行内内容向右侧边对齐。
center 行内内容居中。
justify 文字向两侧对齐，对最后一行无效。
justify-all 和 justify 一致，但是强制使最后一行两端对齐。

spacing

letter-spacing 属性用于设置文本字符的间距表现

word-spacing 用于声明标签和单词直接的间距行为

text-indent 块元素首行文本内容之前的缩进量

text-decoration 文字修饰

属性值：

none: 不修饰
underline: 下划线
line-through: 删除线
overline: 上划线

white-space

处理元素中的空白

normal 连续的空白符会被合并，换行符会被当作空白符来处理
nowrap 和 normal 一样，连续的空白符会被合并。但文本内的换行无效。
pre 连续的空白符会被保留。在遇到换行符或者<br>元素时才会换行。
pre-wrap 连续的空白符会被保留。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子 (line boxes)」时才会换行。
pre-line连续的空白符会被合并。在遇到换行符或者<br>元素，或者需要为了填充「行框盒子 (line boxes)」时会换行。

CSS | 青训营笔记