CSS3基础

学前思考及学习重点

什么是CSS？
CSS怎么用？
CSS选择器（重点+难点）
如何美化网页？
盒子模型
浮动
定位
网页动画特效

CSS历史

CSS：Cascading Style Sheet：层叠级样式表

发展史：

CSS1.0 19912月W3C发布了第一个有关样式的标准CSS1.0。

CSS2.0 Div+CSS,提出Html与CSS分割思想

CSS2.1 新特性：浮动、定位

CSS3.0 新特性：圆角、阴影、动画。。。

CSS快速入门及优势

CSS的优势

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

三种css导入方式

<!DOCTYPE html>
<html lang="en">
<head>
    <!--导入方式-->
    <meta charset="UTF-8">
    <title>Title</title>

    <!--1、外部样式-->
    <link rel="stylesheet" href="css/style.css">
    <!--2、内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
    
</head>
<body>
<!--优先级：就近原则-->
<!--3、行内样式-->
<h1 style="color: red">我是标题</h1>
</body>
</html>

拓展：外部链接的两种方式

链接式

<!--最推荐使用link-->
<link rel="stylesheet" href="css/style.css">

导入式

 <style>
 /*始于css2.1，缺陷：当网页元素较多时，会先让你的网页框架显示，再显示元素*/
     @import "css/style.css";
 </style>

三种基本选择器（重要）

作用

选择页面上某一个或者某一类的元素

优先级

id选择器> 类选择器 > 标签选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <!--三种基本选择器-->
    <meta charset="UTF-8">
    <title>标签选择器</title>

    <style>
        /*标签选择器：会选择到页面上所有的这个标签的元素*/
        h1{
            color: #1cbf67;
            background: red;
            border-radius: 23px;
        }
        p{
            font-size: 12px;
        }
    </style>
</head>
<body>
<h1>标签选择器</h1>
</body>
</html>

类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /* 类选择器
           好处：可以多个标签归类，是同一个class，可以复用
        */
        .muzhi{
            color: #af2222;
        }
        .li{
            color: #5252ad;
        }
    </style>
</head>
<body>
<h1 class="muzhi">标题1</h1>
<h1 class="muzhi">标题2</h1>
<h1 class="li">标题3</h1>
</body>
</html>

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*id选择器，无法复用，为确保全局唯一*/
        /*优先级：id选择器> 类选择器 > 标签选择器*/
        #muzhi{
            color: chartreuse;
        }

        #li{
            color: aliceblue;
        }
    </style>
</head>
<body>
<h1 id="li">id选择器</h1>
<h1 id="muzhi">id选择器</h1>
<h1>id选择器</h1>
</body>
</html>

高级选择器

层次选择器

1、后代选择器

 /*后代选择器*/
 /*在某个元素的后面*/
 body p{
   color: rgba(0, 128, 0, 0.62);
 }

2、子选择器

 /*子选择器*/
 /*某个元素后面的一代,就像爸爸和儿子的关系*/
 body>p{
   color: #a11919;
 }

3、相邻兄弟选择器

 /*相邻兄弟选择器、只有一个对下不对上、弟弟选择器更形象*/
 /*<p class="active">p1</p>*/
 .active + p{
   background: #0f13ac;
 }

4、通用选择器

 /*通用选择器 当前选中元素向下的所有兄弟元素*/
 .active~p{
   background: #0f13ac;
 }

结构伪类选择器

基本上标签后面带有:的都是伪类选择器

注意：本篇内容可能无法长期写css，导致遗忘功能含义，有疑问直接复制代码测试当场便知道意思

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>结构伪类选择器</title>

  <style>
    /*ul的第一个元素*/
    ul li:first-child{
      background: #904040;
    }

    /*ul的最后一个元素*/
    ul li:last-child{
      background: rgba(144, 64, 64, 0.3);
    }

    /*选择p元素下的第一个元素*/
    /*定位到父元素，选择当前父元素下的第一个元素，必须是当前元素下的才能生效*/
    p:nth-child(1){
      background: #9192ff;
    }

    /*对比上面，会被比她高的元素占住位置就会赋值失败*/
    /*选择父元素下，p元素的第几个元素*/
    p:nth-of-type(2){
        background: #5effec;
    }

    /*鼠标悬停标签*/
    a:hover{
        background: #d0209e;
    }

  </style>
</head>

