Java Web 04_2 — CSS（样式、属性、盒子模型、框架式开发）

最新推荐文章于 2024-03-03 21:20:09 发布

文泽路小男孩

最新推荐文章于 2024-03-03 21:20:09 发布

阅读量225

点赞数

文章标签： java web css

本文链接：https://blog.csdn.net/weixin_43508544/article/details/97303509

版权

Java Web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

一、概念
二、CSS的使用：CSS和html的结合方式

一、概念

CSS : Cascading Style Sheets 层叠样式表
- 层叠：多个样式可以作用在同一个html的元素汇总，同时生效。
好处
1. 功能强大
2. 将内容展示和样式控制分离
  - 降低耦合度，解耦
  - 让分工协作更容易
  - 提高开发的效率

二、CSS的使用：CSS和html的结合方式

2.1 内联样式

内联样式——只对当前作用域有效
1. 在标签内使用style属性指定CSS代码
```
<div style="color:red;">hello css</div>
```
1. 不推荐使用

2.2 内部样式

内部样式——只在当前页面生效
1. 在head标签内，定义style标签，style标签得到标签体的内容就是CSS代码
```
<style>
    div{
        color:blue;
    }
</style>

<div>hello css</div>
```

2.3 外部样式

外部样式——引入资源的页面生效

定义css资源文件
在head标签内，定义link标签,引入CSS资源

<!-- a.css-->
div{
    color:green;
}

<!-- head标签-->
<link rel="stylesheet" href="CSS/a.css">

<!-- body标签-->
<div>hello css</div>

注意：
1. 1,2,3种方式，css作用范围越来越大
2. 1方式不常用，后来常用2和3
3. 第3种格式可写为：另一种引入CSS资源文件的方式
```
	
	<style>
        @import "CSS/a.css";
    </style>
```

2.4 CSS语法

CSS语法：

格式：

选择器{
	属性名：属性值1;
	属性名2：属性值2;
	...

}

选择器：筛选具有相同特征的元素
注意：
- 每一对属性需要用;隔开，最后一对属性可以不加

2.5 选择器（基本选择器、扩展选择器）

选择器：筛选具有相同特征的元素

分类：
1. 基本选择器
  1. id选择器：选择具体的id属性值的元素,建议在一个html页面中id值唯一
    - 语法：#id属性值()
  2. 元素选择器
    - 语法：标签名称{}
    - id选择器优先级高于元素选择器
  3. 类选择器：选择具有相同的class属性值的元素
    - 语法：.class属性值{} 有.注意
    - 类选择器优先级高于元素选择器
  4. 注意：id > .class >元素，子的>父的
2. 扩展选上择器
  1. 选择所有选择器
    - 语法：*{}
  2. 并集选择器（组合选择器）
    - 语法：选择器1，选择器2{}
  3. 子选择器：筛选选择器1元素下的选择器2
    - 语法：选择器1 选择器2{}：所有子孙后代
```
<--! style标签 -->
        div p{
            color:red;
        }
    
<--! body标签 -->
    <div>
        <p>
            文泽路
        </p>
    </div> 
```
  4. 父选择器：筛选选择器1的子集选择器2
    - 语法：选择器1>选择器2{}，只有子代，没有孙代
```
<--! style标签 -->
        div>p{
            border:1px solid;
        }
    
<--! body标签 -->
    <div>
        <p>
            文泽路
        </p>
    </div> 
```
  5. 属性选择器：选择元素名称，属性名= 属性值的元素
    - 语法：元素名称[属性名="属性值"]{}
```
<--! style标签 -->
        input[type='text']{
            border:5px solid;
        }
    
<--! body标签 -->
    <input type="text" >
    <input type="password">
```
  6. 层级选择器：找到并操作满足类型的选择器1的下一个满足类型的选择器2，（通俗一点就是后桌选择器）
```
.cls1+div{
    border: yellow solid;
}
<--! 先找到类属性是cls1的标签，然后再去找下一个同层级的标签是不是div，是的话就将div的边框变黄色 -->
```
  7. 伪类选择器：选择一些元素具有的状态
    - 语法：元素：状态{}
    - 如：<a>
      - 状态：
        link：初始化的状态
        visited：被访问过的状态
        active：正在访问状态
        hover：鼠标悬浮的状态
```
<--! style标签 -->
        a:link{
            color: pink;
        }

        a:visited{
            color: blue;
        }

        a:hover{
            color:green;
        }

        a:active{
            color: yellow;
        }
    
<--! body标签 -->
    <a href="https://www.baidu.com/">百度</a>
```

2.6 属性

2.6.1 字体、文本

font-size：字体大小
font-family：字体类型
color：文本颜色
text-align：对齐方式
line-height：行高
可以使用自己的字体，方式如下：

		@font-face <--! 定义自己的字体类型 -->
        {
            font-family: myFirstFont;
            src: url('font/POLYA.otf')
        }

        div{
            font-family: myFirstFont;
        }

