【JAVA WEB】CSS-编程知识

【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: 值