CSS基础 | NightWatch

# CSS基础

W3C教程

# 背景

background背景简写顺序

background-color /*背景色*/
background-image /*图片背景*/
background-repeat /*是否重复*/
background-attachment	/*是否附着*/
background-position	/*背景图片位置*/

# 边框

每条边的样式可以单独设定

border-style /*边框样式，是必须的*/
border-width /*设置每条边的宽度*/
border-color /*设置每条边的颜色*/
border-top-style: dotted; /*指定每个边框的样式*/

简写属性

border: 5px solid red;

简写单条边属性

border-left: 6px solid red;

圆角边框

border-radius: 5px;

# 高度/宽度

height和width可设置为一下值：

auto：浏览器默认计算
length：以px、cm等计算
%：百分比
initial：默认值
inherit：从父元素继承

浏览器窗口变化时：

max-width: 设置元素的最大宽度，内容区域大于该宽度时，会自动收缩，改善对小窗口的处理

min-width：设置元素最小宽度，内容区域小于该宽度时，会自动扩展

# 轮廓

轮廓实在元素周围绘制一条线，在边框之外，以凸显元素

ouline
outline-style
outline-color
/*thin 1px,medium 3px,thick 5px*/
outline-width:thin; 
/*轮廓偏移*/
outline-offset

注：outline属性不能为每条边单独设置

# 文本(重要)

文本颜色，color属性

# 文本对齐

文本水平对齐

text-align:left; /*水平对齐方式*/
text-align:justify; /*拉伸每一行，使得每一行具有相同宽度*/

文本垂直对齐

vertical-align:top;

文本方向

direction
unicode-bidi

文本装饰，text-decoration下划线、上划线、删除线
文本大小写转换text-transform

# 文字间距

/*文本缩进*/
text-indent:50px;
/*字符之间的间距*/
letter-spacing: 3px;
/*行高*/
line-height:0.8;
/*单词间距*/
word-spacing：10px;
/*空白*/
white-space：nowrap;
/*文本阴影效果，水平，垂直*/
text-shadow:2px 2px;

# 字体

# 5个通用字体族

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感。
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观。
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观。
草书字体（Cursive）- 模仿了人类的笔迹。
幻想字体（Fantasy）- 是装饰性/俏皮的字体。

# 字体配置

/*以需要的字体开始，以通用的字体结束*/
font-family: "Times New Roman", Times, serif;
/*指定斜体*/
font-style: italic;
/*字体粗细*/
font-weight: bold;

# 字体大小

/*像素设置字体大小*/
font-size: 40px;
/*使用em设置,1em默认为16px*/
font-size：1em;
/*响应式单位vm,1vm为视口宽度的1%*/
font-size: 10vw;

# 简写属性font

font-style
font-variant
font-weight
font-size/line-height 必须
font-family 必须

# 图标

使用图标库，通过CSS设置

# 链接

四种链接状态：

a:link,未访问的链接
a:visited,用户访问过的链接
a:hover,用户鼠标悬停时
a:active：链接被点击时

# 列表

在使用简写属性时，属性值的顺序为：

list-style-type（如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值）
list-style-position（指定列表项标记应显示在内容流的内部还是外部）
list-style-image（将图像指定为列表项标记）

# 表格

/*表格边框*/
border: 1px solid black;
/*合并表格边框*/
border-collapse: collapse;
/*表格对齐*/
text-align: center;
vertical-align: bottom;

水平分割线

border-bottom: 1px solid #ddd;

条状表格

