首页 > 编程语言> 文章详细

JavaWeb-03 CSS技术

2021-04-07 13:57:40 阅读：159 来源： 互联网

标签：03 span JavaWeb 标签像素 div border 选择器 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 其他

标签：03,span,JavaWeb,标签,像素,div,border,选择器,CSS
来源： https://blog.csdn.net/weixin_44589991/article/details/115483785

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

JavaWeb-03 CSS技术

3.1 CSS 技术介绍

3.2 CSS 语法规则：

3.3、CSS 和HTML 的结合方式

3.3.1 第一种：style 属性上设置

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

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

3.4 CSS 选择器

3.4.1 标签名选择器

3.4.2 id 选择器

3.4.3 class 选择器（类选择器）

3.4.4 组合选择器

3.5 常用样式

1、字体颜色

2、宽度

3、高度

4、背景颜色

4、字体样式：

5、红色1 像素实线边框

7、DIV 居中

8、文本居中：

9、超连接去下划线

10、表格细线

11、列表去除修饰

Z 其他

学习视频：

学习资料：

学习笔记系列