JavaEE进阶-CSS初识

1，css是什么

刚刚前面的文章讲到了HTML，这个是决定我们网页里面有什么，那么这个css是什么呢，css就相当于是网页的一个化妆术，就是给网页元素的样式进行一个改变，可以这么理解这三者的作用

HTML → 网页有什么

CSS → 网页长什么样

JavaScript → 网页能做什么

2，css基本语法

html 复制代码

选择器 {
    属性: 属性值;
}

css的写法就是前面是选择器，然后使用大括号进行括起来，里面就是你要修改的属性了

举个例子先展示一下

css 复制代码

p {
    color: red;
    font-size: 30px;
}

这个就是选择了p这个标签，然后修改p标签里面的字体颜色为红色，大小为30px，可以这么理解这个p：<p> 是 paragraph（段落）标签，表示一个文本段落

3，css三种引入

这个css可以写在三种地方，不单单是要单独写出来，我们来分别介绍一下

（1）内部样式

这个一般写在head里面，下面这个就是表示修改body里面字的颜色以及大小

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body {
            color: red; font-size: 30px;
        }
    </style>
</head>

（2）行内样式

这个就是直接写在对应行的里面，不单独写出来

html 复制代码

<p style="color: black;font-size: 20px;">这是第一段正文。</p>

（3）外部样式

这个就和我们Java中方法单独写出一个类一样，我们也新建一个CSS类的文件，在这个里面进行该样式，这样就比较清楚一些

css 复制代码

body{
    color: red;
    font-size: 40px;
}

注意：上面这三种方式遵循一个就近原则，就好比我们改的样式都不一样，但是我们会先依据行内样式来改，因为这个是离我们数据最近的

4，css选择器

这是 CSS 里面非常重要的一部分。

因为浏览器首先要解决一个问题：

你到底想修改哪个 HTML 元素？

CSS 选择器就是用来解决这个问题的。常见选择器包括标签选择器、class 选择器、id 选择器、通配符选择器以及复合选择器。

（1）标签选择器

这个就是通过标签的形式来选定一些数据，这个就说明我通过p标签选中所有p标签的内容，并且进行修改

html 复制代码

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css测试</title>
    <style>
        /* body {
            color: red; font-size: 30px;
        } */
         p{
            color: #000;
            font-size: 20px;
         }
    </style>
</head>
<body>
    <h1>文章标题</h1>
    <p>这是第一段正文。</p>
    <p>这是第二段正文。</p>
</body>

（2）class类选择器

通过给你的标签里添加class，并且通过class里面的内容来选中，并且修改

css 复制代码

.title{
    color: red;
}

html 复制代码

<div class="title">Java</div>

<div class="title">MySQL</div>

通过.+class内容的形式来选中

我css是重写写在一个类里面的，有些同学可能会遇到说我写在另一个css里面也保存了，但是还是没有显示，是因为什么，因为浏览器并不知道你这两个是关联在一起的，所以要在你HTML的head里面加上一个连接的代码

html 复制代码

<link rel="stylesheet" href="./demo1.css">

后面href里面就是你的另一个css文件的路径了，这里我是写的相对路径

（3）id选择器

这个和上面的class很像，也是在标签里面添加的一个内容，那这个和class选择器的区别在哪：id选择器期盼是不能重复，当然你如果跟上面一样两个都写一样的，也是可以正常修改出来的，但是在以后的代码规范中最好不要重复

html 复制代码

<div class="title" id="id选择器">Java</div>

css 复制代码

 #id选择器{
    color: red;
 }

（4）通配符选择器

通过*{}的形式来修改，这个修改就是针对于所有的内容都改

css 复制代码

*{
    color: blue;
}

（5）复合选择器

先解释一下这里的ul和li，ul表示无序列表，li是里面的每个元素，然后如果你把ul换成ol的话就是有序列表了，就会有编号

css 复制代码

div span{
    color: pink;
}
a{
    color: red;
} 
ul li a{
    color: red;
} 
ul a{
    color: red;
} 
ul>li>a{
    color: red;
}
li>a{
    color: red;
}