<body>

<h1>h1</h1>
<a href="">a1</a>
<p>p1</p>
<p>p2</p>
<p>p3</p>

<ul>
  <li>li1</li>
  <li>li2</li>
  <li>li3</li>
</ul>

</body>
</html>

属性选择器（重要）

本质上就是id+class的结合

格式：标签名[属性正则表达式属性值]

三个正则表达式：

= 绝对等于
*= 包含
$= 以这个结尾

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>属性选择器</title>
  <style>
    .demo a{
     float: left;
      /*变成块元素*/
      display: block;
      height: 50px;
      width: 50px;
      border-radius: 10px;
      background-color: #32ff50;
      text-align: center;
      /*字体颜色*/
      color: #af5959;
      /*去下划线*/
      text-decoration: none;
      /*外边距*/
      margin-right: 5px;

      /*虽然都是行高，但是是就近原则，谁后写用谁*/
      /*行高：弹幕推荐的写法*/
      line-height: 60px;
      /*狂神的写法 ps：他记不起来换的一种方式*/
      /*font: 字体样式（粗体） 字体大小（2px）/字体高度（50px） 字体风格（Algerian）;*/
      font: bold 2px/50px Algerian;
    }

    /*属性选择器*/

    /*选择a标签中属性包含id的字段*/
    a[id]{
      color: yellow;
    }
    /*选择a标签中id=first的字段*/
    a[id=first]{
      background: #3b69ff;
    }

    /*
    正则表达式
    = 绝对等于
    *= 包含
    $= 以这个结尾
    */
    /*选择a标签中class包含links的字段*/
    a[class *= links]{
      background: #f26cff;
    }

    /*选择a标签中href包含http的字段*/
    a[href^=http]{
      background: #ffec5c;
    }

    /*href$*/
    a[href$=doc]{
      background: #bb19a3;
    }
  </style>

</head>
<body>

<p class="demo">
  <a href="http://www.baidu.com" class="link item first" id="first">1</a>
  <a href="" class="link item active" target="_blank" title="test">2</a>
  <a href="img/123.html" class="links item">3</a>
  <a href="img/123.png" class="links item">4</a>
  <a href="img/123.jpg" class="links item">5</a>
  <a href="abc" class="link item">6</a>
  <a href="/a.pdf" class="link item">7</a>
  <a href="/abc.pbf" class="link item">8</a>
  <a href="abc.doc" class="link item">9</a>
  <a href="abcd.doc" class="link item last" >10</a>
</p>

</body>
</html>

CSS的作用及字体样式

为什么要美化网页？

有效传递页面信息
美化网页吸引用户
凸显页面的主题
提高用户的体验

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div与span的区别</title>

    <style>
        #muzhi{
            font-size: 20px;
        }
    </style>
</head>
<body>
<!--div标签是块级元素，拥有块级元素的特点。每对div标签（<div></div>）里的内容都可以占据一行，不会其他标签在一行显示；div标签总是从新行开始显示；-->
<!--span标签是行内元素，拥有行内元素的特点。span标签元素会和其他标签元素会在一行显示（块级元素除外），不会另起一行显示。-->
欢迎学习<span id="muzhi">span标签</span><div id="muzhi">Div标签</div>
欢迎学习<div id="muzhi">Java</div>
</body>
</html>

记住这个四个即可

font-family：字体样式
color：字体颜色
font-size：字体大小
font-weight：字体粗细

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体风格</title>
  <!--
  oblique：斜体
  bolder：粗体
  -->
  <style>
    p{
      font: oblique bolder 12px "楷体";
    }
  </style>
</head>
<body>
<p>他侧侧身，变成了顶风，整个人反转
  扑到我怀里
  我抱住他，用最慢的动作往地上倒
  好像他是个婴儿
  我累了要用双臂锁住他睡</p>
</body>
</html>

文本样式

颜色：color
文本对齐的方式：text-align
首行缩进：text-indent
行高：line-height
装饰：text-decoration
文本图片水平对齐：vertical-align: middle

