CSS3入门

什么是CSS

  1. Cascading Style Sheet 层叠级联样式表

  2. CSS：表现（美化网页）

  3. 字体，颜色，边距，高度，宽度，背景图片，网页定位，网页浮动...

         

CSS发展史

  1. CSS1.0 -- 基本样式，现在用标签就能实现

  2. CSS2.0 -- DIV（块）+CSS，提出了HTML 和 CSS结构分离的思想，网也变得简单，利于SEO

  3. CSS3.0 -- 浮动，定位

  4. CSS2.1 -- 圆角边框，阴影，动画... 会有浏览器兼容性问题

  • 练习模式：

快速入门

  1. style


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    
    
    <style>
        h1{
            color:red;
        }
    style>
    
head>
<body>
<h1>我是标题h1>
body>
html>

或者（建议使用下面这种方式）：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
    
    <link rel="stylesheet" href="css/style.css">
    
head>
<body>
<h1>我是标题h1>
body>
html>
h1{
    color:red;
}

  • 效果：

  1. CSS的优势

    1. 内容和表现分离

    2. 网页结构表现统一，可以实现复用

    3. 样式十分丰富

    4. 建议使用独立于HTML的CSS文件

    5. 利用SEO，容易被搜索引擎收录！

CSS的3种导入方式

  1. 行内样式


<h1 style="color:red">我是标题h1>

  1. 内部样式


<style>
    h1{
        color:green;
    }
style>

  1. 外部样式

/* 外部样式 */
h1{
    color:yello;
}

  • 行内样式优先级最高，然后内部样式和外部样式优先级一样并尊崇就近原则也就是最后定的样式为依据。

  1. 拓展外部样式：

    • 链接式：全部弄完渲染好了再呈现 -- 属于html标签

    <link rel="stylesheet" href="css/style.css">

    • 导入式：缺点 -- 打开网页先是骨架，最后才去渲染 -- CSS2.1特有的

    <style>
        @import url("css/style.css")
    style>

选择器

  1. 作用：选择页面上的某一个或者某一类元素

  2. 基本选择器

    1. 标签选择器 -- 选择一类标签

    <style>
        /*标签选择器
        * 会选择到页面上所有的这个标签的元素
        * 弊端，想只让一个h1改变样式，另一个不变。做不到
        */
        h1{
            color:#a13d30;
        }
    style>
    ?
    <h1>学Javah1>
    <h1>学Javah1>

    1. 类选择器 class -- 选择所有class属性一致的标签，跨标签

    <style>
        /*类选择器的格式  .class的名称{}
        * 好处，可以多个标签归类，是同一个class。可以复用。
        */
        .qinjiang{
            color: #3748ff;
        }
        .kuangshen{
            color: #a24fff;
        }
    style>
    ?
    <h1 calss="qinjiang">标题1h1>
    <h1 calss="kuangshen">标题2h1>
    <p calss="qinjiang">标题3p>

    1. id选择器 -- 全局唯一！

    <style>
        /*id选择器格式， #id名称{}
        * id必须保证全局唯一，不可复用！
        * 不遵循就近原则，固定的：id选择器>class选择器>标签选择器
        */
        #qinjiang{
            color:#ff008a;
        }
    style>
    ?
    <h1 id="qinjiang" calss="style1">标题1h1>
    <h1 calss="style1">标题2h1>
    <h1 calss="style1">标题3h1>
    <h1 calss="qinjiang">标题4h1>
    <h1 calss="qinjiang">标题5h1>

  • 优先级：id选择器 > class选择器 > 标签选择器

  1. 层次选择器

    1. 后代选择器

      • 在某个元素的后面 祖爷爷 爷爷 爸爸 你

      /* 后代选择器 */
      body p{
          background: red;
      }

      • 效果：

    2. 子选择器

      • 只有一代，儿子

      /* 子选择器 */
      body>p{
          background: red;
      }

      • 效果：

                

    3. 相邻兄弟选择器

      • 同辈 -- 对下不对上

      • 只有一个

      /* 兄弟选择器 */
      .actiove + p{
          background: #a13d30;
      }

      • 效果：

                

    4. 通用选择器

      • 当前选中元素的向下的所有兄弟元素

      • 对下不对上

      /* 通用选择器 */
      .actiove~p{
          background: #02ff00;
      }

      • 效果：

                

