一、什么是 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演示