注意：CSS样式多，遗忘就直接复制代码看看效果

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>字体样式</title>
  <!--
  color
  text-align：排版-居中
  text-indent：段落首次缩进
  line-height：行高
  text-decoration: underline：下划线
  text-decoration: line-through：中划线
  text-decoration: overline：上划线
  text-decoration: none：去下划线
  -->
  <style>
    h1{
      color: #6cff2a;
      text-align: left;
    }
    p{
      text-indent: 2em;
      line-height: 20px;
    }
    .l1{
      text-decoration: underline ;
    }
    .l2{
      text-decoration: line-through;
    }
    .l3{
      text-decoration: overline;
    }
    .l3{
      text-decoration: none;
    }
  </style>
</head>
<body>

<h1>起大风了
</h1>

<p class="l1">1</p>
<p class="l2">2</p>
<p class="l3">3</p>

<p class="p1">起大风了
  走得很慢的老爹，被吹出了快步
  他怕，就拽紧我
  我却感觉是他拖着我前行，跟小时候
  去赶班车一样</p>
<p>他侧侧身，变成了顶风，整个人反转
  扑到我怀里
  我抱住他，用最慢的动作往地上倒
  好像他是个婴儿
  我累了要用双臂锁住他睡</p>

</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文字与图片水平\垂直居中</title>
    <style>
        img,span{
            vertical-align: middle ;
        }
    </style>
</head>
<body>
<p>
    <img src="img/smoke.jpg" alt="" width="300" height="300">
    <span>124565</span>
</p>
</body>
</html>

文本阴影和超链接伪类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>c超链接伪类</title>
    <style>
        /*超链接伪类*/
        /*默认的颜色*/
        a{
            text-decoration: none;
        }
        /*鼠标悬停的颜色*/
        a:hover{
            color: yellow;
            font-size: 50px;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
            color: green;
        }
        /*这俩不经常用*/
        /*未访问的链接*/
        a:link{
            color: #a71717;
        }
        /*已访问的链接*/
        a:visited{
            color: #61a0ad;
        }
        /*文本阴影*/
        /*阴影颜色、水平阴影、垂直阴影、模糊距离*/
        #price{
            text-shadow: #690c7d 10px 10px 10px;
        }
    </style>
</head>
<body>
<a href="#">
    <img src="img/smoke.jpg" alt="" width="300" height="300">
</a>
<p>
    <a href="#">码出高效:Java开发手册</a>
</p>
<p>
    <a href="">作者：孤尽老师</a>
</p>
<p id="price">
    ￥99
</p>

</body>
</html>

列表样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表样式</title>
    <link href="CSS/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<!-- nav：导航栏标签，不建议使用，建议使用div -->
<div class="nav">
    <h2 class="title">全部商品分类</h2>
    <ul>
        <li><a href="#">图书1</a>&nbsp;&nbsp;<a href="#">音乐1</a></li>
        <li><a href="#">图书2</a>&nbsp;&nbsp;<a href="#">音乐2</a></li>
        <li><a href="#">图书3</a>&nbsp;&nbsp;<a href="#">音乐3</a></li>
        <li><a href="#">图书4</a>&nbsp;&nbsp;<a href="#">音乐4</a></li>
        <li><a href="#">图书5</a>&nbsp;&nbsp;<a href="#">音乐5</a></li>
        <li><a href="#">图书6</a>&nbsp;&nbsp;<a href="#">音乐6</a></li>
        <li><a href="#">图书7</a>&nbsp;&nbsp;<a href="#">音乐7</a></li>
        <li><a href="#">图书8</a>&nbsp;&nbsp;<a href="#">音乐8</a></li>
    </ul>
</div>
</body>
</html>

/*CSS文件中，建议从外往内写样式，保持语法规范*/
.nav{
    width: 500px;
    background: aqua;
}

.title{
    font-size: 30px;
    font-weight: bold;
    text-indent: 1em;
    line-height: 35px;
    background: aqua;
}

/*
list-style 列表前面的符号 例：none是无点，circle是圆。。
*/

ul{
    background: #bdc2de;
}

ul li{
    height: 30px;
    list-style: none;
    text-indent: 1em;
}
a{
    text-decoration: none;
    font-size: 12px;
    color: aqua;
}
a:hover{
    color: crimson;
    text-decoration: underline;
}