结构伪类选择器

  1. 简单的

<style>
    /* ul的第一个元素 */
    ul li:first-child{
        background: #02ff00;
    }
    /* ul的最后一个元素 */
    ul li:last-child{
        background: #ff4832;
    }
style>
?
?
<p>p1p>
<p>p2p>
<p>p3p>
<ul>
    <li>li1li>
    <li>li2li>
    <li>li3li>
ul>

  • 效果：

  1. 复杂的 -- 认个眼熟就好

/* 选中 p1：定位到父元素，选择当前的第一个元素
* 选中当前p元素的父级元素，选中父级元素的第一个，并且是当前元素才生效！
* 第一步定位:p的父元素(p的第一个作用)     
* 第二步定位父元素下的第一个元素(数字的作用)    
* 第三步判断如果类型是p成立(p的第二个作用)    
* 第四步产生结果改变样式;
* 会被其他标签阻碍
*/
/* 找到父类当前元素的第几个 -- 不分类型*/
p:nth-child(1){
    background: #2700ff;
}
?
/* 选中父元素下的类型为p元素的第二个  不会被其他标签阻碍，更准定位！*/
/* 找到当前父类元素下的第几个类型 -- 分类型*/
p:nth-of-type(2){
    background: yellow;
}

  • 效果：

          

  1. 伪类选择器

    • hover：鼠标移到该区域才显示的属性

    a:hover{
        background:yellow;
    }

属性选择器（常用）

  • id + class 结合~

<style>
    .demo a{
        float: left;    /* 向左浮动 */
        dispaly: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;    /* 圆角矩形 */
        background: #2700ff;
        text-aligh: center; /* 文字居中 */
        color: gainsbore;
        text-decoration: none;  /* 去文字下划线 */
        margin-right: 5px;  /* 每个元素向右偏移 */
        font:bold 20px/50px Arial;  /* 50px是行高 */
    }
    
    /* 存在id属性的元素   a[]{} 
    * 两种方式：1.属性名，2.属性名=属性值(正则)
    */
    a[i]{
        background: yellow;
    }
    /* id=firts的元素 */
    a[id=first]{
        background: yellow;
    }
    
    /* class中有links的元素 
      =是绝对等于
     *=是包含这个元素
    */
    a[class*="links"]{
        background: yellow;
    }
    
    /* 选中href中以http开头的元素
       ^=以这个开头
    */
    a[href^=http]{
        background: yellow;
    }
    
   /* 选中href中以pdf结尾的元素
       $=以这个结尾
    */
    a[href^=pdf]{
        background: yellow;
    }
    
    
style>
?
<p class="demo">
        <a href="http://www.baidu.com" class="links item first" id="first">1a>
        <a href="http://blog.kuangstudy.com" class="links item active" target="_blank" title="test">2a>
        <a href="images/123.html" class="links item">3a>
        <a href="images/123.png" class="links item">4a>
        <a href="images/123.jpg" class="links item">5a>
        <a href="abc" class="links item">6a>
        <a href="/a.pdf" class="links item">7a>
        <a href="/abc.pdf" class="links item">8a>
        <a href="abc.doc" class="links item">9a>
        <a href="abcd.doc" class="links item last">10a>
p>

  • 效果：

          

  • 正则总结：

    • =是绝对等于

    • *=是包含这个元素

    • ^=以这个开头

    • $=以这个结尾

美化网页元素

  1. 为什么要美化网页

    1. 有效地传递页面信息

    2. 美化网页，页面漂亮，才能吸引用户

    3. 凸显页面的主题

    4. 提高用户的体验

  2. span标签：重点要突出的字，使用span标签套起来

<style>
    #title1{
        font-size: 50px;
    }
style>
?
欢迎学习<span id="title1">Javaspan>

  • 效果：

          

  1. 字体样式

