【CSS】CSS是什么+选择器

Cx陈

已于 2022-08-01 09:53:31 修改

阅读量110

点赞数

分类专栏：前端文章标签： css html css3

于 2022-07-29 12:34:17 首次发布

本文链接：https://blog.csdn.net/m0_68808168/article/details/126053193

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章目录

1、CSS是什么
2、选择器

1、CSS是什么

1.1、CSS简述

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

CSS：表现（美化网页）

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

发展史

CSS1.0
CSS2.0 DIV（块）+CSS，HTML与CSS结构分离的思想，网页变得很简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性

优势

内容和表现分离
网页结构表现统一，可以实现复用
样式丰富
利于SEO，容易被搜索引擎收录

1.2、四种CSS导入方式

第一种：行内样式

第二种：内部样式

第三种：外部样式之链接式（推荐使用！）

第四种：外部样式之导入式

2、选择器

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

2.1、基本选择器

标签选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    
    <style>
        h1{
            color: red;
        }
        p{
            font-size: larger;
        }
    </style>

</head>
<body>
<h1>欢迎来到Java世界</h1>
<p>请发挥你的才能</p>

</body>
</html>

类选择器 &class选择器

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

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

</head>
<body>
<h1 class="one">标题1</h1>
<h2 class="two">标题2</h2>
<h3 class="one">标题3</h3>
</body>
</html>

Id选择器

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

    <style>
        /*
        id选择器：id必须保证全局为1
        #id名称{}
        */
        #one{
            color: pink;
        }
    </style>

</head>
<body>
<h1 id="one">标题1</h1>
<h1>标题2</h1>

</body>
</html>

2.2、层次选择器

后代选择器

<style>
    body p{
        background: bisque;
       }
</style>

子选择器

<style>
    body>p{
        background: bisque;
    }
</style>

相邻兄弟选择器：向下，一个元素

<style>
    .active+p{
        background: bisque;
    }
</style>

通用兄弟选择器：向下，所有元素

<style>
    .active~p{
        background: bisque;
    }
</style>

2.3、结构伪类选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    避免使用，class，id选择器-->
    <style>
        /*lu的第一个子元素*/
        ul li:first-child{
            background: pink;
        }
        /*lu的最后一个子元素*/
        ul li:last-child{
            background: red;
        }

        /*选中p1：定位到父元素，选择当前的第一个元素
        选择当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效
        */
        p:nth-child(1){
            background: greenyellow;
        }

        /*选中父元素，下的p元素的第二个*/
        p:nth-of-type(2){
            background: black;
        }
        
    </style>

</head>
<body>
<p>p1</p>
<p>p2</p>
<p>p3</p>
<ul>
    <li>li1</li>
    <li>li2</li>
    <li>li3</li>
</ul>
</body>
</html>

2.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: pink;
            text-align: center;
            color: gainsboro;
            text-decoration: none;
            margin-right:5px;
            font:bold 20px/50px Arial;
        }
             /*属性名，属性名=属性值（正则）*/
             /*     =绝对等于
                    *=包含这个值
                    ^=以这个开头
                    $=以这个结尾
                     */
             /*  存在id属性的元素  a[]{}  */
            a[id]{
                background: green;
            }


    </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="" class="links item active" target="_blank" title="test">3</a>
    <a href="" class="links item active" target="_blank" title="test">4</a>
    <a href="" class="links item active" target="_blank" title="test">5</a>
    <a href="" class="links item active" target="_blank" title="test">6</a>
    <a href="" class="links item active" target="_blank" title="test">7</a>
    <a href="" class="links item active" target="_blank" title="test">8</a>

</p>
</body>
</html>

总结

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

Cx陈

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【CSS】CSS是什么+选择器

选择当前p元素的父级元素，选中父级元素的第一个,并且是当前元素才生效。id选择器id必须保证全局为1。/*选中p1定位到父元素，选择当前的第一个元素。/*存在id属性的元素a[]{}*//*类选择器的格式.class的名称{}作用选择页面上的某一个元素或者某一类元素。/*选中父元素，下的p元素的第二个*//*属性名，属性名=属性值（正则）*/相邻兄弟选择器向下，一个元素。通用兄弟选择器向下，所有元素。/*lu的最后一个子元素*//*lu的第一个子元素*/CSS表现（美化网页）......
复制链接

扫一扫