Web开发基础：CSS

项目开发视频：
SpringCloud微服务开发入门
手把手开发基于SpringBoot的员工管理系统
亿度云盘~Java小白入门实战

---

前言

如果把网页比作住房，那HTML就是毛坯，要做装修就得靠CSS了，这里简单介绍下CSS的用法。

CSS简介

CSS（Cascade Style Sheet） 层叠样式表，作用是对页面元素进行美化和布局。

CSS的语法

CSS的选择器

选择器的作用是对网页元素进行定位，选择器分为多种，常用的包含：标签选择器、ID选择器、类选择器等。

标签选择器

选中页面中所有的对应标签

标签名
{
	样式:值;
}

类选择器

选中页面中某几个标签

.类名
{
	样式:值;
}

使用：

<标签 class="类名">
或：
<标签 class="类名 类名 ...">

ID选择器

选中页面的一个标签

#ID名
{
	样式:值;
}

使用：

<标签 id="ID名">

范围越小，优先级越高
ID > 类 > 标签

通用选择器

应用到页面的所有标签

*
{
	样式:值;
}

分组选择器

同时为多个选择器设置样式

选择器,选择器....{
	样式:值;
}

子类选项器

将范围定位到父标签内部

父选择器 子选择类{
	...
}

伪类选择器

为标签的不同状态设置样式

选择器:伪类{
	...
}

伪类分为：

• hover 鼠标悬停
• visted 已访问状态
• active 激活状态
• link 未链接状态

CSS的分类

按定义的位置分为：

1. 内部样式表
   写在style标签中，作用于当前页面

2. 外部样式表
   写在样式表文件中，作用于多个页面
   1）定义css文件
   2）使用link链接外部样式表文件

3. 行内样式
   写在标签内部，作用于一个标签

<标签 style="样式:值;样式:值">

常用样式

大小相关样式

• width 宽度
• height 高度

取值：
1）固定值，单位像素 如：600px
2）百分比，占父容器的百分比，如：50%

文字相关样式

• color 颜色
  颜色值： 1）单词，如：red 2）十六进制代码 #红红绿绿蓝蓝
• font-size 文字大小
• font-family 文字字形
  如：宋体、黑体等
• font-weight 文字粗细
  normal\bolder\lighter
• font 缩写
  font:粗细 大小 字体;
• font-style 风格
  normal 默认，italic 斜体
• text-align 水平对齐
  left默认，center，right
• letter-spacing 字符间距
• line-height 行高
• text-decoration 文字修饰
  none默认，underline下划线，line-through 穿过线

背景相关样式

• background-color 背景颜色
• background-image 背景图片
  值：url(图片路径)
• background-repeat 背景重复
  值：repeat默认，水平和垂直都重复，repeat-x 水平重复，
  repeat-y 垂直重复，no-repeat 不重复
• background-position 背景位置
  值：x轴偏移量 y轴偏移量
• backgound 缩写
  background:图片地址 重复方式 x偏移 y偏移;

列表相关样式

• list-style 列表样式
  none 去掉样式，给UL设置
• float 浮动
  left 从左往右，right 从右往左 ，给LI设置

案例 ：完成导航条样式

分析：
1）div + ul + li + a
2）设置div、ul的宽和高
3）设置ul的list-style去掉原点
4）设置li的float为左浮动
5）设置li的宽和高、水平对齐、垂直对齐
6）设置a的字体、颜色

	
	
	


	

		

			

				全部分类
			
			

				首页
			
			

				婚宴场地
			
			

				婚纱摄影
			
			

				婚庆用车
			
			

				婚庆公司
			
			

				婚具租赁
			
			

				婚品商城
			
			

				制定人员
			
			

				蜜月度假
			
		
	

盒子模型

在页面中所有的标签可以看做盒子，控制盒子布局的样式有：宽度、高度、边框、外边距、内边距。

填充（内边距）

盒子内容和边框的距离

• padding-left 左填充
• padding-right 右填充
• padding-top 上填充
• padding-bottom 下填充
• padding: 值; 上下左右一起设置
  padding: 上 右 下 左;

外边距

盒子和其它盒子的距离

• margin-left
• margin-right
• margin-top
• margin-bottom
• margin:值 上下左右一起设置
  margin: 上 右 下 左;
  margin:auto; 自动调整外边距，设置页面水平居中

边框

• border-width 边框宽度
• border-color 边框颜色
• border-style 边框样式
  solid实线，dashed虚线
• border: 宽度 颜色 样式;
• border-radius 边框半径

DIV+CSS布局

页面布局通常采用DIV+CSS，DIV作为网页内容的容器，CSS控制DIV的大小和位置。
网页的文档流：网页标签分为块级标签和行级（内联）标签，块级标签从上向下排列，如：div、p、h1等，行级标签从左向右排列，如：img、a、span等。

那么进行DIV+CSS布局时，如何让多个DIV如何水平排列？比较简单的办法是：设置浮动.

float:left|right

案例：完成下面布局效果

分析：
1、使用DIV嵌套，完成HTML结构
2、设置CSS控制DIV的排列位置

结束

---

大家如果需要学习其他Java知识点，戳这里 超详细的Java知识点汇总