/* 
* font-family：字体
* font-size：字体大小
* font-weight：字体粗细
*/
body{
    font-family: "Arial Black", 楷体;
    color: #a13d30;
}
h1{
    font-size: 50px;
}
.p1{
    font-weight: bolder;
}

  • 效果：

          

  1. 文本样式

    1. 颜色

    /*颜色：
    * 单词
    * RGB 0~F
    * RGBA A(透明度)：0~1
    */
    h1{
        color: rgba(0,255,255,0.5);
    }

    • 效果：

              

    1. 文本对齐方式

    h1{
        text-align: center;
    }

    1. 首行缩进

    .p1{
        text-index: 2em;
    }

    1. 行高 line-height：单行文字上下居中！ line-height = height

    /* 行高和块的高度一致就可以上下居中啦 */
    .p3{
        background: #2700ff;
        height: 300px;
        line-height: 300px;
    }

    1. 装饰

    .l1{
        text-decoration: underline; /*下划线*/
    }
    .l2{
        text-decoration: line-throught; /*中划线*/
    }
    .l3{
        text-decoration: overline;  /*上划线*/
    }

    • 效果：

              

    1. 文本图片水平对齐


    ?
    <style>
        img,span{
            vertical-align: middle;
        }
    style>
    ?
    <p>
        <img src="images/a.jpg">
        <span>asdasdajsldjalksdjalksdspan>
    p>

    • 效果：

    1. 去掉超链接的下划线

    a{
        text-decoration: none;
    }

超链接伪类

/* 默认的颜色 */
a{
    text-decoration: none;
    color: #000000;
}
?
/* 鼠标悬浮的状态 （只需要记住这个）*/
a:hover{
    color: orange;
    font-size: 50px;
}
?
/* 鼠标按住未释放的状态 */
a:actiove{
    color: green;
}
?
/* 未访问的时候显示棕色 */
a:link{
    color: #a13d30;
}
?
/* 鼠标点击后 */
a.visited{
    color: #ff008a;
}
?
/* text-shadow: 阴影颜色 水平偏移 垂直偏移 阴影半径 */
#price{
    text-shadow: #3cc75f 10px 10px 2px
}

  • 效果：

    鼠标碰到文字

          

          鼠标点击文字不放开

         

          未访问的时候显示棕色

         

          也可以让鼠标碰到文字时字体变大：

          

 

          给价格上阴影：

          

列表

  • 效果：

         

背景

  1. 背景图片 + 背景颜色

<style>
    div{
        width: 1000px;
        height: 700px;
        border: 1px solid red;
        background-image: url("images/tx.jpg");
        /* 默认是全部平铺的 */
    }
    .div1{
        background-repeat： repeat-x;    /*水平平铺一行*/
    }
    .div2{
        background-repeat： repeat-y;    /*竖直平铺一列*/
    }
    .div2{
        background-repeat： no-repeat;   /*不平铺*/
    }
style>
?
<div class="div1">div>
<div class="div2">div>
<div class="div3">div>

  • 效果：

          

           

            

  • 应用：

    • 方式一：

    • 效果：

    • 方式二：

              

    • 效果：

              

渐变

  1. 开源网站：www.grabient.com


<style>
    body{
        /**/
        background-image: liner-gradient(19deg,#21D4FD 0%, #00FF4E 100%);
    }
style>

  • 效果：

          

盒子模型

  1. 什么是盒子模型

    • margin：外边距

    • padding：内边距

    • border：边框

  2. 边框

    1. 边框的粗细

    2. 边框的样式

    3. 边框的颜色

/*body总有一个默认的外边框，设margin:0可消除边框 -- 常见操作*/
h1,ul,li,a,body{
    margin: 0;
    padding: 0;
    text-decoration: none;
}
/* border：粗细，样式，颜色 */
#box{
    width: 300px;
    border: 1px solid red;
}
?
h2{
    font-size: 16px;
    background-color: #3cbda6;
    line-height: 30px;
    color: white;
}
?
form{
    background: #3cbda6;
}
div:nth-of-type(1)>input{
    border:3px solid black;
}
div:nth-of-type(2)>input{
    border:3px solid #4d0b8c;
}
div:nth-of-type(3)>input{
    border:3px solid #008c27;
}

  • 效果：

          

  1. 外边距

    #box{
        width: 300px;
        border: 1px solid red;
        margin:0 auto; /*上下0，左右自动 --- 两个值时是上下左右，4个值时是上右下左，3个参数的时候为上,左右,下*/
    }

    • 效果：

              

  1. 内边距

    div:nth-of-type(1){
        padding: 10px 2px;
    }

  • 效果：

  1. 盒子的计算方式：你这个元素到底多大？

    • margin+border+padding+内容宽度

圆角边框

?


<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        border-radius: 50px 20px;
        border-radius: 100px;   /*圆圈*/
    }