html 复制代码

    <div class="title" id="id选择器">Java
        <span>
            HTML
        </span>
    </div>
    <div class="title">MySQL</div>
    <ul>
        <li>Java</li>
        <li>MySQL</li>
        <li>HTML</li>
        <li>
            <a href="https://www.baidu.com/index.php?tn=68018901_58_oem_dg">baidu</a>
        </li>
    </ul>

这里向我们展示了复合选择器的写法，就是跟一层级一层级的去找对应的目标一样，我通过div然后再找到里面的span，来对span里面的内容进行修改，还有比如列表中的我通过ul找到li再找到里面的a超链接来进行修改，当然如果还有一个li里面也有a超链接的会也会进行修改，这个不是绝对的一定通过ul的第一个li来去找，是只要符合要求的都会去找到然后进行修改，还有如果层级后面没有>的话，就是代表后面可以填子也可以填孙，就是我可以直接通过ul找到a，如果写了>的话，就只能是写你的下一层级（子），就好比我如果写ul>a的话，就找不到，因为ul的下一层级是li

当然我们可以同时选择多个，就是通过，来隔开就好了

css 复制代码

p,
div {
    color: red;
}

5，css基础属性

（1）color ------ 字体颜色

color的几种写法，常见的一般有三种

css 复制代码

color: red;
color: rgb(255, 0, 0);
color: #ff0000;

第一种就是正常的文字输入，第二种是red green blue的三和混合比例，第三种是十六进制表示

（2）font-size ------ 字体大小

这里的基本单位就是px（像素）

css 复制代码

font-size: 16px;
font-size: 20px;
font-size: 30px;

（3）border ------ 边框

css 复制代码

div span{
    color: pink;
    border: 2px solid red;
} 
div span{
    border-width: 2px;
    border-style: solid;
    border-color: red;
}

你可以写在一行，也可以通过不同的提示词来进行修改，都是可以达到效果的

（4）width 和 height

css 复制代码

 div span{
    display: inline-block;
    width: 200px;
    height: 200px;
     background-color: pink;
 }

这里讲到了一个概念是块级元素以及行内元素，我们修改的宽和高是针对块级元素来讲的，我们修改的内容得是一个块，才能进行修改，那我们刚刚代码中的HTML是span，是行内元素，那就需要通过一个display，将我们的行内元素转换为块级元素了

常见的块级元素有哪些呢：

一般就是这三类，而：

这两个就属于是行内元素了，修改宽高对他们没有反应

（5）padding ------ 内边距，margin ------ 外边距

这是我们网页常见的调试，按F12来进行调试，调试中欢迎的左边第二个是一个选择选项，我们按它就可以在你的页面中选择一块区域进行调试，看他的源代码之类的

那右面的那个图就是我们要讲到的，里面包含了padding以及margin，我们可以把HTML理解为一个盒子

padding是内边距，就相当于是我们的HTML相对于这个框框在哪个区域，margin是每个盒子之间的距离

padding
→ 内容和自己的边框之间

margin
→ 自己和其他元素之间

所以我们真正的宽度不仅仅是border，还得加上padding，所以这就展示了我代码中的一个疑惑

css 复制代码

 div span{
    display: inline-block;
    width: 200px;
    height: 200px;
     background-color: pink;
     padding: 50px; 
 }

可以看出来我的范围明显的增大了，我现在padding没有写上下左右，就是默认的相对于左上角来说的，所以可以看出来差别，当然这CSS里面的知识点很多很杂，我们不需要刻意的去背，可以练习加上ai查找，并且我在这推荐一个CSS的学习网站CSS：层叠样式表 | MDN

JavaEE进阶-CSS初识

目录

1，css是什么

2，css基本语法

3，css三种引入

（1）内部样式

（2）行内样式

（3）外部样式

4，css选择器

（1）标签选择器

（2）class类选择器

（3）id选择器

（5）复合选择器

5，css基础属性

（1）color ------ 字体颜色

（2）font-size ------ 字体大小

（3）border ------ 边框

（4）width 和 height

（5）padding ------ 内边距，margin ------ 外边距