CSS

如何学习

  1. css是什么

  2. css怎么用（快速入门）

  3. css选择器

  4. 美化网页

  5. 盒子模型

  6. 浮动

  7. 定位

  8. 网页动画（特效）

1 什么是css

Cascading Stytle Sheet层叠级联样式表

css：表现（美化网页）

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

1.2 发展史

css1.0

css2.0 DIV+CSS,HTML与CSS结构分离思想，网页变得简单，SEO

css2.1 浮动和定位

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

1.3 快速入门

style

css的优势：

  1. 内容和表现分离

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

  3. 样式十分的丰富

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

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

1.4 css的3种导入方式

行内样式：在标签元素中，编写一个style属性，编写样式即可

内部样式

外部样式

优先级：就近原则

拓展：外部样式两种写法

  • 链接式：

  • HTML

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

  • 导入式：

  • css2.1

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

 

2 选择器

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

2.1 基本选择器

  1. 标签选择器

    会选择到页面上所有的这个标签的元素

  2. 类 选择器 class

    可以多个标签归类，是同一个class，可以复用

  3. id 选择器

    #id名称 id必须保证全局唯一

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

2.2 层次选择器

  1. 后代选择器：在某个元素的后面

    body p{
                background: rebeccapurple;
            }

  2. 子选择器：一代

    body>p{
                background: aqua;
            }

  3. 相邻兄弟选择器

    .active+p{
                background: blueviolet;
            }

  4. 通用选择器

    .active~p{
                background: chocolate;
            }

2.3 结构伪类选择器

伪类：条件

/*ul的第一个子元素*/
ul li:first-child{
    background: chocolate;
}
​
/*ul的最后一个子元素*/
ul li:last-child{
    background: blue;
}
/*选中p1
选中当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效*/
p:nth-child(1){
    background: aqua;
}
​
 /*选中父元素下的p元素的第一个元素*/
p:nth-of-type(1){
    background: aquamarine;
}

2.4 属性选择器（常用）

id + class 结合

<!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: blue;
            text-align: center;
            color: darkgray;
            text-decoration: none;
            margin-right: 20px;
            font: bold 20px/50px Arial;
        }
​
        /*存在id属性的元素*/
        a[id=first]{
            background: aquamarine;
        }
​
        /*class中有links的元素
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */
        a[class*="links"]{
            background: aqua;
        }
​
        /*选中href属性中以HTTP开头的元素*/
        a[href^=http]{
            background: chocolate;
        }
​
        a[href$=pdf]{
            background: cadetblue;
        }
    </style>
</head>
<body>
​
<p class="demo">
    <a href="https://www.baidu.com"class="links item first" id="first">1</a>
    <a href="" class="links item active" target="_blank" title="test">2</a>
    <a href="images/123.html" class="links item ">3</a>
    <a href="images/123.png" class="links item ">4</a>
    <a href="images/123.jpg">5</a>
    <a href="abc" class="links item ">6</a>
    <a href="/a.pdf" class="links item ">7</a>
    <a href="/abc.pdf" class="links item ">8</a>
    <a href="abc.doc" class=