tr:nth-child(even) {background-color: #f2f2f2;}

# CSS中级教程

# 元素排版

# display布局方式

display属性

值	描述
none	此元素不显示
block	显示为块级元素
inline	默认，显示为内联元素
inline-block	行内块
table	块级表格
inherit	继承父元素的属性

visibility属性

值	描述
visible	默认可见
hidden	不可见
collapse	表格中使用可删除一行或一列
inherit	继承父元素

# grid布局

基本概念：网格行、网格列、网格间隙、网格线

grid容器：

grid-template-columns 定义列数和每列宽度，auto为相同宽度
grid-template-rows 定义行数和每行高度，auto为相同高度
justify-content 容器内对齐整个网格
align-content 垂直对齐

grid元素：

grid-column 定义项目在哪一列

grid-column: 1 / 5; //1-5列之间
grid-column: 1 / span 3; //第一列开始跨越三列

grid-row 定义项目在哪一行

grid-row: 1 / 4; // 1-4行之间
grid-row: 1 / span 2; // 第一行开始跨越两行

grid-area 范围简写:行开始、列开始、行结束、列结束

grid-area: 1 / 2 / 5 / 6;
grid-area：myArea;//为网格项目分配名称
grid-template-areas: 'myArea myArea myArea myArea myArea';//在容器中使用

# position定位

static 正常文档流
relative 相对于元素自身位置
fixed 相对于视口
absolute 绝对定位，相对于最近的定位祖先元素
sticky 根据用户的滚动位置进行定位

# overflow溢出

overflow属性：

visible 溢出不会剪裁，内容会在元素框外渲染
hidden 溢出被裁减，其余内容不可见
scroll 溢出被裁减，其余内容滚动可见
auto 溢出的时候添加滚动条

overflow-x 控制水平

overflow-y 控制垂直

# float浮动和清除

float ： left|right|none

clear：

none 允许两侧都有浮动元素
left 左侧不允许浮动元素
right 右侧不允许浮动元素
both 左右均不允许浮动元素

设置clear的元素会在下方显示

如果一个元素比包含它的元素高，并且是浮动的，它将溢出到其容器外

使用overflow:auto解决
clearfix 添加伪元素解决

.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

# box-sizing

允许在元素的总宽度和高度中包括内边距和边框

box-sizing: border-box;

# display:inline-block

允许元素设置宽高

# 对齐

居中对齐元素：margin:auto；需要设置width
居中对齐文本：text-align:center；需要设置width
居中对齐图像

img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}

左右对齐position

.right {
  position: absolute;
  right: 0px;
  width: 300px;
}

左右对齐float

.right {
  float: right;
  width: 300px;
}

垂直对齐padding
垂直对齐line-height=height
垂直对齐position和transform

.center { 
  height: 200px;
  position: relative;
  border: 3px solid green; 
}

.center p {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

垂直对齐使用flex

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green; 
}

总结：

水平对齐：margin、text-align、float、position
垂直对齐：padding、line-height、position、flex

# 选择器

# 组合器

后代选择器（空格）
子选择器（>）
相邻兄弟选择器（+）
通用兄弟选择器（~）

# 伪类：

伪类用于定义元素的特殊状态

选择器	例子	例子描述
:active	a:active	选择活动的链接
:link	a:link	选择未访问的链接
:visited	a:visited	选择所有已访问的链接
:hover	a:hover	选择鼠标悬停时的链接
:focus	input:focus	获得焦点的input元素
:first-child	p:first-child	选择作为父元素第一个元素的p元素
:nth-child(2)	p:nth-child(2)	选择作为父元素第二个元素的p元素
:valid	input:valid	选择所有具有有效值的input元素

# 伪元素：：

伪元素用于设置元素指定部分的样式

选择器	例子	例子描述
::after	h1::after	h1元素后添加内容
::before	h1::before	h1元素前添加内容
::first-letter	p::fisrt-letter	向文本的首字母添加特殊样式
::first-line	p::first-line	为所有p元素的首行添加样式
::selection	::selection	匹配用户选择的元素

# 常用组件原理

# 导航栏

导航栏就是链接列表

页面

<ul>
  <li><a href="index.asp">Home</a></li>
  <li><a href="news.asp">News</a></li>
  <li><a href="contact.asp">Contact</a></li>
  <li><a href="about.asp">About</a></li>
</ul>

垂直导航栏

/*从列表删除项目符号以及内外边距*/
ul {
    list-style-type:none;
    margin: 0;
    padding: 0;
    width: 200px;
  	background-color: #f1f1f1;
}
/*垂直导航栏*/
li a {
    display:block; /*整个链接区域都可以被单击*/
    width: 60px;
    padding:8px 16px;
    text-decoration: none;
}
/*鼠标悬停改变颜色*/
li a:hover{
    background-color:#555;
    color:white;
}

