前端基础 02、CSS3 入门

一、什么是 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. 快速入门

    
    
    
    


CSS样式 h1标题

• 建议使用这种规范（单独写一个 css 文件，用 link 标签引入 css 文件效果） 。

CSS 的优势：

• 内容和表现分离；
• 网页结构表现统一，可以实现复用；
• 样式十分的丰富；
• 建议使用独立于 html 的 css 文件；
• 利用 SEO，容易被搜索引擎收录！

CSS 的 3 种常用导入方式：

1. 行内样式
2. 内部样式
3. 外部样式

• 优先级：就近原则（1. 行内样式 2. 内部样式哪个离元素更近 ）

    
    
    
    
    




CSS3测试

拓展：外部样式两种方法。

• 链接式（推荐）：HTML

• 导入式（不推荐使用）：@import 是 CSS 2.1 特有的。

二、CSS 选择器（重点）

• 作用：选择页面上的某一个，或者某一类元素。

1. 基本选择器

01、标签选择器：选择一类标签。

• 格式：标签名{}

    
    
    


标签选择器
前端-CSS3
Android

02、类选择器 class：选择所有 class 一致的标签，可以跨标签。

• 格式：.类名{}

    
    
    


类选择器：Test01
类选择器：Test02
类选择器：Test03
类选择器：Test04

03、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 结合

• 属性名、属性名 = 属性值（正则）
  • = ：绝对等于
  • *= ：包含
  • ^=：以...开头
  • $= ：以...结尾

    
    
    



    
    2
    3
    4
    5
    6
    7
    8
    9
    10

三、美化网页

1. 为什么要美化网页

1. 有效的传递页面信息；
2. 美化网页，页面漂亮才能吸引客户；
3. 凸显页面的主题；
4. 提高用户的体验。

• 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;
}

    
    
    



    


     码出高效：Java开发手册


    作者：杨冠宝 高海慧


    ¥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。

    
    
    


div 块元素
span 行内元素

3. float:left/right

• clear: both;

    
    
    



    

        
    
    

        
    
    

        
    
    

        浮动的盒子可以向左浮动，也可以向右浮动，知道他的外边缘碰到包含框或另一个浮动盒子为止。
    

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：

  
  
  
      
      
      
  
  
  
      
  连接1
      
  连接2
      
  连接3
      
  连接4
      
  连接5
  
  
  
  

2. 绝对定位

• 绝对定位（position: absolute;）：基于xxx 定位，上下左右；

  1. 没有父级元素定位 的前提下，相对于 浏览器 定位；
  2. 假设父级元素存在定位（position: relative;），我们通常会相对于父级元素 进行偏移；
  3. 在父级元素范围内移动。

• 总结：相对于父级或浏览器的位置，进行指定的偏移，绝对定位后，不在标准文档流中，原来的位置不会被保留。

  
  
  
      
      
      
  
  
  
      
  第一个盒子
      
  第二个盒子
      
  第三个盒子
  
  
  
  

3. 固定定位

• 固定定位（position: fixed;）：位置不发生改变。

  
  
  
      
      
      
  
  
  绝对定位
  固定定位
  
  
  

4. z-index 及透明度

• 图层-z-index：默认是 0，最高无限~999。
• 背景透明度：opacity: 0.5; （值 0.0~1.0）

    
    
    
    



    

        

        
测试文字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动画、卡巴斯基监控站（仅作了解）。
• 案例

八、总结