一、什么是 CSS
1. CSS
- Cascading Style Sheet 层叠样式表。
- CSS：表现（美化网页）。
- 字体、颜色、边距、高度、宽度、背景图片、网页定位、网页浮动...
2. CSS 发展史
- CSS 1.0：1994年10月提出；
- CSS 2.0：DIV（块）+ CSS，HTML与 CSS 结构分离的思想，网页变得简单，SEO；
- CSS 2.1：浮动，定位；
- CSS 3.0：圆角、阴影、动画…浏览器兼容性。
3. 快速入门
CSS3快速入门
CSS样式 h1标题
- 建议使用这种规范（单独写一个 css 文件，用 link 标签引入 css 文件效果） 。
CSS 的优势：
- 内容和表现分离；
- 网页结构表现统一，可以实现复用；
- 样式十分的丰富；
- 建议使用独立于 html 的 css 文件；
- 利用 SEO，容易被搜索引擎收录！
CSS 的 3 种常用导入方式：
- 行内样式
- 内部样式
- 外部样式
- 优先级：就近原则（1. 行内样式 2. 内部样式哪个离元素更近 ）
CSS3快速入门
CSS3测试
拓展：外部样式两种方法。
- 链接式（推荐）：HTML
- 导入式（不推荐使用）：@import 是 CSS 2.1 特有的。
二、CSS 选择器（重点）
- 作用：选择页面上的某一个，或者某一类元素。
1. 基本选择器
01、标签选择器：选择一类标签。
- 格式：标签名{}
标签选择器
标签选择器
前端-CSS3
Android
02、类选择器 class：选择所有 class 一致的标签，可以跨标签。
- 格式：.类名{}
类选择器
类选择器：Test01
类选择器：Test02
类选择器：Test03
类选择器：Test04
03、id 选择器：全局唯一
- 格式：#id名{}
id选择器
标题1
标题2
标题3
标题4
- id 选择器优先级：id > class > 标签。
2. 层次选择器
-
01、后代选择器：在某个元素的后面（所有的选择标签）；
/*后代选择器*/ body p { background: deeppink; } -
02、子选择器：一代（只包含下一级）；
/*子选择器*/ body > p { background: #0ecbb6; }
-
03、相邻的兄弟选择器：同辈（只选择一个，相邻且向下）；
/*相邻兄弟选择器：只选择一个,相邻向下*/ .active + p { background: #f1e889; } -
04、通用选择器：当前选中元素的 向下 的 所有兄弟元素。
/*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/ .active ~ p { background: #ff741e; }
层次选择器
p0
p1
p2
p3
p4
p5
p6
3. 结构伪类选择器
伪类：条件
/*ul的第一个子元素*/
ul li:first-child {
background: orange;
}
/*ul的最后一个子元素*/
ul li:last-child {
background: darkcyan;
}
/*
选中 p1：定位到父元素,选择当前的第一个元素选择当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！（顺序，会受到其它标签影响）
*/
p:nth-child(2) {
background: greenyellow;
}
/*选中父元素下的第二个p元素，按类型（不会受其它标签影响）*/
p:nth-of-type(2) {
background: lightseagreen;
}
结构伪类选择器
超链接
p1
p2
p3
- li1
- li2
- li3
4. 属性选择器（常用）
id + class 结合
- 属性名、属性名 = 属性值（正则）
-
=：绝对等于 -
*=：包含 -
^=：以...开头 -
$=：以...结尾
-
属性选择器
三、美化网页
1. 为什么要美化网页
- 有效的传递页面信息；
- 美化网页，页面漂亮才能吸引客户；
- 凸显页面的主题；
- 提高用户的体验。
- span 标签：重点要突出的字，使用 span 标签（约定俗成）套起来。
美化网页
编程语言：Java
2. 字体样式
- font-family：字体；
- font-size：字体大小；
- font-weight：字体粗细；
- color：字体颜色。
字体样式
标题
段落1
段落2
Tiger earns its stripes as folk hero and role model
- 常用写法：
/*也可以填px，但不能超过900,相当于bloder */
font-weight:bolder;
/*常用写法(oblique斜体)*/
font:oblique bloder 12px "黑体";
3. 文本样式
-
颜色-> color:单词/#十六进数/rgb() / rgba();
/* 颜色表示方式： 1. 单词 color: orange; 2. #十六进制数 color: #0ecbb6; 3. rgb() color: rgb(255, 116, 30); 4. rgba() a为通明度 rgba(141, 234, 233, 0.8); */ 文本对齐方式-> text-align:center;
首行缩进–> text-indent:2em;
行高–> line-height:50px; （单行文字上下居中 line-height=height）
-
修饰（下划线）–> text-decoration;
/*下划线*/ text-decoration:underline; /*中划线*/ text-decoration:line-through; /*上划线*/ text-decoration:overline; /*超链接去下划线*/ text-decoration:none; -
图片、文字水平对齐 -> vertical-align: middle;
/*水平对齐，需要有参数物 a,b*/ img,span{ vertical-align: middle; }
文本样式
超链接去下划线
下划线
中划线
上划线
测试图片、文字水平对齐
人工智能引发新浪潮
为了识别2022年最重要的技术趋势，德国《商报》记者走访了高校实验室、研究机构和企业，
并与学界和业界的领军人物探讨，列出了2022年最热门的15项技术。其中包括人工智能引发新浪潮。
总部位于德国海德堡的Aleph Alpha公司也许是人工智能领域最具雄心的初创企业。其创始人约纳斯·安德鲁利斯正在研发新一代人工智能模型，
他将其称为“世界模型”，因为它有着超强的计算能力，的确是在观察整个世界。
Tiger earns its stripes as folk hero and role model
4. 文本阴影和超链接伪类
01、阴影
/*text-shadow:阴影颜色 水平偏移 垂直偏移 模糊半径*/
#price {
text-shadow: #468ec0 10px 10px 2px;
}
02、超链接伪类（常用 a，a:hover）
/*超链接默认的颜色*/
a {
text-decoration: none;
color: black;
}
/*鼠标悬浮的状态（常用）*/
a:hover {
color: orange;
font-size: 30px;
}
超链接伪类
¥99元
5. 列表 ul、li
列表
- CSS 文件
#nav {
width: 260px;
background: #eeeded;
}
.title {
font-size: 20px;
font-weight: bold;
text-indent: 1em; /*缩进*/
line-height: 35px;
background: #fcb150;
}
/*ul li*/
/*
list-style:
none 去掉实心圆
circle 空心圆
square 正方形
*/
/*nav替换效果*/
/*ul {*/
/* background: #d9d9d9;*/
/*}*/
ul li {
height: 30px;
list-style: none;
text-indent: 1em;
}
a {
text-decoration: none;
font-size: 14px;
color: #0ecbb6;
}
a:hover {
color: #ff741e;
text-decoration: underline;
}
6. 背景
背景颜色：background；
-
背景图片。
background-image:url(""); /* 默认是全部平铺的 */ background-repeat:repeat-x; /* 水平平铺 */ background-repeat:repeat-y; /* 垂直平铺 */ background-repeat:no-repeat; /* 不平铺 */ -
实例 1：
背景 -
实例 2：更改 ul 实例，添加背景图片
#nav { width: 260px; background: #eeeded; } .title { font-size: 20px; font-weight: bold; text-indent: 1em; /*缩进*/ line-height: 35px; /*颜色 图片地址 图片位置 平铺方式*/ background: #fcb150 url("../images/d.png") 230px 8px no-repeat; } /*ul li*/ /* list-style: none 去掉实心圆 circle 空心圆 square 正方形 */ /*nav替换效果*/ /*ul {*/ /* background: #d9d9d9;*/ /*}*/ ul li { height: 30px; list-style: none; text-indent: 1em; background-image: url("../images/r.png"); background-repeat: no-repeat; background-position: 186px 1px; } a { text-decoration: none; font-size: 14px; color: #0ecbb6; } a:hover { color: #ff741e; text-decoration: underline; }
7. 渐变
- 渐变背景网址：https://www.grabient.com
- 径向渐变、圆形渐变。
body{
background-color: #4158D0;
background-image: linear-gradient(315deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
}
四、盒子模型
1. 什么是盒子模型
- position：定位类型；
- margin：外边距；
- padding：内边距；
- border：边框；
2. 边框
-
border：粗细 样式 颜色
- 边框的粗细；
- 边框的样式；
- 边框的颜色。
-
html 空格代码
名称 描述 ; 不断行的空白（1 个字符宽度） &ensp ; 半个空白（1 字符宽度） &emsp ; 一个空白（2 个字符宽度） &thinsp ; 窄空白（小于 1 个字符宽度）
盒子
会员登陆
3. 外边距
- margin-left/right/top/bottom–> 表示四边，可分别设置，也可以同时设置，如下：
/* 分别表示上、右、下、左；从上开始顺时针 */
margin:0 0 0 0;
/* 例1: 居中 auto表示左右自动 */
margin:0 auto;
/* 例2：表示上、右、下、左都为4px */
margin:4px;
/* 例3: 表示上为10px，左右为20px，下为30px */
margin:10px 20px 30px;
外边距
会员登陆
- 盒子的计算方式：
- margin+border+padding+内容元素。
总结：
- body 总有一个默认的外边距，去除外边距 margin:0;
- 常见操作：初始化。
4. 圆角边框
- 圆角边框：border-radius；
圆角边框
圆形
5. 盒子阴影
/*box-shadow:盒子阴影颜色 水平偏移 垂直偏移 模糊半径*/
box-shadow: #4d4d4d 5px 5px 3px;
盒子阴影
五、浮动
1. 标准文档流
- 块级元素：独占一行
h1~h6、p、div、ul… - 行内元素：不独占一行
span、a、img、strong - 注： 行内元素可以包含在块级元素中，反之则不可以。
2. dispaly
- block：块元素；
- inline：行内元素；
- inline-block：是块元素，但是可以内联，在一行；
- none: 隐藏；
- 这也是一种实现行内元素排列的方式，但是我们很多情况用 float。
display
div 块元素
span 行内元素
3. float:left/right
- clear: both;
浮动 float
浮动的盒子可以向左浮动，也可以向右浮动，知道他的外边缘碰到包含框或另一个浮动盒子为止。
div {
margin: 10px;
padding: 5px;
}
#father {
border: 1px #000 solid;
}
.layer01 {
border: 1px #F00 dashed;
display: inline-block;
float: left;
}
.layer02 {
border: 1px #00F dashed;
display: inline-block;
float: right;
}
.layer03 {
border: 1px #060 dashed;
display: inline-block;
}
.layer04 {
border: 1px #666 dashed;
font-size: 12px;
line-height: 23px;
display: inline-block;
clear: both;
}
4. 父级边框塌陷的问题
- clear：
- right：右侧不允许有浮动元素；
- left：左侧不允许有浮动元素；
- both：两侧不允许有浮动元素；
- none：
解决塌陷问题方案：
- 方案一：增加父级元素的高度；
#father{
border:1px #000 solid;
height:800px;
}
- 方案二：增加一个空的 div 标签，清除浮动。
- 方案三：在 父级元素中 增加一个 overflow 属性。
overflow:hidden; /* 隐藏超出部分 */
overflow:scroll; /* 滚动 */
- 方案四（推荐）：父类 添加一个伪类:after。
#father:after{
content:'';
display:block;
clear:both;
}
小结：
- 浮动元素增加空 div：
- 简单，代码尽量避免空 div；
- 设置父元素的高度：
- 简单，但是元素假设有了固定的高度，可能就会超出范围；
- overflow：
- 简单，下拉的一些场景避免使用；
- 父类添加一个伪类:after（推荐）：
- 写法稍微复杂，但是没有副作用，推荐使；
display 与 float 对比：
- display：方向不可以控制；
- float：浮动起来会脱离标准文档流，所以要解决父级边框塌陷的问题。
六、定位
1. 相对定位
相对定位：positon:relstive;
-
相对于原来的位置，进行指定的偏移，相对定位，仍然在标准文档流中，原来的位置会被保留。
positon:relstive; /*先设置相对定位*/ top:-20px; /*向上偏移20px*/ left:20px; /*向右偏移20p*/ bottom:-10px; /*向下偏移10px*/ right:20px; /*向左偏移20px*/ -
实例 1：
相对路径 第一个盒子第二个盒子第三个盒子
-
实例 2：
方块定位
2. 绝对定位
-
绝对定位（position: absolute;）：基于xxx 定位，上下左右；
- 没有父级元素定位 的前提下，相对于 浏览器 定位；
- 假设父级元素存在定位（position: relative;），我们通常会相对于父级元素 进行偏移；
- 在父级元素范围内移动。
-
总结：相对于父级或浏览器的位置，进行指定的偏移，绝对定位后，不在标准文档流中，原来的位置不会被保留。
绝对定位 第一个盒子第二个盒子第三个盒子
3. 固定定位
-
固定定位（position: fixed;）：位置不发生改变。
固定定位 绝对定位固定定位
4. z-index 及透明度
- 图层-z-index：默认是 0，最高无限~999。
- 背景透明度：opacity: 0.5; （值 0.0~1.0）
z-index和透明度
- 测试文字1
- 测试文字2
- 测试文字3
- CSS 源码
#content {
margin: 0px;
padding: 0px;
width: 300px;
overflow: hidden;
font-size: 12px;
line-height: 25px;
border: 1px solid #468ec0;
}
ul, li {
margin: 0;
padding: 0;
list-style: none;
}
/* 父级元素相对定位 */
#content ul {
position: relative;
}
/*绝对定位，相对于父级*/
.tipText, .tipBg {
position: absolute;
width: 300px;
height: 25px;
top: 175px
}
.tipText {
color: #ffffff;
z-index: 999; /*置于最顶层*/
text-align: center;
}
.tipBg {
background: #000000;
opacity: 0.5; /*背景透明度*/
filter: Alpha(opacity=50); /*IE8及以前浏览器*/
}
七、网页动画
- css 做动画过于繁琐，已有很多工具间接性做出；
- 搜索 canvas动画、卡巴斯基监控站（仅作了解）。
- 案例
HTML5 Canvas模拟飞机航班线路动画DEMO演示