JavaWeb(包括不限于HTML,CSS,JSC等）全过程学习记录（二）_java、javascript、css、shell、linux、php、html node.js 、-CSDN博客

本文链接：https://blog.csdn.net/qq_60918851/article/details/124183007

这篇博客介绍了CSS的基础知识，包括CSS的三种结合HTML的方式、选择器的使用，以及常见样式设置，如颜色、宽度、高度等。讲解了如何通过内联样式、内部样式表和外部样式表来管理CSS，并提供了各种选择器（如标签选择器、ID选择器、类选择器）的示例。此外，还详细阐述了如何实现元素的居中、边框设置以及超链接和表格的样式调整。

摘要由CSDN通过智能技术生成

CSS篇

一. CSS技术介绍

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

二. CSS语法规则：

选择器p{属性（font-size）: 值（80px）；}

选择器：浏览器根据“选择器”决定受CSS样式影响的HTML元素（标签）。

属性（property)：是要改变的样式名，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明(declaration)，例如：p{color:blue}

多个声明：如果定义不止一个声明，则需要分号将每个声明分开。虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号),一般每行只描述一个属性。

例如：

color:red;

font-size:30px;

}

CSS注释：/*注释内容*/

三. CSS是HTML的结合方式

1. 第一种

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

使用方法如图下：

<body><!--边框像素为1，是红色实线-->
  <div style="border: 1px solid red">
    第一个
  </div>
  <span style="border: 1px solid red">
    第二个
  </span>
  <span style="border: 1px solid red">
    第三个
  </span>
</body>

这种方式具有很多缺点：

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

（2）可读性非常差。

（3）CSS代码没有复用性。

2. 第二种

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

格式如下：xxx{

key : value value;

}

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <!--style标签专门用来定义css样式代码-->
    <style type="text/css">
      /*注释不一样*/
        div{
          border: 1px solid red;
        }
        span{
          border: 1px solid red;
        }
    </style>
</head>
<body>
  <div>
    第一个
  </div>
  <span 1px solid red">
    第二个
  </span>
  <span>
    第三个
  </span>
</body>

注意CSS语言中的注释方法不同

这种方法的缺点：

（1）只能在同一页面复用代码，不能在多个页面中复用CSS代码。

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

3. 第三种

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

使用html的<link rel="stylesheet" type="text/css" href="./styles.css"/>标签导入css样式文件。

使用过程如下：

创建css文件

在css文件中输入页面样式

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

html中进行引用

<head>
    <meta charset="UTF-8">
    <title>CSS</title>
  <link rel="stylesheet" type="text/css" href="css/1.css"/>
</head>
<body>
  <div>
    第一个
  </div>
  <span>
    第二个
  </span>
  <span>
    第三个
  </span>

然后运行即可达成想要的效果。

四. CSS选择器

1. 标签名选择器

标签名选择器的格式是：

标签名{

属性：值：

}

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

2. id选择器

id选择器的格式是：

#id属性值{

属性:值;

}

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

它们的使用方法如下：

<head>
    <meta charset="UTF-8">
    <title>标签名选择器</title>
  <style type="text/css">
    div{
      border: 1px solid red;
      color: blue;
      font-size: 30px;
    }
    #id001{
      border: 1px dashed red;
      color: blue;
      font-size: 30px;
    }
  </style>
</head>
<body>
  <div>div标签1</div>
  <div id="id001">div标签2</div>
</body>

3. class选择器（类选择器）

class类型选择器的格式是：

.class属性值{

属性：值；

}

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

它的使用方法如下：

  <style type="text/css">
    .class01{
      color: blue;
      font-size: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="class01">标签1</div>

4. 组合选择器

组合选择器的格式是：

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

属性：值；

}

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

使用方法如下：

  <style type="text/css">
    .class01,#id01{
      color: blue;
      font-size: 20px;
      border: 1px solid red;
    }
  </style>
</head>
<body>
  <div class="class01">标签1</div>
  <span id="id01">span标签</span><br/>

五. 常用样式

1. 颜色

color:red;

颜色以可以写颜色名red,blue等，也可以写rab值和十六进制表示值：如rgb(255,0,0),#00F6DE（十六进制必须前加#）

2. 宽度

width:19px

宽度可以写像素值：10px；也可以写百分比值：20%。

3. 高度

height：20px

高度可以写像素值：10px；也可以写百分比值：20%。

4. 背景颜色

background-color:#0F2D4C

5. 字体样式

color:#FF0000;字体颜色红色

字体大小：font-size:30px;

6. 红色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;

}