CSS（1）什么是CSS和选择器

1.CSS 

　　1.1 CSS是什么

　　　　Cascading Style Sheet 层叠级联样式表

　　　　Css:表现（美化网页） 字体，颜色，边距，高度，宽度，背景图片，网页定位......

　　1.2 发展史

　　1.3 CSS快速入门

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

    <!--规范，<style> 可以编写css的代码,没有一个声明，最好使用分号结尾
        语法：
            选择器{
                声明1；
                声明2;
                声明3;
            }
    -->
    <style>
        h1{
            color:red;
        }
    </style>
</head>
<body>

    <h1>我是标题</h1>

</body>
</html>

　　建议使用：

 　　css的优势：

    • 内容和表现分离

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

    • 样式十分的丰富

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

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

　　1.4 CSS的3种导入方式

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

    <!--内部样式 -->
    <style>
        h1{
            color: green;
        }
    </style>
    <!--外部样式 -->
    <link rel="stylesheet" href="../../lesson01/1.我的第一个css程序/css/style.css">
</head>
<body>

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

    <!-- 行内样式：在标签元素中，编写一个style属性，编写样式即可-->
    <h1 style="color: red">我是一个标题</h1>

</body>
</html>

 2.选择器

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

　　2.1 基本选择器

　　1.基本选择器：选择一类标签 标签{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择到页面上所有的这个标签的元素*/
        h1{
            color: red;
            background: aqua;
            border-radius: 20px;
        }
    </style>
</head>
<body>
    <h1>学Java</h1>
    <h1>学前端</h1>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>类选择器</title>
    <style>
        /*
            类选择器的格式， .class的名称{}
            好处，可以多个标签归类，是同一个class,可以复用
        */
        .one{
            color: aqua;
        }
        .two{
            color: bisque;
        }
    </style>
</head>
<body>

    <h1 class="one">学Java</h1>
    <h1 class="two">学MySQL</h1>
    <h1 class="two">学前端</h1>
</body>
</html>

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style>
        /*id 选择器 : id必须保证全局唯一！
        语法： # id的名字{}
        优先级：id选择器>class选择器>标签选择器
        */
        #one{
            color: aquamarine;
        }
    </style>
</head>
<body>

</body>
    <h1 id="one">努力学习Java</h1>
</html>

 

　　2.2 层次选择器

　　　　1. 后代选择器：在某个元素的后面   祖爷爷 爷爷 爸爸 你

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

　　　　2.子选择器

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

　　　　3.相邻兄弟选择器

 /*相邻兄弟选择器：只有一个，相邻向下*/
        .one + p{
            color: azure;
        }

　　　　4.通用选择器 

   /*通用兄弟选择器，当前选中元素的向下的所有兄弟元素*/
        .one ~p{
            color: aqua;
        }

 

　　2.3结构伪类选择器

   /*选择到li 第一个内容和最后一个内容*/
        ul li:first-child{
            color: burlywood;
        }
        ul li:last-child{
            color: aqua;
        }

　　2.4属性选择器（常用）

　　id+class 结合~

 

 

 

 

 

 

 

 

posted @ 2022-03-05 21:59  十三加油哦  阅读(45)  评论(0)    收藏  举报