javaweb入门3之css-CFANZ编程社区

前言：
🐉思想：倘若你有一种思想，我也有一种思想，而且我们彼此交流这些思想，那么，我们将各有两种思想。
👏作者简介：我是笑霸final，一名热爱技术的在校学生。
📝个人主页：笑霸final的主页 📕系列专栏：：本文写在java专栏 📧如果文章知识点有错误的地方，请指正！和大家一起学习，一起进步👀
🔥如果感觉博主的文章还不错的话，请👍三连支持👍一下博主哦

javaweb入门3之css

一、css简介
二、javaweb入门前章内容
三、本文用到的单词
四、css写入的位置
五、css语法

5.1.1、实列：

六、css常用的选择器的分类

6.1.0 简单选择器

6.1.1、名称类型
6.1.2、类样式
6.1.3id选择器
6.1.4、总结代码机器效果：
七、链接css文件和html

八、相关的属性

8.1 margin属性
8.2 padding属性
8.3 background-color属性
8.4 border
8.5 position

一、css简介

CSS （层叠样式表层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。
CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

二、javaweb入门前章内容

1.javaweb入门1.html

2.Javaweb入门2之HTML(table 、form)

三、本文用到的单词

link: 链接
font: 字体
background: 背景
type类型
margin：边缘
padding：填充
position: 位置
absolute: 绝对的
relative ：相对的
stylesheet: 样式表

四、css写入的位置

在html的<head> 在这里写css代码 </head>中间写代码

javaweb入门3之css_jaaweb

五、css语法

javaweb入门3之css_jaaweb_02

选择器指向您需要设置样式的 HTML 元素。如 h1、p、div等
每条声明都包含一个 CSS 属性名称和一个值，以冒号分隔。
多条 CSS 声明用分号分隔，声明块用花括号括起来。

5.1.1、实列：

javaweb入门3之css_css_03

六、css常用的选择器的分类

我们可以将 CSS 选择器分为五类：
简单选择器（根据名称、id、类来选取元素）
组合器选择器（根据它们之间的特定关系来选取元素）
伪类选择器（根据特定状态选取元素）
伪元素选择器（选取元素的一部分并设置其样式）
属性选择器（根据属性或属性值来选取元素）

6.1.0 简单选择器

6.1.1、名称类型

p{/*p表示标签 表示所有p标签都遵循大括号的规则*/
        color: red;
}
对应的就是html的所有<p>标签
body{
        margin:0px;
        padding: 0px;
}

6.1.2、类样式

以点（.）开头后面跟类名
如我有一个类叫 f20

.f20{
        font-size: 20px;
        color: red;
  }

这种最前有 . 的就是类选择器对应的是所有带有 class=“f20”

javaweb入门3之css_css_04

6.1.3id选择器

以井号（＃）开头，后跟该元素的 id。

javaweb入门3之css_前端_05

javaweb入门3之css_jaaweb_06

6.1.4、总结代码机器效果：

1.html部分

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style type="text/css">/*注释style标签内是CSS环境，可以写css代码。*/
      /*标签样式表*/
      /*
       1.为啥需要CSS
       2.css的分类：标签样式表、类样式表、id样式表
       组合样式表。
       3.位置分类 ，嵌入式(在标签内部以属性的方式存在)、内部(被style包裹)、
       停用外部的css
       */</style> 
    <link rel="stylesheet" href="day_css01.css">
  
    <title></title>
  </head>
  <body>
    <p>这里是红色1</p>
    <p>这里是红色2</p>
    <p class="f20">这里是红色3</p>
    <p id=p4>这里是红色4</p>
    <div>
      <pstyle="font-size: 60px;"><span>你好</span></p>
      <spanstyle="font-size: 60px;">世界</span>
      <p>!!!!</p>
    </div>
  </body>
</html>

css部分

p{/*p表示标签 表示所有p标签都遵循大括号的规则*/
        color: red;
  }
      /*有点这是类样式*/
  .f20{
        font-size: 20px;
        color: blue;
  }
      /*#表示id样式*/
  #p4{
        color:deepskyblue;
        background-color: red;
  }
  div p{
        color: #00BFFF;
  }

