时间戳

首页 > 技术文章 > css快速入门

css快速入门

yinbangchi 2021-01-22 18:11 原文

目录

1. 什么是css

如何学习

  1. css是什么？
  2. css如何用（快速入门）
  3. css选择器（重点）
  4. 美化网页
  5. 盒子模型
  6. 浮动、
  7. 定位
  8. 网页动画

网站：菜鸟教程

1.1 什么是css

CascadingStyle Sheet 层叠级联样式表

CSS： 表现（美化网页）

字体，颜色。边框。高度。背景图片，网页定位，网页浮动，，，，

建议在css中调试好样式拿来用。

1.2 发展史、

css1.0

css2.0 DIV（块）+css 。html与css结构分离的思想。网页变得简单。SEO

css2.1 浮动 定位

css3.0 圆角 阴影 动画。。浏览器兼容性。

2.快速入门

选择器

1.三大基本选择器

标签选择器

 /*
以标签作为选择器的叫做标签选择器
作用范围：全部的h2标签
*/
<style>
        h2{
            color: cornflowerblue;
        }
</style>

类选择器

    <style>
        /*
        格式：
        .类名{}
        */
      .ddd{
          color: aquamarine;
      }

    </style>

<!--
 class属性用于标志类名
 只要类名相同，可用于多个不同的标签
 -->
<h2 class="ddd">年后</h2>
<h2 class="ddd">年后</h2>
<h2 class="ddd">年后</h2>
<div class="ddd">gserf</div>

id 选择器

 /*
       id 选择器的规范：
       #id名{
       }
      */
      #ddd{
          color: coral;
      }

<!--
   只能用于单个标签，每个标签的id名不能相同。否则报错
 -->
<h2 id="ddd">年后</h2>

优先级：id>class>标签

2. 层次选择器

  1. 后代选择器
     /*
      厚待选择器
      */
      body h2{
           color: coral;
      }

<body>
<!--
后代选择器：字如其名，在后代中生效，儿子，孙子，而h2就是body的儿子
 -->
<h2 id="ddd">年后</h2>
    
</body>

子选择器

    <style>
      /*
      子选择器
      */
      body>h2{
           color: coral;
      }
    </style>

<body>
<!--
   子选择器:能生效的当然只有儿子。
 -->
<h2>年后1</h2>
<h2>年后2</h2>
<h2>年后4</h2>

</body>

相邻兄弟选择器

 <style>
    /*
    相邻兄弟选择器·
    */
    h2 + div{
        color: coral;
    }
 </style>

<!--
  相邻兄弟选择器:用于相邻的下面的标签如: a b c     b的相邻式 a和 c 但是 有效的是 c
 -->
<h2>年后1</h2>
<div>年后2</div>
<div>年后4</div>

通用选择器

  <style>
    /*
    通用选择器·
    */
    h2~div{
        color: coral;
    }
    </style>

<!--
   通用选择器·：用于h2标签的下的所有div 标签生效
 -->
<div>年后2</div>
<h2>年后1</h2>
<div>年后2</div>
<div>年后4</div>

3.结构伪类选择器

<style>
        /*ul的第一个子元素*/
        ul li:first-child{
            color: aquamarine;
        }
        /*ul的最后一个元素*/
        ul li:last-child{
            color: coral;
        }
 		/*选择当前元素的父元素的第一个，并且第一个是当前元素才有效*/
        p:nth-child(1){
            background: aqua;
        }
        /*选择p元素的第二个*/
        p:nth-of-type(2){
            background: aquamarine;
        }
 		/*a标签修改颜色*/
        a:hover{
            background: aquamarine;
        }
 </style>

4. 属性选择器（常用）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style>
    .demo a{
        float: left;
        display: block;
        height: 50px;
        width: 50px;
        border-radius: 10px;
        background: coral;
        color: aquamarine;
        text-align: center;
        text-decoration: none;
        margin-right: 5px;
        font: bold 20px/50px Arial;
    }
    /*a标签中带有id元素的*/
    a[id]{
        background: chartreuse;
    }
    /*id-mm的标签
    id和id=mm的优先级，是以就近原则
    */
    a[id=mm]{
        background: black;
    }
    /*
        clas中有ik的元素
    */
    a[class="ik"]{
        background: chocolate;
    }
    /* class 中含 aa*/
    a[class*="aa"]{
        background: darkgrey;
    }
    /* 选取href中以http开头的元素*/
    a[href^=http]{
        background: cadetblue;
    }
    /*href中以什么结尾的·*/
    a[href$=ddd]{
        background: darkorchid;
    }
</style>
</head>
<body>
<p class="demo">
    <a id="mm">1</a>
    <a class="ik">1</a>
    <a class="dmm aa">1</a>
    <a>1</a>
    <a href="http:fdajfado/">1</a>
    <a>1</a>
    <a>1</a>
    <a href="http:/foda.ddd">1</a>
</p>


</body>
</html>

效果图：

=
*=
^=

样式

三大样式

内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*内部样式*/
        h1{
            color: cadetblue;
        }
    </style>
</head>
<body>
  <h1></h1>
</body>
</html>

外部样式

创建一个resouress包，在创建一个css包，发外部样式

两种导入方式：

  • 链接式

    <link rel="stylesheet" href="../resouress/css/index.css">

  • 导入式

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

行类样式

  <h1 style="color: darkorchid"></h1>

注意：同时使用三个样式时，遵循的时就近原则

3.美化网页元素

1.为什么美化网页元素

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

span标签重要的子用span标签套住

