这是我参与「第四届青训营 」笔记创作活动的的第2天
css简介
- 全称Cascading Style Sheets，层叠样式表，主要负责字体大小、颜色、字体等
- 构成：选择器 + {属性名：属性值 }
引入：
- 外链：
<link ref="stylesheet" href="……" > - 嵌入：
<style> …… </style> - 内联：
<a style="……" href="……">
选择器
- 通配符选择器
- 标签选择器
- id选择器：页面中要唯一
- 类选择器：同类型的
- 属性选择器：[disabled] /input[type = 'password'] (特定类型)/a[href$=".jpg"] (匹配)
- 伪类选择器：特定状态
a:link (默认状态) a:vistited(点击过) a:hover(鼠标悬浮) a:active(点击) input:focus(聚焦)
选择器优先级
- id:1 （伪类）：1 标签：1 （可叠加）
- 有相同类若再加类就可实现特殊的效果
- 字元素没有某样式就会继承父元素（文本、列表、表格等 详见此博客（点击）） 显式继承： xxx:inherit (jiejue)
- 初始值：css元素都有初始值，例如background-color是transparent 等同于initial
颜色
- HSL：Hue色相（0-360）调颜色，Saturation饱和度（0-100%）越高越鲜艳，Lightness亮度（0-100%）越高颜色越亮
- alpha透明度 ： 1不透明 （#……ff rgba/hsl( 0.……) ）
新学到的知识
- border: 可按照方向设置颜色宽度
- border-width/border：……… ……… （同padding）
- border-color/border-top-color/border-left(整体)
画三角
- 宽为0，只用border宽度撑起，设置其他方向border为透明即可
<div id="triangle"></div>
#triangle {
width: 0;
border-width: 30px;
border-style: solid;
border-color: blue transparent red green;
}
margin collapse
1.两个div分别设置margin-bottom和margin-top,取两者间最大值
box-sizing:border-box(标准盒模型)
- 可见大小、内容包含宽高border、padding
- overflow: visible(默认，会溢出)/ hidden(超出隐藏)/scroll(超出就滚动)
- inline-block: 本身是行级，可并列，设置宽高
css的工作过程
- 由上图可知，css在html解析成DOM树时工作，主要功能就是给DOM元素修改样式，就像人的衣服一样。
font-family使用建议
- 字体列表最后写上通用字体族
- 通用字体族：
-
英文字体放在中文字体前面
-
font:粗细 大小/行高 字体族
-
文字对齐text-align:left right center justify(两端对齐)
-
space:
-
worde-space是增加或减少单词之间的空白，即字间距。例如：word^^^list
-
letter-space是增加或减少字符间的空白，即字符间距。w^o^r^d
- white-space: nowrap(不换行) pre-line(去空格换行) pre：保留原来所有空格
课后资料: css
