『JavaWeb前端』二、CSS - 基础

最新推荐文章于 2024-08-14 09:51:23 发布

CarryBircks

最新推荐文章于 2024-08-14 09:51:23 发布

阅读量123

点赞数 1

分类专栏： JavaWeb前端文章标签： css html web css3

本文链接：https://blog.csdn.net/qq_45958469/article/details/117424392

版权

JavaWeb前端专栏收录该内容

11 篇文章 1 订阅

订阅专栏

欢迎浏览『JavaWeb前端』专栏的其他文章：
一、HTML-精炼-易懂

三、CSS - 进阶

四、JavaScript

**持续完善中。。。**

二、CSS基础

CSS（Cascading Style Sheets）:层叠样式表

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力

css语法规则

选择符：表明应用于哪个或哪些HTML元素的样式

属性：body { background-color: blue; }

属性的值：blue（本例）

CSS三种方式

内联样式表（HTML的style属性定义）

<!DOCTYPE html>
<html style="background-color: blue">
<head>
<title></title>
</head>
<body>

</body>
</html>

内部样式表（head内style标签定义）

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
	body{
		background-color: red
	}
</style>
</head>
<body>

</body>
</html>

外部样式表（外部文件）----推荐

标签优先级:范围越小，优先级越高，（（*）最低）元素选择器 < class选择器 < id选择器 < 内联样式
- 强制优先级: 在需要最高优先级的样式后 + !important,表示其优先级最高

1 - CSS基本样式

由三部分组成：选择符、属性、值

body 
{ 
	background-color:red; 
	font-family: "Times New Roman"; <!--值由多个单词组成，应加引号-->
}

2 - 颜色与背景

body{
    background: [background-color] [background-image] [background-repeat] [background-position];
}

属性	值	含义
color	#0000ff	前景色
background-color	#eeeeee	背景色
background	url(“url是相对于当前CSS定义所在的位置或完整路径”)	背景
background-repeat	no-repeat	不平铺
	repeat-x	在x方向上都平铺
	repeat-y	在y方向上都平铺
	repeat	默认是在x，y方向上都平铺
background-position	`left / center / right / 50% / 200px`	距离左测的距离x
	`top / center / bottom / 50% / 200px`	距离顶部的距离y
background-size	px px	缩放后的图片大小

注意：background-size必须写在background（改变图片大小必须先加载图，反之则无效）

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}
			.img {
				width: 300px;
				height: 500px;/* 设置的长宽可能无法完整显示图片(图片：411px 730px) */
				background: url(http://image.biaobaiju.com/uploads/20180211/01/1518284655-tbVFsHcGLN.jpg) no-repeat;/* 图片地址 不平铺*/
				background-size: 300px 500px;/* 图片缩放比例,设置以后可以将图片显示完全 */
			}
			
		</style>
	</head>
	<body>
		<div class="img"></div>
	</body>
</html>

3 - 字体

body{
	font: [font-style] [font-weight] [font-size] [font-family];
}

属性	值	含义
font-family	`font-family: arial,"Times New Roman",sans-serif;`	设置字体时，首选字体>候选字体>字符类
font-style	normal	正常
	initial / oblique	斜体
font-weight	normal	正常
	bold	加粗
font-size	px（13px）	像素
	pt（13pt）	点数
	em（2em–当前字体的两倍，同是em会继承父级元素的字体大小）	字体尺寸

4 - 文本

属性	值	含义
text-indent	34px	文本缩进
text-align	left/right/center	对其方式
text-decoration	underline	下划线
	line-through	删除线
	overline	上划线
letter-spacing	10px	字符之间的距离
text-transform	capitalize	首字母大写
	uppercase	全部大写
	lowercase	全部小写

5 - 选择符

选择器后+:hover

鼠标移上之后的样式

5 - 1 通配选择符（*）

*{
	margin:0;
	padding:0;
}

5 - 2 类型选择符（HTML）

div {
	text-indent: 34px;
	text-align: left;
	text-decoration: underline;
}

5 - 3 包含选择符（空格）

子元素选择器：
- 用>(大于号)连接，只对直接子元素生效
- 用(空格)连接，会对此标签下的所有指定的子标签生效

#myid>span{/*只对元素id值为myid下的span（直接子元素）标签生效*/

}

