JavaWeb-03 CSS技术

本文主要是介绍JavaWeb-03 CSS技术，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

3.1 CSS 技术介绍

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

3.2 CSS 语法规则：

选择器：浏览器根据“选择器”决定受CSS 样式影响的HTML 元素（标签）。
属性(property) 是你要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration），例如：p {color: blue}
多个声明：如果要定义不止一个声明，则需要用分号将每个声明分开。虽然最后一条声明的

最后可以不加分号(但尽量在每条声明的末尾都加上分号)

例如：

color:red;

font-size:30px;

}

注：一般每行只描述一个属性

CSS 注释：/注释内容/

3.3、CSS 和HTML 的结合方式

3.3.1 第一种：style 属性上设置

在标签的style 属性上设置”key:value value;”，修改标签样式。

需求1：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。

div 标签1 div 标签2

span 标签1

span 标签2

Step1：查阅手册

Step2：代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--需求1：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。-->
    <div style="border: 1px solid red;">div 标签1</div>
    <div style="border: 1px solid red;">div 标签2</div>
    <span style="border: 1px solid red;">span 标签1</span>
    <span style="border: 1px solid red;">span 标签2</span>
</body>
</html>

Step3：效果

问题：这种方式的缺点？

1.如果标签多了。样式多了。代码量非常庞大。

2.可读性非常差。

3.Css 代码没什么复用性可方言。

3.3.2 第二种：在head 标签中，使用style 标签来定义

在head 标签中，使用style 标签来定义各种自己需要的css 样式。

格式如下：

xxx {

Key : value value;

}

需求1：分别定义两个div、span 标签，分别修改每个div 标签的样式为：边框1 个像素，实线，红色。

div 标签1 div 标签2

span 标签1

span 标签2

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--style 标签专门用来定义css 样式代码-->
    <style type="text/css">
        /*这里就算是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>
</html>

Css 注释/* 这是css 的代码注释*/

问题：这种方式的缺点。

1.只能在同一页面内复用代码，不能在多个页面中复用css 代码。

2.维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了。

3.3.3 第三种：通过link 标签引入

把css 样式写成一个单独的css 文件，再通过link 标签引入即可复用。

使用html 的标签导入css 样式文件。

1、css 文件内容：

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

html 文件代码：

<!DOCTYPE html>
<html lang="en">
<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>
</html>

3.4 CSS 选择器

3.4.1 标签名选择器

标签名选择器的格式是：

标签名{

属性：值;

}

标签名选择器，可以决定哪些标签被动的使用这个样式。

div 标签1 div 标签2

span 标签1

span 标签2

需求1：在所有div 标签上修改字体颜色为蓝色，字体大小30 个像素。边框为1 像素黄色实线。

并且修改所有span 标签的字体颜色为黄色，字体大小20 个像素。边框为5 像素蓝色虚线。

示例代码：

<!DOCTYPE html>
<html>
    <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>
</html>

3.4.2 id 选择器

id 选择器的格式是：

#id 属性值{

属性：值;

}

id 选择器，可以让我们通过id 属性选择性的去使用这个样式。

需求1：分别定义两个div 标签，

第一个div 标签定义id 为id001 ，然后根据id 属性定义css 样式修改字体颜色为蓝色，

字体大小30 个像素。边框为1 像素黄色实线。

第二个div 标签定义id 为id002 ，然后根据id 属性定义css 样式修改的字体颜色为红色，字体大小20 个像

素。边框为5 像素蓝色点线。

div 标签1 div 标签2

示例代码：

<!DOCTYPE html>
<html>
<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>
</html>

3.4.3 class 选择器（类选择器）

class 类型选择器的格式是：

.class 属性值{

属性：值;

}

class 类型选择器，可以通过class 属性有效的选择性地去使用这个样式。

需求1：修改class 属性值为class01 的span 或div 标签，字体颜色为蓝色，字体大小30 个像素。边框为1 像素黄色实线。

需求2：修改class 属性值为class02 的div 标签，字体颜色为灰色，字体大小26 个像素。边框为1 像素红色实线。

div 标签class01 div 标签

span 标签class01

span 标签2

<!DOCTYPE html>
<html>
    <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="class02">div 标签class01</div>
        <div class="class02">div 标签</div>
        <span class="class02">span 标签class01</span>
        <span>span 标签2</span>
    </body>
</html>

3.4.4 组合选择器

组合选择器的格式是：

选择器1，选择器2，选择器n{

属性：值;

}

组合选择器可以让多个选择器共用同一个css 样式代码。

div 标签class01

span 标签

div 标签
div 标签id01

需求1：修改class=“class01” 的div 标签和id=“id01” 所有的span 标签，字体颜色为蓝色，字体大小20 个像素。

边框为1 像素黄色实线。

示例代码：

<!DOCTYPE html>
<html>
    <head>
    <meta charset="UTF-8">
    <title>class 类型选择器</title>
      <style type="text/css">
          .class01 , #id01{
              color: blue;
              font-size: 20px;
              border: 1px yellow 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>
</html>

3.5 常用样式

1、字体颜色

color：red；

颜色可以写颜色名如：black, blue, red, green 等
颜色也可以写rgb 值和十六进制表示值：如rgb(255,0,0)，#00F6DE，如果写十六进制值必

须加#

2、宽度

width:19px;

宽度可以写像素值：19px；

也可以写百分比值：20%；

3、高度

height:20px;

高度可以写像素值：19px；

也可以写百分比值：20%；

4、背景颜色

background-color:#0F2D4C

4、字体样式：

color：#FF0000；字体颜色红色

font-size：20px; 字体大小

5、红色1 像素实线边框

border：1px solid red;

7、DIV 居中

margin-left: auto;

margin-right: auto;

8、文本居中：

text-align: center;

9、超连接去下划线

text-decoration: none;

10、表格细线

table {

border: 1px solid black; /设置边框/

border-collapse: collapse; /将边框合并/

}

td,th {

border: 1px solid black; /设置边框/

}

11、列表去除修饰

ul {

list-style: none;

}

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>06-css 常用样式.html</title>
        <style type="text/css">
            div{
                color: red;
                border: 1px yellow solid;
                width: 300px;
                height: 300px;
                background-color: green;
                font-size: 30px;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
            }
            table{
                border: 1px red solid;
                border-collapse: collapse;
            }
            td{
                border: 1px red solid;
            }
            a{
                text-decoration: none;
            }
            ul{
                list-style: none;
            }
        </style>
    </head>
    <body>
        <ul>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
            <li>11111111111</li>
        </ul>
        <table>
            <tr>
                <td>1.1</td>
                <td>1.2</td>
            </tr>
        </table>
          <a href="http://www.baidu.com">百度</a>
          <div>我是div 标签</div>
    </body>
</html>

Z 其他

学习视频：

尚硅谷最新版JavaWeb全套教程,java web零基础入门完整版（主）

学习资料：

github：JavaWeb学习和项目代码（主）

学习笔记系列

JavaWeb-01web基本概念

JavaWeb-02 HTML入门

这篇关于JavaWeb-03 CSS技术的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！