【JAVA WEB】CSS
目录
CSS是什么？
基本语法规范
引入方式
内部样式表
行内样式表
外部样式表
常用选择器的种类
基础选择器
标签选择器
类选择器
id选择器
通配符选择器
复合选择器
后代选择器
伪类选择器
常用元素属性：
字体属性：
文本属性：
CSS是什么？
层叠样式表(Cascading Style Sheets)。
CSS能够对网页中元素位置的排版进行像素级精确控制，实现美化页面的效果，能够做到页面的样式与结构的分离。也就是控制页面的展示效果，而html决定页面的结构。
基本语法规范
选择器+{一条/N条声明}
- 选择器决定针对谁修改（找谁）
- 声明决定修改啥（干啥）
- 声明的属性是键值对. 使用 ' ；' 区分键值对， 使用 ' : ‘区分键和值
示例：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>p {color:blue;font-size: 40px;}</style>
</head>
<body><p>p标签</p><h1>h标签</h1>
</body>
</html>
引入方式
内部样式表
写在style标签中，嵌入到html内部，理论上style放到html的哪里都行，但是一般放到head标签中，如上述示例。
优点：能够让样式和页面结构分离。
缺点：分离的不够彻底，尤其是css内容多的时候。
行内样式表
<h1 style="color:green;font-size: 60px;">h标签</h1>
当内部样式表和行内样式表冲突时，行内样式表优先级比内部样式表高，以行内样式表为准。
外部样式表
实际开发中最常用的方式。
- 创建一个css文件。
- 使用link标签引入css。
示例
创建一个demo01.css文件
p {color:blue;font-size: 80px;
}在html文件中引入css
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><!-- 引入 --><!-- rel属性表示引入的是一个样式表，href表示引入路径 --><link rel="stylesheet" href="./demo01.css">
</head>
<body><p>demon01.css引入</p>
</body>
</html>PS:解决了内部样式表的弊端
常用选择器的种类
1.基础选择器：由单个选择器构成的
- 标签选择器
- 类选择器
- id选择器
- 通配符选择器
2.复合选择器:把多种基础选择器综合运用起来
- 后代选择器
- 子选择器
- 并集选择器
- 伪类选择器
基础选择器
标签选择器
即选择器为标签，例如下方代码就是 p 标签
p {color:blue;font-size: 80px;
}类选择器
特点：
- 差异化表示不同的标签
- 可以让多个标签 都使用同一个标签
语法细节：
类名用 ' . ' 开头
<style>
.blue {
color:blue;
}
</style>
<div class="blue">猫</div>
<div >猫</div>
id选择器
和类选择器相似
- css中使用#开头表示id选择器
- id选择器的值和html中某个元素的id值相同
- html的元素id不必带#
- id是唯一的，不能被多个标签使用（和类选择器最大的区别）
<style>
#cat {
color:green;
font-size: 90px;
}
</style>
<div id="cat">猫</div>
<div >猫</div>
通配符选择器
使用 * 定义，选取所有标签
*{
color:green;
font-size: 90px;
}
页面的所有内容都会被更改，不需要被页面结构调用，开发中主要用于针对页面中所有的元素默认样式进行消除，消除边距
复合选择器
将前面的基本选择器进行组合
后代选择器
又称为包含选择器，选择某个父元素中的某个子元素。
元素1 元素2 {样式声明}
元素1和元素2要使用空格分割
元素1是父级，元素2是子级，只选元素2，不影响元素1
示例：
<style>
.hobby li{
color:blue;
font-size:40px;
}
</style>
<ul class="hobby">
<li>吃饭</li>
<li>睡觉</li>
<li>玩游戏</li>
</ul>
<ul>
<li>吃饭</li>
<li>睡觉</li>
<li>玩游戏</li>
</ul>
伪类选择器
定义元素状态
示例：
<style>
a{
color:black;
}
/* 鼠标悬停 */
a:hover {
color:red;
}
/* 鼠标点击 */
a:active {
color:green;
}
</style>
<div>
<a href='#'>不跳转</a>
</div>
常用元素属性：
字体属性：
设置字体
//字体类型
font-family:'宋体'；
//字体大小
font-size:40px;
//字体颜色
color:red;
color:#ff0000; // #两位红色像素点ff 两位绿色像素点00 两位蓝色像素点00
color:rgb(255,0,0);
//字体样式
font-style:oblique / italic; // italic设置斜体 normal取消斜体 oblique设置倾斜
//字体粗细
font-weight:normal; //可取值 normal默认值 bold粗体字符 bolder更粗的字符 lighter更细的字符 也可以直接写数字，400等同于normal，700等同于bold inherit 从父元素继承字体的粗细
文本属性：
//对齐方式 /*lorm生成一长串句子*/
text-align: 值； /* center / left / right
//控制段落首行缩进
text-indent: 值； //单位 px 或者 em em表示当前一个文字的大小
//文本装饰
text-decoration: 值 ； //underline下划线 none什么都没有（给a标签去掉下划线） ovrline上划线 line-through删除线
//行高
line-height: 值