背景图像应用及渐变

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>背景</title>
    <style>
        div{
            width: 1000px;
            height: 500px;
            /*边框的粗细、边框的样式、边框的颜色*/
            border: 1px solid red;
            /*默认是平铺*/
            background-image: url("img/smoke.jpg");
        }
        .div1{
            /*平铺样式：朝x轴方向*/
            background-repeat: repeat-x;
        }
        .div2{
            /*平铺样式：朝y轴方向*/
            background-repeat: repeat-y;
        }
        .div3{
            /*平铺样式：不平铺*/
            background-repeat: repeat-y;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
</html>

图片也可以放到标签中例如：标题、列表等

渐变样式

网站：https://www.grabient.com/里面的样式可以直接套用

盒子模型及边框作用

边框的组成

边框粗细
边框样式
边框颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒子模型之登录框</title>
    <style>
        /*body默认有一个外边距*/
        /*所有标签都有一个外边距，例如li,ul,a,body*/
        body{
            margin: 0;
        }
        /*border:粗细，样式，颜色*/
        #box{
            width: 1;
            border: 2px double red;
            color: #759a0b;
        }
        form{
            background: #c47070;
        }
        /*结构伪类选择器：选择父元素下，div元素的第几个元素 的input标签*/
        /*solid实线 dashed虚线*/
        div:nth-of-type(1) span{
            border: 3px solid #6b6bbd;
        }
    </style>
</head>
<body>
<div id="box">
    <h2>会员登录</h2>
    <form action="#">
        <div>
            <span>用户名：</span>
            <input type="text">
        </div>
        <div>
            <span>密码：</span>
            <input type="text">
        </div>
    </form>
</div>
</body>
</html>

内外边距及div居中

外边距

/*div居中*/
margin: 0 auto;
/*4个位置分别代表上、下、右、左（顺时针）*/
margin: 0 0 0 0;

内边距

/*上下 是10，左右 是2*/
padding: 10px 2px;

圆角边框及阴影

圆角边框border-radius

通过控制高、宽、边框半径（），可实现不同的形状，例如：圆、半圆等等、同样对于图片也适用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>边框圆角</title>

<!--左上、右上、右下、左下-还是同样的顺时针旋转-->
    border-radius: 0px 0px 0px 0px;
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            border-radius: 10px;
        }
    </style>
</head>
<body>
<div>
</div>
</body>
</html>

阴影box-shadow

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            border: 10px solid red;
            /*水平阴影的位置、垂直阴影的位置、阴影的大小、阴影的颜色*/
            box-shadow: 10px 10px 100px #279759;
        }
    </style>
</head>
<body>
<div></div>
</body>
</html>

margin:0 auto

是居中设置，但是有前提，并不是所有元素都能居中，很多时候并不适用

建议一个大的div套一个小的，并适用 style="text-align: center"，确保完全居中

<div style="text-align: center">
    <div style="margin: 0 auto">
        <img src="img/smoke.jpg">
    </div>
</div>

建议: 前端页面，尽量直接网上搜索套用，不要重复造轮子！有可能一辈子都写不出来！

display和浮动

display

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*diplay
            block:块元素
            inline:行内元素
            inline-block:两者都是
            none:去除
        */
        div{
            width: 100px;
            height: 100px;
            border: 2px solid red;
            display: none;
        }
        span{
            width: 100px;
            height: 100px;
            border: 2px solid hotpink;
            display: inline-block;
        }
    </style>
</head>
<body>
<div>块元素</div>
<span>行内元素</span>
</body>
</html>

这是一种实现行内元素排列的方式，很多情况使用的还是float

float

/*往左飘、往右飘*/
float: left;
float: right;

浮动的特效，会随着窗口的缩小或放大，导致网页内部元素格式改变

缩放网页后，元素会随着网页大小而变化

正因为她这种特殊的性质，导致后续要深入了解她的具体使用

overflow及父级边框塌陷问题

父级边框塌陷案例图

解决方案

1、增加父级元素的高度（简单，但父元素一旦有了固定高度，就会被限制，例如一些子元素超级长）

2、增加一个空的div标签在父元素内的最下方（简单，缺点：代码中应尽量避免空div）

3、在父元素增加设置overflow：hidden（简单，但是一些较长的子元素太长，会导致出现滚动下拉条，极其影响体验，不建议使用）

4、在父类下添加一个伪类after：，目前是业界公认的最好办法

对比display和float

display

方向不可控制
float

浮动起来可能脱离标准文档流，要解决父级边框塌陷问题

相对定位的使用及练习

