CSS学习,day1

一.CSS基础

1.1 什么是CSS

Cascading Style Sheet 层叠级联样式表

CSS: 表现 (美化网页)

二.CSS入门


2.1 CSS快速入门

1.在idea中创建一个新项目

2.将项目建成如下形式

在这里插入图片描述

3.在css文件夹中创建样式文件style.css

h1{
    color: cornflowerblue;
}

4.在index.html中使用link标签与css文件连接

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>标题</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
<h1>我是标题</h1>

</body>
</html>

此时的效果:

没有css:

在这里插入图片描述

有css:

在这里插入图片描述

总结:css最好独立于html

语法:

<!--    语法:
            选择器{
                statement;
                statement;
                statement;
            }
-->

2.2 CSS导入方式

1.行内样式

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>css学习2</title>
</head>
<body>
<!--行内样式,在标签元素中编写一个style属性,编写样式即可-->
<h1 >我是h1</h1>
</body>
</html>

行内样式在行内直接编写style属性,但是不符合css独立于html的思想。

2.内部样式

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>css学习2</title>
<!--    内部样式-->
    <style>
        h1{
            color: cadetblue;
        }
    </style>
</head>
<body>
<!--行内样式,在标签元素中编写一个style属性,编写样式即可-->
<h1 >我是h1</h1>
</body>
</html>

head中的style标签是内部样式

此时代码中有两个样式,行内样式为在这里插入图片描述

内部样式为在这里插入图片描述

打开网页,发现:
在这里插入图片描述

显示为行内样式。

将行内样式去除,网页显示为:

在这里插入图片描述

结论:行内样式优先度高于内部样式

3.外部样式

h1{
    color: yellow;
}

最终的优先级结论:

就近原则

4.拓展(导入式)

使用@import

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        @import url("css/style.css");
    </style>
</head>
<body>
<h1>css学习</h1>
</body>
</html>

先显示结构,后渲染,会导致一些问题。(css2.1)


三.选择器

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

2.1基本选择器

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

语法:

h1{
            color: darkslategray;
            background: cyan;
            border-radius: 10px;
        }
        p{
            font-size: 80px;

        }

代码:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        /*
        标签选择器,会选择到页面上所有这个标签的元素
        */
        h1{
            color: darkslategray;
            background: cyan;
            border-radius: 10px;
        }
        p{
            font-size: 80px;

        }
    </style>
</head>
<body>
<h1>开心每一天</h1>
<p>小宋的css学习</p>
</body>
</html>

效果:

在这里插入图片描述

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

语法:

/*
        格式:
        .(class的名称){
            statements;
        }
        好处,可以多个标签归类,是同一个class时可以复用。
        */

代码:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>小宋的CSS学习</title>
    <style>
        .c2{
            background-color: cornflowerblue;
            color: darkslategray;
            border-radius: 10px;
        }
        .c3{
            color: burlywood;
        }
    </style>
</head>
<body>
<h1 >大标题1</h1>
<h1 >大标题2</h1>
<h1 >大标题3</h1>
<p >内容1</p>
</body>
</html>

效果:

在这里插入图片描述

3.id选择器:全局唯一

语法:

 /*
        id选择器语法
        #id名称{
            statements;
        }
        id必须保证全局唯一
        */

代码:

<!DOCTYPE html>
<html >
<head>
    <meta charset="UTF-8">
    <title>css学习</title>
    <style>
        #sdawqe{
            color: cornflowerblue;
            background-color: cadetblue;
        }
        #smy{
            background-color: aquamarine;
        }
        #0003{
            background-color: burlywood;
        }
    </style>
</head>
<body>
<h1 >标题一</h1>
<h1 >标题二</h1>
<h1 >标题三</h1>
</body>
</html>

效果:

在这里插入图片描述

注:

在id选择器中,中开头不能为数字,因为在这里id需要遵守变量命名规范,相当于在内存中创建一个类为id的变量。

border-radius可以使背景的边缘变圆滑。

优先级:id选择器>类选择器>标签选择器

来源url
栏目