【狂神说JAVA】CSS3最新教程快速入门通俗易懂

最新推荐文章于 2023-10-26 10:13:27 发布

软件柠檬

最新推荐文章于 2023-10-26 10:13:27 发布

阅读量302

点赞数 2

文章标签： css 前端

本文链接：https://blog.csdn.net/qq_44005101/article/details/117135757

版权

【狂神说JAVA】CSS3最新教程快速入门通俗易懂

菜鸟教程
 【【狂神说Java】CSS3最新教程快速入门通俗易懂-哔哩哔哩】

什么是CSS和发展史

Cascading Stule Sheet层叠级联样式表
CSS：表现（美化网页）
字体，颜色，边距，高度，宽度，背景图片，网页浮动
在这里插入图片描述
左边为HTML，右边为CSS。
发展史
CSS1.0
CSS2.0 DIV块+CSS，HTML与CSS结构分离的思想，网页变得很简单，SEO
CSS2.1 浮动，定位
CSS3.0 圆角，阴影，动画… 浏览器兼容性~

CSS的快速入门及优势

创建css文件
idea–>new–>stylesheet
方式一：
我的第一个网页.html

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--规范，<style>可以编写CSS的代码，每一个声明最好使用分号结尾
    语法：
        选择器{
            声明1：
            声明2：
            声明3：
        }
    -->
    <style>
        h1{
            color: red;
        }
    </style>
</head>

方式二
(建议使用这种规范)：
我的第一个网页.html

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

style.css

h1{
    color: red;
}

CSS的优势：
1.内容和表现分离
2.网页结构表现统一，可以实现复用
3.样式十分丰富
4.建议使用独立于html的文件
5.利用SEO，容易被搜索引擎收录！

四种CSS导入方式

方式一

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

内部样式

 <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--内部样式-->
    <style>
        h1{
            color: green;
        }
    </style>
</head>

外部样式

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

优先级：就近原则
扩展：外部样式的两种写法
链接式 html标签，推荐使用

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

导入式 先展示结构，后渲染；css：2.1

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--导入式:先展示结构，后渲染-->
    <style>
    	@import url("css/style.css");
    </style>
</head>
<body>
<h1>我是标题</h1>
</body>
</html>

三种基本选择器–重要

作用：选择页面上的某一个或者某一类元素
标签选择器 会选择页面上所有这个标签的元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择页面上所有这个标签的元素*/
        h1{
            color: antiquewhite;
            background: blueviolet;
            border-radius: 24px;
        }
        p{
            font-size: 80px;
        }

    </style>
</head>
<body>
<h1>学java</h1>
<h1>学java</h1>
<p>听狂神说</p>
</body>
</html>

类选择器格式：.class的名称{}
好处：可以多个标签归类，是一个class，可以复用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*标签选择器，会选择页面上所有这个标签的元素
        好处：可以多个标签归类，是一个class，可以复用
        */
        
        .black{
            font-size: 80px;
        }
        .bluee{
            color: black;
        }
        
    </style>
</head>
<body>
<h1 class="bluee">学java</h1>
<h1 class="black">学java</h1>
<h1 class="bluee">听狂神说</h1>

</body>
</html>

id 选择器 id必须保证全局唯一！
格式： #id 名称{}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*id选择器：id必须保证全局唯一！
        #id 名称{}
        */
        #qinjiang{
            color: blueviolet;
        }
        .style1{
            color: red;
        }
        h1{
            color: black;
        }
        
    </style>
</head>
<body>
<h1 id="qinjiang" class="style1">标题1</h1>
<h1 class="style1">标题2</h1>
<h1 class="style1">标题3</h1>
<h1>标题4</h1>
<h1>标题5</h1>

</body>
</html>

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

选择器	功能
标签选择器	选择一类标签标签{}
类选择器class	选择所有class属性一致的标签 .class{}
id选择器	全局唯一 #id{}

层次选择器

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

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

2.子选择器，一代，儿子

 /*3.相邻兄弟选择器 同辈，只有一个，向下*/
        .active + p{
            background: blue;
        }

3.相邻兄弟选择器同辈，只有一个，向下

/*2.子选择器，一代，儿子*/
        body>p{
            background: green;
        }

4.通用兄弟选择器，当前选中元素的向下的所有兄弟元素

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

结构伪类选择器

伪类：条件
p:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--避免使用class和id选择器-->
    <style>
        /*ul的第一个子元素*/
        ul li:first-child{
            background: aqua;
        }
        /*ul的最后一个子元素*/
        ul li:last-child{
            background: green;
        }
        /*选中p1 : 定位到父元素，选择当前第一个元素
           选择当前p元素的父级元素，选中父级元素的第一个
           并且是当前元素才生效
        */
        p:nth-child(2){
            background: blueviolet;
        }
        /*选中父元素，p元素下的第二个，类型为p的第二个*/
        p:nth-of-type(1){
            background: yellow;
        }
        a:hover{
            background: black;
        }
    </style>
</head>
<body>
<!--    <a href=""></a>-->
<!--    <h1>h1</h1>-->
    <p>p1</p>
    <p>p2</p>
    <p>p3</p>
    <ul>
        <li>li1</li>
        <li>li2</li>
        <li>li3</li>
    </ul>
    <p>p4</p>
</body>
</html>