持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第26天，点击查看活动详情
引言
这两天给大家带来css的学习，两篇大概三千字，带你学习css的样式，布局等操作
使用css 三种方法:
1 -> 外链
2 -> 嵌入
3 -> 内联
h1 {
color:orange;
font-size:24px;
}
p{
color: gray;
font-size: 14px;
line-height: 1。8;
}
选择器 -- Selector
选择器 Selector
id选择器，类选择器，属性选择器，伪类,通配选择器.......
属性:属性值 ';' -> 隔开，声明 组成一个声明块
找出页面中的元素，以便给他们设置样式
使用多种方法选择元素
按照标签名，类名或者id选择元素
按照属性
按照DOM树的位置
通配选择器
*
匹配任意标签名
匹配任意类名
匹配任意id
id选择器
小例子
#logo {
font-size: 60px;
font-weight: 200;
/* font-weight 粗细 */
}
/* 类选择器 */
/* class */
.done {
color: gray;
text-decoration: line-through;
/* 字被中间划死 */
/* decoration -> 装饰 */
}
/* 属性选择器 */
/* 例如 input的一个属性 disabled 禁止输入 */
[disabled] {
background-color: #eee;
color: #ccc;
}
/* 属性选择器 属性特定值演示 */
input[type="password"] {
border-color: red;
color: red;
}
/* 属性选择器 匹配性的选择 */
a[href^="#"] {
/* ^= 如果以xxx开头就会被匹配到 */
color: #f54767;
background: 0 center/lem
url() no-repeat;
padding-left : 1.1em;
}
a[href$=".jpg"] {
/* ^= 如果以xxx结尾就会被匹配到 */
color: deepskyblue;
background: 0 center/lem
url(a.jpg) no-repeat;
padding-left : 1.1em;
}
伪类 pseudo-classes
不基于标签和属性定位元素 几种伪类 状态伪类 结构性伪类 / / 比如链接 有访问过的，鼠标划过的...... / / 初始 */
a:link {
color: aqua;
}
/* 访问过 */
a:visited {
color: gray;
}
/* 鼠标移到 */
a:hover {
color: red;
}
/* 鼠标按下 */
a:active {
color: blue;
}
/* 输入框 链接也生效了 */
/* focus 聚焦到输入框 */
:focus {
outline: 2px solid orange;
/* 边框 */
}
/* 结构伪类 */
li {
list-style-position: inside;
border-bottom: 1px solid;
padding: 0.5em;
}
li:first-child {
color: red
}
li:last-child {
border-bottom: none;
/* 无下划线 */
color: blue;
}
/* 组合 */
.error{
color: red;
}
/* 又 input 又 error */
input.error {
border-color: blue;
padding-left: 100px;
padding-bottom: 100px;
}
div {
border-color: #f54767;
border-style: solid;
width: 200px;
height: 200px;
}
span {
border: rebeccapurple;
border-style: solid;
width: 100px;
height: 100px;
display: block;
}
组合 Combinators
名称 语法 说明 示例
直接组合 AB 满足A同时满足B input.error, a.error
后代组合 A B 选中B，如果他是A的子孙 nav a b 在 a里面 只要所有的a标签 出现在 nav下面 不管隔了多少级 都会被选中
亲子组合 A>B 选中B，如果他是A的子元素 section>p 必须直接
兄弟选择器 A~B 选中B，如果他在A后且和A同级 h2~p 同级 同一个父级 并列
相邻选择器 A+B 选中B，如果他紧跟A后面 h2+p 紧跟着的兄弟选择器
选择器组
小例子
body,h1,h2,h3 {
margin: 0; 内边距
padding: 0; 外边距
}
[type="checkbox"],[type="radio"] {
display: inline-block;
margin-right: 0.5em;
margin-left: 0.5em;
}
RGB 颜色 表示
1 #xxxxxx 十六进制 2 rgb(x,y,z) x,y,z 分别是RGB的值 0-255
颜色 HSL
色相 Hue 色彩的基本属性 取值 0-360 饱和度 Saturation 取值 0-100% 亮度 Lightness 取值 0-100% 使用 -> hsl(色相,饱和度,亮度)
alpha 不透明度
基于之前的第四拓展 例如： #xxxxxx75 rgba(x,y,z,a) x,y,z 分别是RGB的值 0-255 a是不透明度 0-1 hsla(色相,饱和度,亮度,a) 色相,饱和度,亮度 分别是0-360 a是不透明度 0-1
一些字体的css知识
字体 -> font-family
h1 {
font-family: Optima,Georgia,serif; 指定多个字体 前面没有找后面 这几个是通用的字体族
}
Serif 衬线体
Sans-serif 无衬线体
Cursive 手写体
Fantasy 夸张
Monospace 等宽字体
=========================
指定Web Fonts
@font-face {
font-family: 'Optima';
src: url('');
format('');
}
缺点:可能性能上来渲染
中文：可能会裁切，用不到的。。。。。
字体大小 -> font-size
关键字
small
medium
large
长度
px
em
em是基于字体大小的单位，1em是一个字体大小的1/16 相对
百分数
相对于父元素字体大小
%
字体样式 -> font-style
斜体:italic
粗体:bold
加粗和斜体:bold italic
无:normal
字体粗细 -> font-weight
字体颜色 -> color
字体下划线 -> text-decoration
一些特殊字符
空格  
制表符 -> &tab;
换行 -> &br;
回车 -> &cr;
换页 -> &lf;
删除线 -> &del;
字体对齐 -> text-align
字体对齐 -> text-align
left
right
center
justify
justify-all
start
end
left 把文本排列到左边。默认值：由浏览器决定。 right 把文本排列到右边。 center 把文本排列到中间。 justify 实现两端对齐文本效果。 inherit 规定应该从父元素继承 text-align 属性的值。
字体行高 -> line-height
行高 -> 两条文字间的一个基准线之间的一个距离
使用一个没有单位的数字来表示行高，默认是1.2em .
比如1.6 原本的多少倍.
字节也是很推荐的 很直观的.
字体行间距 -> letter-spacing
字体字间距 -> word-spacing
white-space
normal 默认值，文本不会换行。
nowrap 文本不会换行
pre 保留所有的，原本的
pre-wrap 保留空格 自动换行
pre-line 保留空格 自动换行
