item2
标签新建标签：command + t 关闭标签：command + w 切换标签：command + 数字 command + 左右方向键 切换全屏：command + enter 查找：command + f 分屏垂直分屏：command + d 水平分屏：command + shift + d 切换屏幕：command + option + 方向键 command + [ 或 command + ] 查看历史命令：command + ; 查看剪贴板历史：command + shift + h 其他清除当前行：ctrl + u 到行首：ctrl + a 到行尾：ctrl + e 前进后退：ctrl + f/b (相当于左右方向键) 上一条命令：ctrl + p 搜索命令历史：ctrl + r 删除当前光标的字符：ctrl + d 删除光标之前的字符：ctrl + h 删除光标之前的单词：ctrl + w 删除到文本末尾：ctrl + k 交换光标处文本：ctrl + t 清屏1：command + r 清屏2：ctrl + l 自带有哪些很实用的功能/快捷键...
02 创建项目
1 创建项目1.1. maven设置 配置maven的Aliyun镜像和jdk版本 1234567891011121314151617181920212223<mirrors> <mirror> <id>nexus-aliyun</id> <mirrorOf>central</mirrorOf> <name>Nexus aliyun</name> <url>http://maven.aliyun.com/nexus/content/groups/public</url> </mirror> </mirrors> <profiles> <profile> <id>jdk-1.8</id> <activation> ...
01 简介
什么是 CSSCSS全称为Cascading Style Sheets，译为层叠样式表。样式定义如何显示HTML元素。样式通常存储在样式表中。 CSS 是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统 HTML 的表现而言，CSS 能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。 发展历史从 1990 年代初 HTML 被发明开始，样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的 HTML 版本只含有很少的显示属性，读者来决定网页应该怎样被显示。 但随着 HTML 的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。 1994 年哈坤·利提出了 CSS 的最初建议。伯特·波斯（Bert Bos）当时正在设计一个叫做“Argo”的浏览器，他们决定一起合作设计 CSS。 当时已经有过一些样式...
02 使用方法
第一种内联样式通过HTML元素的style属性来设置CSS样式，语法如下: 1style="css属性:css属性值;" 示例代码: 12345678910<!DOCTYPE html><html> <head> <title>01_第一种使用方式.html</title> </head> <body> <!-- style="css属性:css属性值;" --> <div style="color:red;" >atguigu</div> </body></html> 第二种内联样式通过HTML页面的style元素来设置CSS样式，语法如下: 12345<style type="text/css"> 选择器 { 属性名 : 属性值; }</style> 示例代码: 12345678910...
03 盒子模型
什么是盒子模型盒子模型，也可以称为框模型。 所有 HTML 元素可以看作盒子。在 CSS 中，”box model” 这一术语是用来设计和布局时使用。 CSS 盒模型本质上是一个盒子，封装周围的 HTML 元素，它包括：边距，边框，填充，和实际内容。 不同部分的说明: Margin（外边距）: 清除边框区域。Margin没有背景颜色，它是完全透明。 Border（边框）: 边框周围的填充和内容。边框是受到盒子的背景颜色影响。 Padding（内边距）: 清除内容周围的区域。会受到框中填充的背景颜色影响。 Content（内容）: 盒子的内容，显示文本和图像。 为了在所有浏览器中的元素的宽度和高度设置正确的话，你需要知道的盒模型是如何工作的。 元素的宽度和高度下面的例子中的元素的总宽度为 300px: 1234width:250px;padding:10px;border:5px solid gray;margin:10px; 完整的 HTML 代码如下: 1234567891011121314151617181920212223<!DOCTYPE html>&...
04 语法格式
语法格式1选择器 {属性名称 : 属性值; 属性名称 : 属性值;...} 语法特点: CSS声明总是以键值对(key\value)形式存在。 CSS声明总是以分号(;)结束。 声明组以大括号({})括起来。 为了让CSS可读性更强，每行只描述一个属性。 CSS 注释注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它。CSS注释以 /* 开始, 以 */ 结束。 1234567<style type="text/css"> /* 这是一个注释 */ div { /* 这是另一个注释 */ color : red; }</style> 值得注意的问题值的不同写法和单位例如在设置字体颜色时，以下几种方式效果相同。 第一种方式 1#show1 {color : red;} 第二种方式 1#show2 {color : #ff0000;} 像上面这种使用十六进制设置颜色时，如果两两相同，可以写成如下格式: 1#show2 {...
05 选择器
元素选择器元素选择器就是通过 HTML 页面的元素名称来设置 CSS 样式。具体语法如下: 1元素名称 { 属性名 : 属性值; } 示例代码: 1div {color : red; } 类选择器类选择器就是通过 HTML 元素的 class 属性值来设置 CSS 样式。具体语法如下: 1.class属性值 { 属性名 : 属性值; } 示例代码: 1.myDiv {color : red; } ID选择器ID选择器就是通过 HTML 元素的 id 属性值来设置 CSS 样式。具体语法如下: 1#id属性值 { 属性名 : 属性值; } 示例代码: 1#show1 {color : red; } 属性选择器属性选择器就是通过 HTML 元素的属性名称来设置 CSS 样式。具体语法如下: 1[属性名称] { 属性名 : 属性值; } 示例代码: 1[name] {color : red; } 选择器 描...
06 位置
CSS 的 position 定位属性允许自定义元素在 HTML 页面的位置，但需要先开启元素在 HTML 页面中的定位。 值得注意的是: 元素在 HTML 页面中默认是不开启定位的。 CSS 定位属性提供了四种方式的定位效果: static: 默认值，表示元素为静态定位。 absolute: 表示元素为绝对定位。 fixed: 表示元素为固定定位。 relative: 表示元素为相对定位。 当设置元素的 position 定位属性为非默认值时，CSS 提供了上、右、下和左四个方向的偏移量完成元素的位置设置。 top: 表示当前元素到上边的距离。 right: 表示当前元素到右边的距离。 bottom: 表示当前元素到下边的距离。 left: 表示当前元素到左边的距离。 绝对定位 属性值 描述 absolute 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。 元素开启绝对定位后，与浮动效果类似: 元素会脱离文档流。 元...
07 伪类
CSS 伪类用于向某些选择器添加特殊的效果。 属性 描述 :active 向被激活的元素添加样式。 :focus 向拥有键盘输入焦点的元素添加样式。 :hover 当鼠标悬浮在元素上方时，向元素添加样式。 :link 向未被访问的链接添加样式。 :visited 向已被访问的链接添加样式。 :first-child 向元素的第一个子元素添加样式。 锚伪类1234a:link {color: #FF0000} /* 未访问的链接 */a:visited {color: #00FF00} /* 已访问的链接 */a:hover {color: #FF00FF} /* 鼠标移动到链接上 */a:active {color: #0000FF} /* 选定的链接 */ :first-child伪类1p:first-child {font-weight: bold;} 选择器的优先级在实际开发中，经常会为同一个标签设置多个样式。使用不同方式的选择器，由...
08 可见性
CSS 中的 display 和 visibility 都可以设置一个元素在浏览器中的显示或隐藏效果。 display: 隐藏某个元素时，不会占用任何空间。换句话讲，不会影响布局。 visibility: 隐藏某个元素时，仍需占用与未隐藏之前一样的空间。换句话讲，会影响布局。 display 属性 属性值 描述 none 此元素不会被显示。 当将一个元素的 CSS 属性 display 设置为 none 时，该元素会被隐藏。并且被隐藏的元素不会占用 HTML 页面的任何空间。 在 HTML 页面中定义两个 <div> 标签，并设置 CSS 样式，具体代码如下: 1234567891011121314151617181920212223<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> #d1 { ...
