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>
相关推荐
鲸落落丶10 小时前
webpack学习
前端·学习·webpack
何中应10 小时前
MyBatis-Plus字段类型处理器使用
java·数据库·后端·mybatis
聪明的笨猪猪11 小时前
Java SE “面向对象”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
excel11 小时前
深入理解 3D 火焰着色器:从 Shadertoy 到 Three.js 的完整实现解析
前端
聪明的笨猪猪11 小时前
Java 集合 “List + Set”面试清单(含超通俗生活案例与深度理解)
java·经验分享·笔记·面试
毕设源码-郭学长11 小时前
【开题答辩全过程】以 PHP茶叶同城配送网站的设计与实现为例,包含答辩的问题和答案
开发语言·php
光影少年11 小时前
vue打包优化方案都有哪些?
前端·javascript·vue.js
硅谷工具人12 小时前
vue3边学边做系列(3)-路由缓存接口封装
前端·缓存·前端框架·vue
Miraitowa_cheems12 小时前
LeetCode算法日记 - Day 59: 字母大小写全排列、优美的排列
java·数据结构·算法·leetcode·决策树·职场和发展·深度优先