JavaWeb(二)CSS

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>
相关推荐
兰亭妙微14 小时前
2026年UX/UI五大趋势:AI、AR与包容性设计将重新定义用户体验
开发语言·ui·1024程序员节·界面设计·设计趋势
lang2015092815 小时前
Spring Boot Actuator深度解析与实战
java·spring boot·后端
fhsWar15 小时前
Vue3 props: `required: true` 与 vant 的`makeRequiredProp`
前端·javascript·vue.js
懒羊羊不懒@15 小时前
Java—枚举类
java·开发语言·1024程序员节
zerolala15 小时前
Java容器常用方法
java·1024程序员节
m0_7482402515 小时前
C++智能指针使用指南(auto_ptr, unique_ptr, shared_ptr, weak_ptr)
java·开发语言·c++
lang2015092815 小时前
Spring注解配置全解析
java·后端·spring
Evand J15 小时前
【MATLAB例程】自适应渐消卡尔曼滤波,背景为二维雷达目标跟踪,基于扩展卡尔曼(EKF)|附完整代码的下载链接
开发语言·matlab·目标跟踪·1024程序员节
Qyt-Coding15 小时前
flowable学习
java
崎岖Qiu15 小时前
【SpringAI篇01】:5分钟教会你使用SpringAI (1.0.0稳定版)
java·spring boot·后端·spring·ai