效果：

javaweb入门3之css_开发语言_07

上面的代码你可能会好奇两个文件是怎么链接起来的接下来就是链接部分

七、链接css文件和html

代码

<link rel="stylesheet" href="day_css01.css">

== link标签是在html语言中网页头部head中的元素==，可以被多次使用，该元素的用途是与外部文件建立链接.

1、rel=“定义当前文档与被链接文档之间的关系，这里是调用外部文件，stylesheet即代表css样式表。”
2、href=“定义被链接文档的位置，这里链接所指向的是：同一目录下名为style.css的文件。”
建议把css代码和html代码分开写然后用link 引入

八、相关的属性

8.1 margin属性

1.margin 简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值。
2.块级元素的垂直相邻外边距会合并，而行内元素实际上不占上下外边距。行内元素的的左右外边距不会合并。同样地，浮动元素的外边距也不会合并。允许指定负的外边距值，不过使用时要小心。
3. 方向上、右、下、左
4.可以使用负值。

实例1.
margin:10px 5px 15px;
上外边距是 10px
右外边距和左外边距是 5px
下外边距是 15px

实例 2
margin:100px;
所有 4 个外边距都是 100px

8.2 padding属性

*设置 p 元素的 4 个内边距：
*用法和margin一样有4个值。方向上、右、下、左
*不能用负值。

8.3 background-color属性

设置背景颜色

javaweb入门3之css_前端_08

8.4 border

设置边框的样式：

javaweb入门3之css_开发语言_09

边框是双线 4像素

8.5 position

定位 h2 元素：
常用两个1.绝对定位 2.相对定位

javaweb入门3之css_java_10

代码

<!DOCTYPE html>
<html>
  <head>
    <style type="text/css">
      /*
       css盒子模型
       1.border边框
       2.margin 间距
       3.padding 填充
       */
      #div1{
        width: 400px;
        height: 400px;
        background-color: aqua;
        border: double 4px;
        
        
      }
      #div2{
        width: 200px;
        height: 200px;
        background-color:#FF0000;
        border: double 4px;
        /*margin:100px 0px*/
        margin-left: 100px;
        margin-top: 100px;
        /*margin:100px 表示上下左右都是100
         margin:100px 0px 表示上下100左右是0
         margin 按照上右下左的顺序
         * */
        
      }
        #div3{
        margin: 0px;
        padding: 0px;
        width: 26%;
        height: 100px;
        background-color:chartreuse;
        border: double 4px;
        margin: 0px;
        position: absolute;
        float: left;
  
      }
      body{
        margin:0px;
        padding: 0px;
      }
    </style>
    <meta charset="UTF-8">
    <title></title>
  </head>
  <body>
    <div id=div1> 
      <div id=div2>
        <div id="div3">
          
        </div>
      </div>
    
    </div>
  </body>
</html>

javaweb入门3之css_前端_11

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
      div{
        padding: 0px;
        margin: 0px;
      }
      
      #div1{
        background-color: red;
        width: 400px;
        height: 400px;
        /*绝对定位*/
        position: absolute;
        left: 100px;
        top: 100px;
        
      
      }
      .div2{
        background-color:#0000FF;
        width: 400px;
        height: 400px;
        /*相对定位*/
        position: relative;
        float: right;
      }
      .div3{
        background-color:chartreuse;
        width: 400px;
        height: 400px;
        /*相对定位*/
        position: relative;
        float: right;
      }
      #b1{
        position: relative;
        float: left;
        width: 50px;
        height: 50px;
      }
      #b2{
        position: relative;
        float:right;
        width: 50px;
        height: 50px;
      }
    </style>
  </head>
  <body>
    <div id=div1>&nbsp;" </div>
    <div class="div2">&nbsp;</div>
    <div class="div3">&nbsp;
    <button id=b1  name="hahah" value="1">1</button>
    <button id=b2 name="hahah" value="2">2</button>
    </div>
  </body>
</html>