2.字体样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--
     font-fmaily:字体
     color：颜色
     font-weight: bold;字体粗细

    -->
    <style>
     /*   body{
            font-family: 楷体;
        }
        p{
            font-size: 20px;
            font-weight: bold;
        }*/
        p{
            font: oblique bolder 12px "楷体";
        }
    </style>
</head>
<body>
<span>小说简介：</span>
<p>
    “为了你，我愿独战天下！”
    一个被断定为天生抗元素体的废材少爷，为了心爱之人毅然挡在她身前，面对天下诸强！
    “总有一天，我会凌驾于九天之上，成就新的神话！”
    一个弃灵修剑的少年，发下誓言，欲与天斗！为了这目标不断奋斗，在血与汗中成长！
    太古、上古、远古——如今。
    从古至今，有多少强者终究逃不过天劫化为一杯黄土，又有多少隐秘被永远地埋藏在历史长河之中。
    在这强者林立的乱世之中如何才能存活下去？又要如何才能守护住心爱之人？天地间到底隐藏着什么样的惊天之秘？
    一切尽在《剑凌九重天》 ！！！


    清晨，一声惊叫响起，打破了宁静。房中，一个年约十岁的男孩蓦然醒来，额头沁出冷汗，汤汤流下，打湿了衣襟。

    那男孩名为秦枫，长得极为清秀，肌肤白皙柔嫩，有着一头淡蓝色的长发，神色有些抑郁。

    “又做噩梦了么……我不甘心，什么天生抗元素体，我不信！我秦枫是天才，是老祖亲口承认的百年难得一见的天才！”

    秦枫不由捏紧了拳头，原本抑郁的神色一扫而空，眉宇间透出一股不甘与傲气。
</p>
</body>
</html>

3.文本样式

 <style>
        h1{
            color: rgb(0,300,2894);
        }
        div{
            /*设置透明度*/
            color: rgba(0,300,2894,0.05);
        }
        p{
            /*行高和块高度一致就可以上下居中*/
            /*设置文本第一行空格*/\
        /*首行收进*/
            text-indent: 3em;
            background: darkgrey;
            height: 320px;
            line-height: 320px;
        }
        /*下划线*/
        .l1{
            text-decoration: underline;
        }
        /*中划线*/
        l2{
            text-decoration: line-through;
        }
        /*上划线*/
        l3{
            text-decoration: overline;
        }
        /*a标签去下划线*/
        a{
            text-decoration: none;
        }
        /*水平对齐*/
        img,span{
            vertical-align: middle;
        }
    </style>

4.超链接伪类于阴影

    <style>
       a{
           text-decoration: none;
           color: #121212;
       }
        /*鼠标悬浮的颜色*/
        a:hover{
            color: aliceblue;
        }
        /*鼠标按住未释放的颜色*/
        a:active{
            color: darkgrey;
        }
        /*以访问*/
        a:visited{
            color: darkorchid;
        }
        /*阴影*/
        #pd{
            text-shadow: darkgrey 10px 10px 34px;
        }
    </style>

5.列表

外面包个div标签id#nav

6. 背景

  1. 背景颜色

  1. 背景图片

    <style>
      div{
          /*默认图片是平铺的*/
          width: 1000px;
          height: 700px;
          border: 1px solid red;
          background-image: url("/fao.jpg");
      }
        .div1{
            background-repeat: repeat-x;
        }
      .div2{
          background-repeat: repeat-y;
      }
      .div1{
          background-repeat: no-repeat;
      }
    </style>

定位

background-position: 236px 2px: 图片定位

背景图片颜色调试网址：https://www.grabient.com/

4. 盒子模型

1.什么是盒子模型

margin: 外边距

border：边框

padding：内边距

可在浏览器中调节

2. 边框

  1. 边框的粗细
  2. 边框的样式
  3. 边框的颜色

虚线 ：dashed

3.外边距

margin: 0 auto;
/*
9代表上下 auto代表左右对齐
*/
margin：0 0 0 0;
/*
四个0代表上左下右
*/
margin：0;

/*
0代表上左下右
*/

4.内边距

同理外边距

5.圆角边框

border-radius:100px; 可用于图片

6.盒子 阴影

可以去源码之家下页面。

5.浮动

1， 标准文档

块级元素

h1~h6 p div 。。。

行类元素

span a img strong..

块可以包含行，而行却不可以包含块。

2. dislay

/*
block 块级
inlie 行内元素
inline-block 即使行又是块
none
*/

3. float

1，左右浮动

float:right;
float:left;

4.父级边框塌陷的问题

clear

/*clear: right;右侧不允许有浮动元素
clear: left; 左侧不允许有浮动元素
clear: both; 两侧不允许有浮动元素
clear: none;
*/

解决浮动

  1. 增加父级元素的高度

  2. 增加一个空的div，清除浮动

    
.cleart{
    clear: both;
    margin: 0;
    padding: 0;
}

  3. overflow

    在父级元素·中增加一个 overflow;hidden;

  4. 在父类添加一个伪类

    #father:aftert{
    content:‘’:
    display: block；
    clear: both;
}

定位（position）

1.相对定位（relative）

position: relative; 
top:20px  上
bottom:20px 下
right：20px 左
left：右

相对于原来的位置进行了偏移

一个案例；

2. 绝对定位（absolute）

  1. 父级没有定位的前提下，相对浏览器定位进行偏移

  2. 给父级定位用相对定位，相对于父级定位进行偏移，只能在父级的范围内移动

    position:absolute

3. 固定定位（fixed）

position:fixed;

4. 层次 index

z-inde: 200; 层次
opacity：0.5; 背景透明度。

动画

去菜鸟教程看，或者网页找

推荐阅读