认识CSS、选择器-CSDN博客

本文链接：https://blog.csdn.net/qq_44719987/article/details/120774504

什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS：表现（美化网页）

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

如何学习

1、CSS是什么

2、CSS怎么用

3、CSS选择器

4、美化网页（文字，阴影，超链接，列表，渐变......）

5、盒子模型

6、浮动

7、定位

8、网页动画（特效效果）

一、css快速入门：

style

基本入门

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

<!--规范 <style>可以编写css的代码
语法：
   选择器{
   声明1；
   声明2；
   声明3；
   }
-->
    <link rel="stylesheet" href="css/style.css">

    <style>
        h1{
            color:red;
        }
    </style>
</head>
<body>

<h1>我是标题</h1>
</body>
</html>

css的优势：

1、内容和表现分离

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

3、样式十分的丰富

4、建议使用独立于html的css文件

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

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

<!--内部样式-->
    <style>
        h1{
            color:green;
        }
    </style>

<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

</head>
<body>

<!--优先级：就近原则-->

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

<h1>我是标题</h1>

</body>
</html>

外部样式两种写法

1、链接式：

<!--外部样式-->
    <link rel="stylesheet" href="css/style.css">

2、导入式：@import是CSS2.1特有的！

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

二、选择器

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

（一）基本选择器：

1、标签选择器

<style>
    /*标签选择器，会选择到页面上所有的这个标签的元素*/
    h1{
        color:#a13d30;
        background: green;
        border-radius: 24px;
    }
    p{
        font-size: 80px;
    }
</style>

2、类选择器 class:选择所有class属性一致的标签，跨标签。类名{}

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

    <style>
        /*类选择器的格式  .class的名称{}
        好处：可以多个标签归类，是同一个 class,可以复用
        */
        .qinjiang{
            color:#a13d30;
        }
        .kuangshen{
            color: aqua;
        }

    </style>
</head>
<body>

<h1 class="qinjiang">标题1</h1>
<h2 class="kuangshen">标题2</h2>
<h3>标题3</h3>

<p class="qinjiang">P标签</p>

</body>
</html>

3、id选择器：全局唯一！ #id名{}

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

    <style>
        /* id选择器：id必须保证全局唯一！
           #id名称{}
           优先级：
           不遵循就近原则，固定的
           id选择器 > class选择器 > 标签选择器

           */
        #qinjiang{
            color:#ff008a;
        }
        .style1{
            color:#02ff00;
        }
        h1{
            color:#2d1dc1;
        }
    </style>
</head>
<body>

<h1 class="style1" id="qinjiang">标题1</h1>
<h1 class="qinjiang">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>

</body>
</html>

优先级：id>class>标签

（二）层次选择器

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

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

2、子选择器：一代，儿子

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

3、相邻兄弟选择器同辈

/*相邻兄弟选择器: 只有一个，相邻（向下）*/
.active+p{
    background: #a13d30;
}

4、通用选择器

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

（三）结构伪类选择器

伪类：条件

/*ul的第一个子元素*/
ul li:first-child{
  background: bisque;
}
/*ul的最后一个元素*/
ul li:last-child{
    background: red;
}

（四）属性选择器

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: #a13d30;
            text-align: center;
            color:gainsboro;
            text-decoration: none;
            margin-right: 5px;
            font:bold 20px/50px Arial;
        }

        /*属性名   属性名=属性值（正则）
        = 绝对等于
        *= 包含这个元素
        ^= 以这个开头
        $= 以这个结尾
        */

        /*存在id属性的元素   a[]{}*/
        a[id]{
            background: yellow;
        }
        a[id=first]{
            background: #02ff00;
        }

        /*class中有links的元素*/
        a[class*="links"]{
            background: yellow;
        }
        /*！* 选中href中以http 开头的元素*!*/
        a[href^=http]{
            background: yellow;
        }
        a[href$=jpg]{
            background: yellow;
        }

    </style>
</head>
<body>

<p class="demo">
    <a href="http://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" class="links item">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="links item">9</a>
    <a href="abc.doc" class="links last">10</a>
</p>
</body>
</html>