前端基础 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. 快速入门



    
    CSS3快速入门
    
    


CSS样式 h1标题

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

CSS 的优势:

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

CSS 的 3 种常用导入方式:

  1. 行内样式
  2. 内部样式
  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 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。



    
    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 定位,上下左右;

    1. 没有父级元素定位 的前提下,相对于 浏览器 定位;
    2. 假设父级元素存在定位(position: relative;),我们通常会相对于父级元素 进行偏移;
    3. 在父级元素范围内移动。
  • 总结:相对于父级或浏览器的位置,进行指定的偏移,绝对定位后,不在标准文档流中,原来的位置不会被保留

    
    
    
        
        绝对定位
        
    
    
    
    第一个盒子
    第二个盒子
    第三个盒子
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演示
    


八、总结

你可能感兴趣的:(前端基础 02、CSS3 入门)