<--! style标签 -->
        p{
            color:red;
            font-size:30px;
            text-align: center;
            line-height: 100px;

            /*
                border边框
             */
            border:1px solid red;

        }
    
<--! body标签 -->
    <p>
        文泽路小男孩
    </p>

2.6.2 背景

background

<--! style标签 -->
        div{
            border:1px solid red;
            height: 200px;
            width: 200px;

            background: url("../img/logo.jpg") no-repeat center;
         }
    
<--! body标签 -->
 		<div>文泽路小男孩</div>

2.6.3 边框

border：设置边框，复合属性（边框和轮廓）

2.6.4 尺寸

width：宽度
height：高度

2.6.5 盒子模型：控制布局

margin:外边距
padding:内边距（padding后直接+4个值，是以顺时针方向添加内边距）
1. padding-top
2. padding-right
3. padding-bottom
4. padding-left
  1. 问题：默认情况下，内边距会影响整个盒子的大小
  2. 解决：box-sizing: border-box;——设置盒子的属性，让width和height就是最终盒子的大小
  3. width height 只有块元素div才能生效，span宽高无效

在这里插入图片描述

<--! style标签 -->
        div{
            border:1px solid red;
            width: 100px;
        }
        .div1{
            width: 200px;
            height: 200px;
            padding:50px;
            /*
                设置盒子的属性，让width和height就是最终盒子的大小
            */
            box-sizing: border-box;
        }
        .div2{
            width: 100px;
            height: 100px;

            /*margin: 50px; !* 被包裹的子块使用外边距 *!*/

        }
    
<--! body标签 -->        
        <div class="div1">
            <div class="div2">

            </div>
        </div>

float：浮动
1. left
2. right
3. clear:both：清除浮动

<--! style标签 -->
        .div3{
            float: left;
        }

        .div4{
            float: left;
        }

        .div5{
            float: left;
        }    
    
<--! body标签 -->        
    <div class="div3">aaaa</div>
    <div class="div4">bbbb</div>
    <div class="div5">cccc</div>

2.6.6 框架式开发（frame \ frameset）

frameset和body标签不能共存
1. rows：上下排列百分比
2. cols: 左右排列百分比
3. frame：
  1. src: 引入的子页面
  2. name：当前窗口标签起名
  3. a标签中 target = "name"

2.6.6.1 —01_Frame

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Frame标签</title>
</head>

<!-- 
    1. frameset和body标签不能共存
    2.  rows：上下排列 百分比
        cols: 左右排列  百分比
        frame：
            src: 引入的子页面
            name：当前窗口标签起名
                    a标签中 target = "name"
 -->
<frameset rows="10%, 90%" noresize>
    <frame src="01_2_header.html">
    <frameset cols="10%,*">
        <frame src="01_1_菜单导航栏.html">
        <!-- 一定要为会变的窗口标签起名，然后菜单栏中的超链接的target指向这个名字 -->
        <frame src="01_3_body.html" name="body">
    </frameset>
</frameset>
</html>

2.6.6.2 —01_1菜单导航栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>菜单导航栏</title>
</head>
<body>
    <ul>
        <li>
            <a href="https://blog.csdn.net/weixin_43508544" target="body">csdn博客主页</a>
        </li>
        <li>
            <a href="https://www.nowcoder.com/861993641" target="body">牛客网主页</a>
        </li>
        <li>
            <a href="https://gitee.com/OldBoyInHDU/events" target="body">码云主页</a>
        </li>
    </ul>
</body>
</html>

2.6.6.3 —01_2header

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>head栏</title>
</head>
<body>
    <table width = "100%" >
        <tr align="center">
            <td>
                <img src="img/logo2.png" alt="logo2">
            
            </td>
            <td>
                <img src="img/header.png" alt="header">
            </td>
            <td>
                <a href="#">登陆</a>
                <a href="#">注册</a>
                <a href="#">注销</a>
            </td>
        </tr>
    </table>
</body>
</html>

2.6.6.4 —01_3body

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>body页面</title>
</head>
<body name="body">
    所有变化都在这里实现
</body>
</html>

文泽路小男孩

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Web 04_2 — CSS（样式、属性、盒子模型、框架式开发）

文章目录一、概念二、CSS的使用：CSS和html的结合方式2.1 内联样式2.2 内部样式2.3 外部样式2.4 CSS语法2.5 选择器（基本选择器、扩展选择器）2.6 属性2.6.1 字体、文本2.6.2 背景2.6.3 边框2.6.4 尺寸2.6.5 盒子模型：控制布局2.6.6 框架式开发（frame \ frameset）2.6.6.1 ---01_Frame2.6.6.2 ---01...
复制链接

扫一扫