文章目录

  • 一、概念
  • 二、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_Frame
  • 2.6.6.2 ---01_1菜单导航栏
  • 2.6.6.3 ---01_2header
  • 2.6.6.4 ---01_3body


一、概念

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

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

2.1 内联样式

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

2.2 内部样式

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

<div>hello css</div>

2.3 外部样式

  1. 外部样式——引入资源的页面生效
  1. 定义css资源文件
  2. 在head标签内，定义link标签,引入CSS资源
<!-- a.css-->
div{
    color:green;
}

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

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

2.4 CSS语法

CSS语法：

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

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

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

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

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

  1. font-size：字体大小
  2. font-family：字体类型
  3. color：文本颜色
  4. text-align：对齐方式
  5. line-height：行高
  6. 可以使用自己的字体，方式如下：
@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 背景

  1. 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 边框

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

2.6.4 尺寸

  1. width：宽度
  2. height：高度

2.6.5 盒子模型：控制布局

  1. margin:外边距
  2. 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宽高无效

java 样式无法加载 javaweb样式_java 

<--! 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>
  1. 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）

  1. 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="" 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>