相对定位

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            border: 2px red solid;
        }
        a{
            width: 200px;
            height: 200px;
            display: block;
            background: #6fc71b;
            line-height: 200px;
            text-align: center;
            /*开启相对定位*/
            position: relative;
            top: 上
            bottom: 
            left：左
            right：右
            相对于自己之前的位置
        }
    </style>
</head>
<body>
<div>
    <a>相对定位</a>
</div>
</body>
</html>

方块定位练习讲解

实现该效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>相对定位练习题</title>
    <style>
        .father{
            width: 300px;
            height: 300px;
            padding: 10px;
            border: 2px solid red;
        }
        a{
            width: 100px;
            height: 100px;
            text-decoration: none;
            display: block;
            background: #ff48ef;
            line-height: 100px;
            text-align: center;
        }
        a:hover{
            background: #4a4aaf;
        }
        .ab{
            width: 100px;
            height: 100px;
            position: relative;
            left: 200px;
            bottom: 100px;
        }
        .ac{
            width: 100px;
            height: 100px;
            position: relative;
            left: 100px;
            bottom: 100px;
        }
        .ad{
            margin: 0;
            width: 100px;
            height: 100px;
            position: relative;
            bottom: 100px;

        }
        .ae{
            width: 100px;
            height: 100px;
            position: relative;
            bottom: 200px;
            left: 200px;
        }
    </style>
</head>
<body>
<div class="father">
    <a class="aa" href="#">链接1</a>
    <a class="ab" href="#">链接2</a>
    <a class="ac" href="#">链接3</a>
    <a class="ad" href="#">链接4</a>
    <a class="ae" href="#">链接5</a>
</div>
</body>
</html>

绝对定位和固定定位

绝对定位注意事项

1、没有父级元素的前提下，相对于浏览器定位

2、假设父级元素存在，通常相对于父级元素进行移动

3、定义为绝对定位后，是相对于父级和浏览器的位置进行指定偏移，不在标准文档流中，原来的位置也不被保留

绝对定位和固定定位效果图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>固定定位和绝对定位</title>
    <style>
        body{
            height: 2000px;
        }
        /*绝对定位*/
        div:nth-of-type(1){
            width: 100px;
            height: 100px;
            background: green;
            position: absolute;
            right: 0;
            bottom: 0;
        }
        /*固定定位*/
        div:nth-of-type(2){
            width: 50px;
            height: 50px;
            background: #b12757;
            position: fixed;
            right: 0;
            bottom: 0;
        }
    </style>
</head>
<body>
<div>绝对定位</div>
<div>固定定位</div>
</body>
</html>

z-index及透明度

z-index就是层级属性，类似于PS的图层，在有浮动前提下，层级越高，越往前显示，反之亦然

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="content">
    <ul>
        <li><img src="img/logo.png" alt=""></li>
        <li class="tipText">学习index属性</li>
        <li class="tipBg"></li>
        <li>2021年10月23日22:07:31</li>
        <li>地点：杭州</li>
    </ul>
</div>
</body>
</html>

z-index和opcity

#content{
    width: 350px;
    height: 400px;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    font-size: 12px;
    line-height: 25px;
    border: 1px solid red;
}
img{
    width: 300px;
    height: 300px;
}
ul,ui{
    padding: 0px;
    margin: 0px;
    list-style: none;
}
/*父级元素相对定位*/
#content ul{
    position: relative;
}
.tipText,.tipBg{
    position: absolute;
    width: 300px;
    top: 274px;
}
.tipText{
    /*层级默认是0，最高无上限*/
    /*z-index: 999;*/
}
.tipBg{
    width: 300px;
    height: 25px;
    background: aqua;
    /*背景透明度*/
    opacity: 0.2;
    /*仅仅适用用IE8之前的版本*/
    filter: alpha(opacity=50);
}

动画及视野拓展

css可以实现动画，但是效率低，不好看，所以不推荐使用，以下内容仅做拓展

css实现的动画案例，难度高需要美术功底，代码量极大，不易实现

https://www.17sucai.com/pins/demo-show?id=34455

较为方便实现动画的语言，例如Canvas，演示：

https://www.cnblogs.com/html5tricks/p/9204735.html

比较成熟的动画JavaScript+Canvas等其他语言

卡巴斯基全球网络攻击显示实时图

https://cybermap.kaspersky.com/

posted @ 2021-10-24 09:06 里牧之阅读(80) 评论(0) 收藏举报

刷新页面返回顶部

大橘是我的