Java Web之CSS

一直在进步的派大星

已于 2022-08-16 23:03:32 修改

阅读量319

点赞数 2

文章标签： java java-ee

于 2022-08-06 22:39:36 首次发布

本文链接：https://blog.csdn.net/jmgufss/article/details/126190956

版权

简单CSS语法规则，及与HTML相结合

文章目录

前言

一、Css语法规则

二、CSS与HTML结合

1.将属性style设置 key：value value样式

前言

CSS用于控制网页样式并允许样式信息与网页内容分离

一、Css语法规则

二、CSS与HTML结合

1.将属性style设置 key：value value样式

    <div style="border: red solid 1px">太阳</div>

缺点代码量大，复用性差，可读性差

2.在header标签下写style

<head>
    <meta charset="UTF-8">
    <title>表单</title>
    <style type="text/css">
        div{
            border: 1px rebeccapurple;
            background-color: brown;
        }
    </style>

可以将所有的div标签应用此样式

缺点只能在一个页面内上使用，维护麻烦。

3. link标签

把CSS内容单独写一个文件中，然后通过link标签，来引入CSS样式

<link rel = "stylesheet" type="text/css" href="1.css">

二、选择器

将div标签设置边框像素为1 虚线颜色为蓝色其中字体为大小30px 红色

1. 标签名选择器

div {
    border: 1px dashed blue
    /*字体颜色*/
    color: red;
    font-size: 20px;
}

2. id选择器--唯一

语法 #id名 { 可以针对只用不同的id使用不同的样式

属性 : 值；

}

#id1001 {
    border: 1px dashed blue;
    /*字体颜色*/
    color: red;
    font-size: 20px;
}
#id102 {
    border: 2px blue solid;
}
<div id = "id1001">文本格式 </ div>

3. 类原则器--批量

语法 .类名 { 可以批量使用样式，使用class属性指定该类名则使用

属性 : 值；

}

.class01 {
    border: 1px dashed blue;
    /*字体颜色*/
    color: red;
    font-size: 20px;
}
.class02 {
    border: 2px blue solid;
}
  <div class="class01">太阳</div>

4. 组合选择器

选择器名1，选择器名2 { 可以把不同的选择器样式上同化为一类代码

属性 : 值；

}

.class01,#id1001,div{
    border: 1px dashed blue;
    /*字体颜色*/
    border-width: 2px 9px;
    border-style: solid;
    border-color: orange;
   /*border-image:url("img01.webp") 10/10px ;*/
    color: red;
    font-size: 20px;
}