水平导航栏：行内或者浮动

li {
    display:inline;
}

# 下拉菜单

通过hover和display实现

# 计数器

用于多集目录编号

# 图片库

图像精灵

绝对定位
visible
伪元素实现箭头

# 按钮

# 分页器

# css特异性

特异性计算方法：

内联 1000
ID 100
属性、类、伪类 10
元素名称、伪类 1

特异性规则：

特异性相同，应用最新的规则
ID选择器比属性选择器特异性更高
类选择器比元素选择器特异性更高
style标签比外部样式表更具体

# CSS3高级教程

# 美化效果

# border-radius圆角

border-radius可以接收一到四个值：

四个值：左上、右上、右下、左下
三个值：左上、（右上、左下）、右下
两个值：（左上、右下）、（右上、左下）
一个值：四个角

椭圆角：

border-radius: 50px / 15px;

# border-image边框图像

属性有五部分：

用作边框的图像
边框向内偏移
图像边框的宽度，超过50的话，边线就消失了
定义中间部分重复还是拉伸

border-image: source slice width outset repeat|initial|inherit;

# 背景

background-clip 背景绘制区域(其他区域不显示)
background-origin 背景图像放置位置

# 多重背景

background-image添加多个背景，不同背景用逗号分开，第一幅图像最靠近观察者

#example1 {
  background-image: url(/i/photo/flower.gif), url(/i/paper.jpg);
  background-position: right bottom, left top;
  background-repeat: no-repeat, repeat;
  padding: 15px;
}

也可以通过background简写

# 背景尺寸

长度、百分比
contain 宽高<=内容区域
cover 宽高>=内容区域

# 渐变

两种渐变类型：

线性渐变（向下/向上/向左/向右/对角线）,默认从上到下

/*语法*/
background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

background-image: linear-gradient(to bottom right, red, yellow); /*向右下*/ background-image: linear-gradient(to right, red, yellow);/*向右*/ 
background-image: linear-gradient(45deg,red,yellow);/*使用角度*/
background-image: linear-gradient(to right,rgba(255,0,0,0),rgba(255,0,0,1)); /*使用透明度*/

径向渐变（由其中心定义），默认shape为椭圆，size为最远角，position为中心
- shape：circle、ellipse
- size：渐变的大小，即渐变到哪里停止

/*语法*/
background-image: radial-gradient(shape size at position, start-color, ..., last-color);
background-image: radial-gradient(red, yellow, green);/*从中心开始*/
background-image: radial-gradient(circle, red, yellow, green); /*圆形渐变*/

# 阴影

在文本和元素上添加阴影

text-shadow

text-shadow:2px 2px; //指定水平阴影和垂直阴影
text-shadow:2px 2px red; //添加颜色
text-shadow:2px 2px 3px red; //添加模糊

box-shadow类似

# 文本效果

text-overflow 文字溢出，裁减或省略

text-overflow：clip;
text-overflow: ellpsis;

word-wrap 长文字被折断并换行到下一行

word-wrap: break-word;

word-break 指定换行规则

word-break: keep-all; //连字符处打断
word-break: break-all; //任何位置打断

# 网络字体

在@font-face定义字体

TrueType（TTF）windows、mac操作系统常用字体
OpenType (OTF) 可缩放
WOFF 2009年开发，是W3C推荐标准，本质是压缩OTF、TTF并添加元数据
WOFF 2.0 提供更好的压缩

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

# CSS动画

# 2D转换

CSS transform属性，允许移动、旋转、缩放、倾斜元素

transform: translate(50px, 100px);// 向右移动50px，向下移动100px
transform: rotate(20deg); // 顺时针旋转20度
transform: rotate(-20deg); // 逆时针旋转20度

transform: scale(2, 3); //宽变为2倍，高变为3倍
transform: scaleX(2); //宽变为2倍
transform: scaleY(0.5); //高变为0.5倍

transform: skew(20deg,10deg) //沿着x轴，y轴倾斜
transform: skewX(20deg); // 沿着x轴倾斜

// x缩放、y倾斜、x倾斜、y缩放、x平移、y平移
transform: matrix(1, -0.3, 0, 1, 0, 0);

