Java全栈大数据学习笔记NO.7（CSS基础）

Garfield大杂烩

已于 2024-05-04 20:40:11 修改

阅读量290

点赞数 1

分类专栏： JAVA全栈大数据文章标签： css

于 2021-01-25 19:53:33 首次发布

本文链接：https://blog.csdn.net/qq_41496421/article/details/113104314

版权

JAVA全栈大数据专栏收录该内容

15 篇文章 0 订阅

订阅专栏

CSS基础

一、CSS简介

CSS（Cascading Style Sheets）：级联样式表，多个样式组合在一起对控件进行布局和外观的修饰的表。

二、CSS位置

CSS可以写在HTML页面当中，用style设置样式，但还是建议在外部建立css文件，在多个页面引入。

三、CSS种类

内联样式表（html头标签去建立的标签），简洁方便，但仅对当前页面有效
```
<head>
	<style>
		css代码
	</style>
</head>
```
外联样式表（在外部创建css文件），需要在head标签引入外部文件，所有的HTML都可以引用，一个HTML也可以引用多个css文件
```
<head>
	<link rel="stylesheet" type="texts" href="page1.css"/>
</head>
```
嵌入样式表（在标签上用style属性定义）
```
<p style="color: red">voluptas!</p>
```
- 优点：优先级要高于内联和外联样式表，外联样式表和内联样式表优先级是一样的，显示的效果取决于谁是后引用的
- 缺点：样式只能应用在当前控件上，不能被其他控件引用
- 注：在开发阶段常用外联样式表，也就是在在外部编写css文件后，再在头标签内引入外部文件。

四、CSS注释

css样式表中的注释与HTML中不同，但快捷键相同。

/*注释的内容*/

五、CSS语句结构

选择器1{
	样式1:属性值;
	样式2:属性值;
	        }
选择器2{
	样式1:属性值;
	样式2:属性值;
	   		}

六、选择器的种类

元素选择器
- 结构元素名称{…}，如（里面的属性后面说道）
```
p{
	text-align: center;/* CSS中写 */
	color: #FFFFFF;
	position: relative;
	top: -10px;
}
```
- 浏览器会自动把css样式作用在相同名称的标签上；
- 直接使用元素选择器的机会并不多，常常是于其他选择器联合使用；
id选择器
- 结构 #选择器{…}，如
```
<h1 id="h1-1">HelloWorld</h1>
```
```
#h1-1{color: #ff6700;}/* CSS中写 */
```
- 浏览器会自动把ID选择器的css样式作用在关联ID的HTML控件上；
- id是控件中的一个属性；
- id选择器缺点是公共的样式不能被多个html控件引用（id在不同的控件中使用可以写，但在JavaScript中会报错，底层问题）；
class选择器
- 结构 .选择器{…}，如
```
<p class="title">第二段</p>
<a class="title">超链接</a>
<p class="title">第三段</p>
```
```
.title{
	font-size: 24px;/* CSS中写 */
}
```
- class选择器定义的公共样式可以被多个HTML控件引用，所以它是最常用的选择器；
- class是属性
- css样式可以自由的共享在多个控件上

枚举选择器

结构选择器,选择器,选择器{…}，如

<input type="button" class="btn" value="普通按钮" /><!-- html中写 -->
<a>百度</a>
<p id="p1">第五段</p>

.btn,a,#p1{text-decoration: underline;} /* CSS中写，使这些元素都具有这种样式*/

嵌套选择器

直接子元素
该选择器只能查找直接子元素，用>

<div class="login"><!-- html中写 -->
	<p>HelloWorld</p>
	<div>
		<p>你好世界</p>
	</div>
</div>

/* 嵌套选择器-直接子元素 */
.login>p{
	color: blue;/* CSS中写*/
}

在这里插入图片描述
可以看到只有HelloWorld变成了蓝色，也就是只作用到了直接子元素的p标签。

子元素，该选择器可以查找直接子元素和所有间接子元素，用空格。

<div class="login-1"><!-- html中写 -->
	<p>HelloWorld</p>
	<div>
		<p>你好世界</p>
		<p>你好世界</p>
		<div>
			<p>大家好</p>
		</div>
		<a>你好世界</a>
	</div>
