JavaWeb（二）CSS

22jimmy2025-08-22 7:00

1.CSS定义和基本选择器

CSS定义：cascading style sheet 层叠样式表。

CSS使用：

1、通过选择器选择上标签

2、在选择的标签上设置样式

选择器 {

color : red

属性名1:属性值1;

属性名2:属性值2;

属性名3:属性值3;

属性名4:属性值4;

}

选择器分类：

标签选择器： p{}
类选择器： .className{}
id选择器： #id{}

一些常见的样式：

color:red; 文字颜色

font-size:40px;

background-color:blue;

text-decoration:underline;

text-decoration:none; //去掉下划线

二、CSS使用思想

正确的思路，就是用所谓"公共类"的思路，就是我们类就是提供"公共服务"，比如有红、大、线，一旦携带这个类名，就有相应的样式变化。

总结：

1）不要去试图用一个类选择器，把某个标签的所有样式写完。这个标签要多携带几个类，共同造成这个标签的样式。

2）每一个类要尽可能小，有"公共"的概念，能够让更多的标签使用。

css 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    .red{

      color: red;

    }

    .font-size{

      font-size: 50px;

    }

    .text-decoration{

      text-decoration: underline;

    }

  </style>

</head>

<body>

<p class="red font-size" >段落1</p>

<p class="red text-decoration">段落2</p>

<p class="font-size text-decoration">段落3</p>

<p class="text-decoration red font-size">段落4</p>

</body>

</html>

三、盒模型

盒子中主要的属性就5个：width、height、border、padding:内边距、margin：外边距

css 复制代码

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

  <style>

    /*去掉标签默认带着的padding和margin*/

    *{

      margin: 0;

      padding: 0;

    }

    div{

      background-color: chocolate;

      width: 100px;

      height: 100px;

      padding: 10px;

      margin: 10px;

      border: blueviolet solid 3px;

    }

    .box2{

      background-color: red;

      width: 100px;

      height: 100px;

      padding: 10px;

      margin: 10px;

      border: blueviolet solid 3px;

    }

  </style>

</head>

<body>

<div></div>

<div class="box2"></div>

</body>

</html>