# 3D转换

3D转换方法

transform: rotateX(150deg); //绕x轴旋转150度
transform: rotateY(130deg); //绕y轴旋转
transform: rotateZ(130deg); //绕z轴旋转

3D变换属性：

transform-origin 改变元素位置
transform-style 子元素在3D空间的显示
perspective：观察者与z=0平面的距离，值越小，视角越深，子元素获得透视效果
perspective-origin：x-positon y-position；3D元素的底部位置,透视点在该元素的位置

# 过渡（属性变化）

首先确定添加效果的CSS属性，以及效果的持续时间

transition：属性和持续时间
transition-property：要添加过渡效果的属性
transition-duration：持续时间
transition-delay：过渡效果的延迟（s）

transition: width 2s
transition: width 2s, height 2s, transform 2s; // 过渡+转换
transition: width 2s linear 1s; // 简写：属性、持续时间、函数、延迟

transition-timing-function：过渡时间函数
- ease 缓慢开始，先加速，后减速
- ease-in 缓慢开始
- ease-out 缓慢结束
- ease-in-out 开始和结束较慢
- linear 线性
- cubic-bezier 自定义

# 动画（样式变化）

@keyframes 定义关键帧样式
animation-name 动画名称，需要绑定在某个元素上
animation-duration 持续时间
animation-delay 延迟
animation-iteration-count 动画运行次数，infinite无限循环
animation-direction 动画向前播放、向后播放、交替播放
animation-timing-function 和过渡中的速度曲线类似
animation-fill-mode 不播放动画时元素的样式
animation 属性简写

实例

/* 动画代码 */
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

/* 向此元素应用动画效果 */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

# 多列

column-count 规定元素被划分的列数
column-gap 规定列之间的间隔
column-rule 分割线样式

# 变量

var()函数,用于插入CSS变量的值，复用颜色，易于修改

/*全局变量*/
:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  --blue: #0000ff;
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

可以使用JS访问CSS变量

# 媒体查询

CSS2引入了@media规则

媒体类型：

值	描述
all	所有媒体类型
print	打印机
screen	计算机屏幕、平板、智能手机
speech	屏幕阅读器

媒体查询语法：

@media not|only mediatype and (expressions) {
  CSS-Code;
}

实例

@media screen and (min-width:480px){
    body {
        background-color:lightgreen;
    }
}

# flexbox

flex容器属性：

flex-direction 堆叠方向，默认从左到右
flex-wrap 是否换行
felx-flow 是上面两个属性的简写
justify-content 主轴对齐
- center 居中
- flex-start 从容器开始
- flex-end 从容器结束
- space-around 前后、之间有空格
- space-between 之间有空格
align-items 次轴对齐
- center 居中
- flex-start
- flex-end
- baseline 文本基线对齐
align-content 多行的时候纵向对齐方式

子项目属性：

order flex项目的顺序
flex-grow 相对其他项目增长多少
flex-shrink 相对其他项目收缩多少
flex-basis flex项目初始长度
flex
align-self 规定单个项目的对齐方式

← ♥前端技术体系♥ Sass →

# CSS基础

# 背景

# 边框

# 高度/宽度

# 轮廓

# 文本(重要)

# 文本对齐

# 文字间距

# 字体

# 5个通用字体族

# 字体配置

# 字体大小

# 简写属性font

# 图标

# 链接

# 列表

# 表格

# CSS中级教程

# 元素排版

# display布局方式

# grid布局

# position定位

# overflow溢出

# float浮动和清除

# box-sizing

# display:inline-block

# 对齐

# 选择器

# 组合器

# 伪类：

# 伪元素：：

# 常用组件原理

# 导航栏

# 下拉菜单

# 计数器

# 图片库

# Tooltip

# 按钮

# 分页器

# css特异性

# CSS3高级教程

# 美化效果

# border-radius圆角

# border-image边框图像

# 背景

# 多重背景

# 背景尺寸

# 渐变

# 阴影

# 文本效果

# 网络字体

# CSS动画

# 2D转换

# 3D转换

# 过渡（属性变化）

# 动画（样式变化）

# 多列

# 变量

# 媒体查询

# flexbox