style>
?
<div>div>

  • 半圆：

          

  • 扇形：

          

  • 头像变圆： 头像大小是50*50的，让四个边都是25

          

阴影

<style>
    div{
        width: 100px;
        height: 100px;
        border: 10px solid red;
        box-shadow:10px 100px 1px yellow;
    }
style>
?
<div>div>

  • 效果：

          

 

  • 让头像发光：

  • 可以去源码之家下载静态页面

  • 可以去模板之家下载后台模板

浮动

  1. 标准文档流

             

  1. 块级元素：独占一行

    • h1~h6 p div 列表...

  2. 行内元素：不独占一行

    • span a img strong...

  • 【注意】：行内元素可以包在块级元素内，但块级元素不能包在行内元素内

  1. display


<style>
    div{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        dispaly: none;
    }
    span{
        width: 100px;
        height: 100px;
        border: 1px solid red;
        dispaly: inline-block;
    }
style>

  • 效果：

          

  • 这个也是一种实现行内元素排列的方式，但是我们很多情况都是用float

  1. float

    1. 左右浮动

          

  • 效果：

          

  1. 父级边框塌陷的问题

    1. clear

          

  • 效果：

    • 解决方案：

      • 1、增加父级元素的高度

      #father{
          border:1px #000 solid;
          height: 800px;
      }

      • 2、增加一个空的div标签，清除浮动

      <div class="clear">div>
      ?
      .clear{
          clear: both;
          margin: 0;
          padding: 0;
      }

      • 3、overflow

               

      • 效果

      • 用于父级边框塌陷问题 -- 在父级元素中增加一个 overflow: hidden; -- 内容修剪

                

      • 4、父类添加一个伪类 :after -- 市面上最认可的一种解决方案

      #fatehr:after{
          content: '';
          display: block;
          clear: both;
      }

  1. 小结：

    1. 浮动元素后面增加空的div

      • 简单，但代码中尽量要避免空div

    2. 设置父元素的高度

      • 简单，但元素假设有了固定的高度，就会被限制

    3. overflow

      • 简单，但下拉的一些场景应避免使用

    4. 父类添加一个伪类 :after（推荐）

      • 写法稍微复杂一点，但没有副作用，推荐使用

  1. 对比：

    1. display

      • 方向不可以控制

    1. float

      • 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷的问题

定位

  1. 相对定位： position:relative;

             

相对于原来的位置，进行指定的偏移。相对定位的话，它仍然在标准文档流中！原来的位置会被保留。

top: -20px;
left: -20px;
bottom: -10px;
right: -20px;

  • 案例：

          

<style>
    #box{
        width: 300px;
        height: 300px;
        padding: 10px;
        border: 2px solid red;
    }
    a{
        width: 100px;
        height: 100px;
        text-decoration: none;
        background: #ffa1f2;
        line-height: 100px;
        text-align: center;
        color: white;
        display: block;
    }
    a:hover{
        background: #47a4ff;
    }
    .a2,.a4{
        position: relative;
        left: 200px;
        top: -100px;
    }
    .a5{
        position: relative;
        left: 100px;
        top: -300px;
    }
style>
?
<div id="box">
    <a class="a1" href="#">链接1a>
    <a class="a2" href="#">链接2a>
    <a class="a3" href="#">链接3a>
    <a class="a4" href="#">链接4a>
    <a class="a5" href="#">链接5a>
div>

  1. 绝对定位

  • 基于xxx定位，上下左右~

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

  • 2、假设父级元素存在定位，我们通常会相对于父级元素进行偏移

  • 3、在父级元素内移动

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

  1. 固定定位 fixed

  • 代码：

          

  • 效果：

          

  1. z-index

        

图层~

z-index：默认是0，最高无限，一般可写999

  • 代码：

  • 效果：

动画

 参考链接：https://www.bilibili.com/video/BV1YJ411a7dy?p=24

前端基础

相关

第十一章 前端基础

前端基础进阶5

WEB前端基础之SCC(字体颜色背景-盒子模型)

前端基础之jquery

前端基础之JavaScript

前端基础

前端基础——HTML、CSS、JS

前端基础之JavaScript

前端基础知识-牛客网汇总

前端基础问题：CSS vertical-align 与基线的那些事~

全栈开发技能2：前端基础

【开发】谷粒学院-项目前端基础知识-07-Babel

标签