Java全栈开发-CSS-平芜编程栈

一、CSS简介

CSS：Cascading Style Sheets 层叠样式表
是一组样式设置规则，用于控制页面的外观样式

二、基本用法

1. CSS语法

<head><style>选择器{属性名:属性值;属性名:属性值;}</style></head>

选择器：要修饰的对象（东西）
属性名：修饰对象的哪个属性（样式）
属性值：属性的取值

2. CSS应用方式

也称为CSS引用方式，有三种方式：内部样式、行内样式、外部样式

2.1 内部样式

也称为内嵌样式，在页面头部通过style标签定义

对当前页面所有符合样式选择器的标签都起作用

2.2 行内样式

也称为嵌入样式，使用HTML标签的style属性定义

只对设置style属性的标签起作用

2.3 外部样式

使用单独的.css文件定义，然后在页面中使用link标签引入外部样式表

<linkrel="stylesheet"href="css样式文件的路径">

所有引入样式表文件的页面都起作用

三、选择器

1. 基础选择器

1.1 标签选择器

也称为元素选择器，使用HTML标签作为选择器名称

以标签名作为样式应用依据

1.2 类选择器

使用自定义名称，以.作为前缀，然后通过HTML标签的class属性调用类选择器

以标签的class属性值作为样式应用依据

注意：

调用时不能添加.号
同时调用多个类选择器时以空格隔开

1.3 ID选择器

使用自定义名称，以#作为前缀，然后通过HTML标签的id属性进行名称匹配
以标签的id属性值作为样式应用依据，一对一的关系

2. 复杂选择器

2.1 复合选择器

标签选择器和类选择器、标签选择器和ID选择器，一起使用

必须同时满足两个条件才能应用样式

2.2 组合选择器

也称为集体声明

将多个具有相同样式的选择器放在一起声明，使用逗号,隔开

2.3 嵌套选择器

在某个选择器内再设置选择器，通过空格隔开

只有满足层次关系最里层的选择器所对应的标签才会应用样式

四、常用CSS属性

1. 字体属性

定义字体相关的样式

属性	含义	说明
font-size	大小、尺寸	可以使用多种单位
font-weight	粗细	取值：normal、bold
font-family	字体	取值：黑体、楷体等

2. 文本属性

属性	含义	解释
color	颜色	使用英文单词、16进制的RGB值，特定情况下可以缩写，如#FFFFFF --> #FFF
line-height	行高	行内容的高度
text-align	水平对齐方式	取值：left、center、right
vertical-align	垂直对齐方式	取值：top、middle、bottom，可用于图片和文字的对齐方式
text-decoration	文本修饰	取值：underline、overline、line-through、none

3. 背景属性

属性	含义	解释
background-color	背景颜色
background-image	背景图片	必须使用url(路径)
background-repeat	背景图片的重复方式	取值：repeat(默认)、repeat-x、repeat-y、no-repeat
background	简写	一般顺序：颜色 \| 图片 \| 重复方式 \| 显示位置

4. 元素的显示

通过display属性设置元素是否显示，以及是否独占一行

常用取值：

none 不显示
inline 将块级元素变为行内元素，不再独占一行
block 将行内元素变为块级元素，独占一行
inline-block 在inline的基础上允许设置宽和高
flex 弹性布局/弹性盒子，常用属性：justify-content水平对齐、align-items垂直对齐注：行级元素默认无法设置宽和高，可以为行级元素设置display:inline-block，然后就可以设置宽和高了