javaWeb学习-1.前端基础-2.CSS基础

最新推荐文章于 2024-05-14 14:44:50 发布

天生我才~~

最新推荐文章于 2024-05-14 14:44:50 发布

阅读量101

点赞数 1

分类专栏： JavaWeb 文章标签： css 前端 css3

本文链接：https://blog.csdn.net/xingzhes_/article/details/122701808

版权

JavaWeb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

文章目录

2.CSS基础总览
javaWeb学习笔记思维导图
问题扩展与汇总：

2.CSS基础总览

在这里插入图片描述

javaWeb学习笔记思维导图

笔记链接

参考狂神说javaweb教程笔记

参考尚硅谷javaWeb教程笔记

问题扩展与汇总：

1. CSS认识与基本语法：

1.1 什么是CSS

CSS 是「层叠样式表单」
是用于(增强)控制网页样式并
允许将样式信息与网页内容分离的一种标记性语言。

1.2 CSS基本结构语法

2. CSS与HTML结合的方式：

2.1 方式一：标志中增加style属性

实例：

<body>
    <!--需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。-->
    <div style="border: 1px solid red;">div标签1</div>
    <div style="border: thin solid #b75959;">div标签2</div>
    <span style="border: 1px solid red;">span标签1</span>
    <span style="border: 1px solid red;">span标签2</span>
</body>

问题：这种方式的缺点？
1.如果标签多了。样式多了。代码量非常庞大。
2.可读性非常差。
3.Css 代码没什么复用性可方言。

2.2 方式二：在 head 标签中，使用 style 标签定义样式

实例：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
        /* 需求1：分别定义两个 div、span标签，分别修改每个 div 标签的样式为：边框1个像素，实线，红色。*/
        div{
            border: 1px solid red;
        }
        span{
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>

优缺点：

1.只能在同一页面内复用代码，不能在多个页面中复用 css 代码。
2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

2.3 建立css样式文件，在需要的网页中link导入

实例：

css文件：

div{
     border: 1px solid yellow;
 }
span{
    border: 1px solid red;
}

网页中导入：

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1.css"/>

</head>

<body>
    <div>div标签1</div>
    <div>div标签2</div>

    <span>span标签1</span>
    <span>span标签2</span>
</body>

优缺点：

解决了前两种方式的弊端，即可复用，形式与网页分离

3. CSS常见选择器：

3.1 标签名选择器

格式
- 标签名{
  属性：值;
  }
  
  标签名选择器，可以决定哪些标签被动的使用这个样式
实例

<head>
   <meta charset="UTF-8">
   <title>CSS选择器</title>
   <style type="text/css">
      div{
         border: 1px solid yellow;
         color: blue;
         font-size: 30px;
      }
      span{
         border: 5px dashed  blue;
         color: yellow;
         font-size: 20px;
      }
   </style>
</head>
<body>
   <!-- 
   需求1：在所有div标签上修改字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
   并且修改所有span 标签的字体颜色为黄色，字体大小20个像素。边框为5像素蓝色虚线。
    -->
   <div>div标签1</div>
   <div>div标签2</div>
   <span>span标签1</span>
   <span>span标签2</span>
</body>

3.2 id选择器

格式与实例：
- #id 属性值{
  属性：值;
  } id
  选择器，可以让我们通过 id 属性选择性的去使用这个样式。

<head>
   <meta charset="UTF-8">
   <title>ID选择器</title>
   <style type="text/css">

      #id001{
         color: blue;
         font-size: 30px;
         border: 1px yellow solid;
      }

      #id002{
         color: red;
         font-size: 20px;
         border: 5px blue dotted ;
      }

   </style>
</head>
<body>    
   <!--
   需求1：分别定义两个 div 标签，
   第一个div 标签定义 id 为 id001 ，然后根据id 属性定义css样式修改字体颜色为蓝色，
   字体大小30个像素。边框为1像素黄色实线。
   
   第二个div 标签定义 id 为 id002 ，然后根据id 属性定义css样式 修改的字体颜色为红色，字体大小20个像素。
   边框为5像素蓝色点线。
    -->
   
   <div id="id002">div标签1</div>
   <div id="id001">div标签2</div>
</body>

3.3 class 选择器

格式与实例：
- .class 属性值{
  属性：值;
  }
  class 类型选择器，可以通过 class 属性有效的选择性地去使用这个样式。

<head>
   <meta charset="UTF-8">
   <title>class类型选择器</title>
   <style type="text/css">
      .class01{
         color: blue;
         font-size: 30px;
         border: 1px solid yellow;
      }

      .class02{
         color: grey;
         font-size: 26px;
         border: 1px solid red;
      }
   </style>
</head>
<body>
   <!--
      需求1：修改 class 属性值为 class01的 span 或 div 标签，字体颜色为蓝色，字体大小30个像素。边框为1像素黄色实线。
      需求2：修改 class 属性值为 class02的 div 标签，字体颜色为灰色，字体大小26个像素。边框为1像素红色实线。
    -->

   <div class="class01">div标签class01</div>
   <div class="class02">div标签</div>
   <span class="class02">span标签class01</span>
   <span>span标签2</span>
</body>

3.4 组合选择器

格式与实例：
- 选择器 1，选择器 2，选择器 n{
  属性：值;
  }
  组合选择器可以让多个选择器共用同一个 css 样式代码。

<head>
    <meta charset="UTF-8">
    <title>class类型选择器</title>
    <style type="text/css">
        .class01 , #id01{
            color: blue;
            font-size: 20px;
            border:  yellow 1px solid;
        }
    </style>
</head>
<body>
   <!-- 
   需求1：修改 class="class01" 的div 标签 和 id="id01" 所有的span标签，
   字体颜色为蓝色，字体大小20个像素。边框为1像素黄色实线。
    -->
   <div id="id01">div标签class01</div> <br />
   <span>span 标签</span>  <br />
   <div>div标签</div> <br />
   <div>div标签id01</div> <br />
</body>