</div>

/* 嵌套选择器-子元素 */
.login-1 p{
	color: red;/* CSS中写*/
}

在这里插入图片描述
可以看到所有的直接子元素和所有间接子元素的p标签中的内容都变成了红色。

兄弟选择器

直接身后元素：身后的第一个兄弟元素

所有身后元素：身后所有的兄弟元素，不包括兄弟的子元素

<div id="main"><!-- html中写 -->
	<h1>HelloWorld</h1>
</div>
<h1>HelloWorld</h1>
<h1>HelloWorld</h1>
<div>
	<h1>HelloWorld</h1>
</div>

/* 兄弟选择器-直接身后元素 */
#main+h1{/* CSS中写*/
	color: green;
}
/* 兄弟选择器-所有身后元素 */
#main~h1{
	text-decoration: underline;
}

在这里插入图片描述
可以看到只有第一个同级h1标签变成了绿色，而所有同级h1标签都有了下划线。

属性选择器
- 含有属性：标签中含有属性的选择器；
  格式：例如a标签中含有target属性，不管属性的值是什么
- 属性值等于
  标签中含有该属性并且值也要一致
  格式：例如a标签中含有target=“_blank”
```
<a href="http://www.baidu.com">百度</a>
<a href="http://www.qq.com" target="_blank">腾讯</a>
<a href="https://www.sina.com" target="_self">新浪</a>
```
```
/* 属性选择器-含有属性 */
a[target]{
	text-decoration: none;/* CSS中写*/
}
/* 属性选择器-属性值等于 */
a[target="_blank"]{
	font-size: 25px;
}
```
  超链接标签的字体默认是带下划线的，可以看到腾讯和新浪的下划线都取消了，但是只有腾讯的字体修改成了25px。
伪类选择器
- :nth-child(n)
  匹配属于其父元素的第n个元素，不论类型，n可以是数字，关键字和表达式
  注意：子元素的类型要和括号中的序号相匹配
- :first-child 匹配属于其父元素的第一个元素
- :last-child 匹配属于其父元素的最后一个元素
- :nth-of-type(n)
  匹配属于父元素的特定类型的第n个子元素，n可以是数字，关键字和表达式
  关键词：odd代表奇数项，even代表偶数项
  表达式：an+b，a代表倍数，b代表偏移量，n从0开始
- :first-of-type
- :last-of-type
- :focus 焦点选择器
- :hover 悬停选择器
- :active 点击选择器
```
<div class="div1">
	<p>第一个p</p>
	<p>第二个p</p>
	<p>第三个p</p>
	<p>第四个p</p>
	<span>第一个span</span>
	<p>第五个p</p>
	<p>第六个p</p>
	<p>第七个p</p>
	<span>第二个span</span>
	
	<input type="text" class="input-1" />
	<div class="div2"></div>
	<input type="button" class="input-button" value="普通按钮"/>
</div>
```
```
/* 伪类选择器 */
.div1 :nth-child(6){ /* CSS中写*/
	color: green;
}
.div1 p:nth-of-type(3n-1){
	font-size: 24px;
}
/* 焦点选择器 */
.input-1:focus{
	background-color: yellow;
}
/* 悬停选择器 */
.div2{
	width: 100px;
	height: 100px;
	background-color: #0000FF;
	background-image: ;
}
.div2:hover{
	background-color: #FF0000;
}
/* 点击选择器 */
.input-button:active{
	color: red;
}
```
  根据程序与结果图片可以看出：
  1. div中不论类型的第六个元素变为绿色，也就是文字“第五个p”变为了绿色；
  2. div中第2、5个p标签字体大小变为24px，也就是文字“第二个p”、“第五个p”大小变为24px；
  3. 点击文本框，焦点便定在文本框内，此时文本框内的颜色变为黄色；
  4. 鼠标悬停到蓝色方框处，方框的颜色变为红色（由于截图时鼠标箭头消失，所以无法看到鼠标指针）；
  5. 鼠标点击普通按钮，按钮上的字变为红色（由于截图时鼠标箭头消失，所以无法看到鼠标指针）；