Java Web 从入门到退坑 —— 第二章CSS

---

By -gregPerlinLi-

---

1. CSS技术介绍

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

2. CSS语法规则

/*选择器*/
p {
  font-size: 80pt
/*   属性      值   */
}

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

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

​ 多个声明：如果要定义不止一个声明，则需要用分号将每个声明分隔开。虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号）

​ 例如：

p {
  color: red;
  font-size: 30px;
}

​ 注意⚠️：一般每一行只写一个属性

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

3. CSS 和 HTML 的结合方式

3.1. 第一种

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

​ 缺点： 1. 如果标签多了，样式多了，代码量会非常庞大。

​ 2. 可读性非常差。

​ 3. CSS代码没什么复用性可言。

3.2. 第二种

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

​ 格式如下：

<style type="text/css">
    xxx &#123;
      Key: value value;
    &#125;
</style> 

​ 缺点： 1. 只能在同一页面复用代码，不能再多个页面中复用CSS代码。

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

3.3. 第三种

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

​ 使用如下HTML标签导入CSS样式

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

4. CSS 选择器

4.1. 标签名选择器

​ 格式：

TagName {
  property: value;
}

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

4.2. ID 选择器

​ 格式：

#id PropertyValue {
  property: value;
}

​ 作用：可以让我们通过id属性选择性地去使用这个样式。

4.3. class 选择器

​ 格式：

.class PropertValue {
  property: value;
}

​ 作用：可以通过class属性有效的选择性地去使用这个样式。

4.4. 组合选择器

​ 格式：

selector_1, selector_2, selector_n {
  property: value;
}

​ 作用：可以让多个选择器共用同一个CSS代码

5. 常用样式

5.1. 颜色

color: red;

​ 颜色可以写颜色名如：black，blue，red，green等

​ 颜色也可以写rgb和十六进制HEX表示值如：rgb(255,0,0)，#00F6DE，如果写的是十六进制HEX值必须加#

5.2. 宽度

width: 19px;

​ 宽度可以写像素值：19px，也可以写成百分比值：20%

5.3. 高度

height: 20px;

​ 高度可以写像素值：19px，也可以写成百分比值：20%

5.4. 背景颜色

background-color: #0F2D4C;

5.5. 字体样式

color: #FF0000;                                /*字体颜色*/
font-family: Arial, serif;        /*字体家族*/
font-size: 20px;                            /*字体大小*/
font-style: italic;                        /*字体样式*/

5.6. 边框

border: 1px solid red;                /*红色1像素实线边框*/

5.7. DIV居中

margin-left: auto;
margin-right: auto;

5.8. 文本样式

text-align: center;                        /*文本排列*/
text-decoration: none;                /*文本修饰（可用于超链接去除下划线）*/

5.9. 表格细线

table {
  border: 1px solid black;        /*设置边框*/
  border-collapse: collapse;    /*将边框合并*/
}
td, th {
  border: 1px solid black;        /*设置边框*/
}

5.10. 列表去修饰

ul {
  list-style: none;
}

---