div p{/*对元素div标签下的所有p标签生效*/
	text-indent: 100px;
	text-align: left;
	text-decoration: line-through;
}

5 - 4 ID选择符（#）

#myid{
	font-size: 50px;
}
#myid span{
	color: blue;
}

5 - 5 class选择符（.）

.myclass{
	color: yellow;
}

5 - 6 伪类选择符（:）

选择符	含义
a:link	链接未访问前的样式
a:active	活动的链接，即获得焦点的链接（按住鼠标左键不放）
a:hover	鼠标悬停样式
a:visited	链接访问过后的样式

未访问

a:link{	/*未访问的样式*/
	color: blue;
}

已访问

a:visited{	/*已访问的样式*/
	color: gray;
}

活动的

活动的链接，即是获得焦点的链接（比如点击鼠标左键不放）
```
a:active{	/*按住链接不放的样式*/
	background-color: green;
}
```

鼠标悬停

a:hover{	/*鼠标悬停的样式*/
	color: red;
}

5 - 7 综合案例：

<!DOCTYPE html>
<html>
<head>

	<title></title>
	<style type="text/css">
		/**{
			color: red;
		}*/

		a{
			font-size: 30px;
		}

		a:link{	/*未访问的样式*/
			color: blue;
		}

		a:active{	/*按住链接不放的样式*/
			background-color: green;
		}

		a:hover{	/*鼠标悬停的样式*/
			color: red;
			font-style: italic;
		}

		a:visited{	/*已访问的样式*/
			color: gray;
		}


		div {
			text-indent: 34px;
			text-align: left;
			text-decoration: line-through;
		}

		div p{
			color: red;
			text-decoration: line-through;
		}

		#myid{
			font-size: 50px;
		}

		#myid span{
			color: blue;
		}

		.myclass{
			color: yellow;
		}



	</style>
</head>
<body>

	<a href="https://www.baidu.com" target="_blank" name="baidu">链接到百度首页</a>

	<div>

		我啥也不是！！<br>

		<div id="myid">

			<p>ID牛逼！！</p>

			<span>ID-span牛逼！！</span>

			<p class="myclass">class牛逼！！</p>

		</div>
	</div>
</body>
</html>

6 - 大小的单位

%、px

%：参照父元素的大小

px：定值
vh、vw

vh：根据浏览器的高度而变化

vw：根据浏览器的宽度而变化
em

参照父元素的大小，变为父元素的多少倍
rem（相较于em，此较为常用）

参照浏览器的大小(字体)，变为其的多少倍

7 - 游标(cursor)

鼠标移动到元素上显示什么样式

pointer 小手

a标签自带样式
move 移动
*-resize 指定方向移动
wait 等待(圆圈)
help 帮助 (箭头+？)
crosshair 大十字
text 文本(竖棍)

8 - overflow

当内容超过元素大小时，会出现显示不全的问题，在父元素中用overflow解决

visible 默认
auto 自动加滚动条（内容超出时）
hidden 超出的部分不显示

通常用于显示图片
scroll 加滚动条（无论内容是否超出）

9 - 过渡时间

样式改变的时候经历一个过渡时间

transition: 过渡时间延迟时间

过渡时间：样式变化的一个速度

延迟时间：样式过多久之后在开始改变

10 - 倒影

只有google浏览器等webkit内核浏览器支持该样式

-webkit-box-reflect

below 下方显示
above 上方显示
left 左方显示
right 右方显示

可以传两个值，第二个值表示阴影距离图片的距离

11 - 背景阴影

box-shadow: 右阴影下阴影锐化(看着如同发光一样) 阴影色

12 - 背景渐变

线性渐变

呈现一条直线得到渐变方式

background: linear-gradient(角度,开始颜色,结束颜色);

background: linear-gradient(90deg,#c6ffdd,#fbd786,#f7797d);
径向渐变（圆形扩散）

background: -webkit-radial-gradient(两个值确定一个点,扩散距离两个值（横向、纵向）,开始色,结束色);

background: -webkit-radial-gradient(500px 500px,500px 500px,#000000,#ff0000);

background: -webkit-radial-gradient(center center, 400px 400px, #ffaa7f, rgba(0, 0, 0, 1));

注意：当扩散距离未充满整个区域时，剩下的区域会由结束色填充