JAVA EE(进阶)_CSS

人与人之间总是徐徐疏离                                           
                                       ——陳長生.

---

 ❀主页：陳長生.-CSDN博客❀
📕上一篇：JAVA EE(进阶)_HTML-CSDN博客

---

1.CSS

1.1.先容

如果说HTML是前端的骨架，那么CSS就是前端的外表
可以做到美化网页的效果
1.2.语法

   <style>  
          p{
             
          }
  </style>
  style：用于定义元素的外观与格式
p：被改变的元素
style一般在head中设置
2.CSS选择器

2.1.标签选择器

css中自带的标签，将它原本的样式改变

1. <html lang="en">
2. <head>
3.     <title>CSS</title>
4.     <style>
5.         p{
6.             color: aqua;
7.         }
8.     </style>
9. </head>
10. <body>
11.     <p>我是自带的p标签</p>
12. </body>
13. </html>

复制代码

将p标签中添加一个颜色为青色的数值
效果：

2.2.class选择器

自定义变量，用于标签中的class类
创建时，变量前面要有个“.”

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.    
6.      <style>
7.         .ccs{
8.             color: aqua;            
9.         }
10.      </style>
11. </head>
12. <body>
13.     <p class="ccs">我是自定义的class变量</p>
14. </body>
15. </html>

复制代码

将p标签中类中给一个自定义变量，该变量为一个颜色为青色的数值
效果:

2.3.id选择器

自定义变量，用于标签中的id属性
创建时，变量前面要有个“#”

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         #ccs{
7.             color: aquamarine;
8.         }
9.     </style>
11. </head>
12. <body>
13.     <p id="ccs">我是自定义的id变量</p>
14. </body>
15. </html>

复制代码

将p标签中类中给一个自定义变量，该变量为一个颜色为青色的数值
效果：

2.4.复合选择器

实用于表格标签，用于找寻列级别标签并设置样式

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         ul li{
7.             color: aquamarine;
8.         }   
9.         ul li a{   
10.             color: rgb(255, 0, 0);
11.         }
12.     </style>
13. </head>
14. <body>
15.     <ul>
16.         <li>第一行第一列</li>
17.         <li>第一行第二列</li>
18.     </ul>
19.     <ul>
20.         <li>第二行第一列</li>
21.         <li> <a href="#">第二行第二列</a> </li>
22.         <li>第二行第三列</li>
23.     </ul>
24. </body>
25. </html>

复制代码

将ul行li列的元素都赋为青色
将ul行li列a链接的元素赋为红色

2.5.通配符选择器

        上述列举的都是给单个属性才气利用的，比方class选择器只能在class中利用，id选择器只能在id中利用，而通配符可以给全局利用

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         *{
7.             color: aqua;
8.         }
9.     </style>
10. </head>
11. <body>
12.     <p>1</p>
13.     <p>2</p>
14.     <p>3</p>
15. </body>
16. </html>

复制代码

将全局的颜色都赋为青色

3.CSS样式

3.1.color

设置字体颜色

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         .color{
7.             color: aqua;
8.         }
9.     </style>
10. </head>
11. <body>
12.     <p class="color">颜色</p>
13. </body>
14. </html>

复制代码

将颜色设置为青色
效果：

3.2.font-size

设置字体大小

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         .font{
7.             font-size: 100px;
8.         }
9.     </style>
10. </head>
11. <body>
12.     <p class="font">字体</p>
13. </body>
14. </html>

复制代码

将字体设置为100像素大小
效果：

3.3.border

设置边框

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         .border{
7.             border-width: 10px;
8.             border-style: solid;
9.             border-color:aquamarine
10.         }
11.     </style>
12. </head>
13. <body>
14.     <p class="border">边框</p>
15. </body>
16. </html>

复制代码

border-width：边框粗细
border-style：边框样式
border-color：边框颜色
效果：

也可以单独为边框的一遍设置粗细

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         .border{
7.            border-top: 10px;
8.            border-bottom: 20px;
9.            border-left: 30px;
10.            border-right: 40px;
11.            border-style: solid;
12.            border-color: aquamarine;
13.         }
14.     </style>
15. </head>
16. <body>
17.     <p class="border">边框</p>
18. </body>
19. </html>

复制代码

效果：

3.4.width/height

设置宽和高
只实用于块级引用（“div” “h1-h6” “p”）
不实用于行级引用（“a” "span"）

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         .ccs{
7.             height: 100px;
8.             width: 100px;
9.         }
10.     </style>
11. </head>
12. <body>
13.     <p class="ccs">1</p>
14. </body>
15. </html>

复制代码

效果（按F12并移动到对应语句即可出现如图中效果）：

3.5.margin

设置外边距

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         .ccs{
7.             margin: 10px;   
8.         }
10.     </style>
11. </head>
12. <body>
13.    <p class="ccs">外边距</p>
14. </body>
15. </html>

复制代码

设置外边距为10像素
同理，外边距也可以像边框一样，单个给上下左右设置像素大小
效果（F12）

3.6.padding

设置内边距

1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4.     <title>CSS</title>
5.     <style>
6.         .ccs{
7.             padding: 10px;   
8.         }
10.     </style>
11. </head>
12. <body>
13.    <p class="ccs">内边距</p>
14. </body>
15. </html>

复制代码

设置外边距为10像素
同理，外边距也可以像边框一样，单个给上下左右设置像素大小
效果：