java前端学习之CSS3_java 程序调用css3-CSDN博客

本文链接：https://blog.csdn.net/qq_39176095/article/details/116587561

1.认识CSS

1.1 什么是CSS

层叠样式表(Cascading Style Sheets)

作用：美化网页

字体、颜色、边距、高度、背景等等

1.2 语法

选择器{声明1；声明2；声明3；}

1.3 导入方式

内部样式：在标签中编写style属性的css代码

外部样式：CSS方式

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

优先级：就近原则

2.选择器

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

2.1 基本选择器

1.标签选择器：选择一类标签

2.类选择器：选择所有class属性一致的标签

3.id选择器：全局唯一

优先级：不遵循就近原则

id选择器>class选择器>标签选择器

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

<!--    <link rel="stylesheet" href="css/style.css">-->
    <style>
        /*h1{ //1.标签选择器不能单独设置某一个标签的特性*/
        /*    color: #ff0000;*/
        /*    border-radius: 24px;*/
        /*    background: blue;*/
        /*}*/
    /*    2.类选择器的格式  .class的名称{}
           好处，多个标签归类，是同一个class*/
        /*.t1{*/
        /*    color: red;*/
        /*}*/
        /*.t2{*/
        /*    color: green;*/
        /*}*/
        /*.t3{*/
        /*    color: aqua;*/
        /*}*/
    /*  3.id选择器 #id名称{}  id必须保证全局唯一，不能复用 */
    </style>

</head>
<body>

<h1 class="t1">我是标题1</h1>
<h1 class="t2">我是标题2</h1>
<h1 class="t3">我是标题3</h1>


</body>
</html>

2.2 层次选择器

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

2.子选择器：只选择当前下面的一代

3.相邻兄弟选择器：同辈的下面的一个

4.通用选择器：下面的所有同辈元素

/*后代选择器*/
body p{
    background: red;
}
/*子选择器*/
body>p{
    background: green;
}
/*相邻选择器*/
.active + p{
    background: blue;
}
/*通用选择器*/
.active ~ p{
    background: blue;
}