web前端css基本内容

web前端css

当我们用html的语法给内容规划布局样式时，可能会出现许多个相似的内容需要运用同一种样式，复制粘贴太麻烦而且如果后期要改动的话比如把许多个地方从红色改成蓝色，就需要一个一个改了，这时候就需要引入css来操作了

把需要添加的属性放在style标签中就好了

行内样式表：

<p style="color: red;font-size: 20px;font-weight: bold;">末日铁拳p>
1
2
3
4
5

内嵌样式表：

<style>
	p{
		font-size:16px;
		color:red;
	}
style>
1
2
3
4
5
6

外部样式表：

<link href="css/index.css" rel="stylesheet">
1

用来连接外部css，然后在外部css中改样式

外部css：

p{
	color: red;
	font-size: 50px;
}
1
2
3
4

选择器：

根据不同选择器类型给不同类型的内容更改样式

标签选择器：

p{
	color:red;
	font-size:20px;
}
1
2
3
4

id选择器：

#title{
	color:red;
	font-size:20px;
}
1
2
3
4

类选择器：

.p1{
	color:blueviolet;
}
.p2{
	color:blue;
}
1
2
3
4
5
6

通配选择器 选中所有的标签

*{
	font-family: 楷体;
	color: red;
	font-size: 30px;
}
1
2
3
4
5

选择器组合 可以为多个选择器定义相同的样式表

#title,.p1,.p2,h1{
					font-family: 楷体;
					}
1
2
3

字体的各种属性：

				color:red;
				font-size: 20px;	/*字大小*/
				font-family: 楷体;	/*全部字体格式*/
				font-weight: 900;	/*字体加重*/
				font-style: italic;	/*字体，斜体*/
				text-align: right;	/*靠右对齐   align：对齐*/
				text-decoration: line-through;	/*删除线*/
				text-decoration: underline;		/*下划线*/
				line-height: 20px;		/*行高*/
				letter-spacing: 30px;	/*字符间距*/
				word-spacing: 40px;		/*单词间距*/
				text-indent: 2em;	/*首行缩进 em相当于当前文档中一个字符的大小*/
1
2
3
4
5
6
7
8
9
10
11
12

如果想要去除超链接的下划线可以：

a{
	text-decoration: none;
}
1
2
3

背景图片：

			p{
				color: red;
				background-color: aliceblue;	/*背景颜色*/
				width: 800px;
				height: 600px;
				background-image: url(./img/图片.png);	/*背景图片*/
				background-repeat: no-repeat;	/*控制背景图片是否重复*/
				background-position: center center;		/*背景位置*/
				background-size: 400px 400px;	/*背景尺寸*/
			}
1
2
3
4
5
6
7
8
9
10

列表：

如果有两个列表，想把列表的内容样式进行修改，只改一个列表的话，把两个列表的li分别加上class名再进行修改很麻烦，直接给ul加上class名然后对u1，u2进行修改：

			.u1 li{
				text-align: center;
				color: red;
				list-style-type: none;	/*去除默认的图标*/
				list-style-image:url(./img/wemeet%20image_20240302144312961.png) ;		/*指定一个图片当图标*/
				list-style-position: inside;	/*图标位置*/
				
				/* 直接用list-style把三种属性都可以写上 */
				list-style: none url(图片.png) inside; 
			}
		
"u1">
			
列表
			
列表
			
列表
			
列表
		
		
"u2">
			
列表
			
列表
			
列表
			
列表
		
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

伪类：

CSS伪类专门用来表示标签的一种的特殊的状态，当我们需要为处在这些特殊状 态的标签设置样式时，就可以使用伪类 。

			/*鼠标移到标签上时，自动切换到样式表*/
			a:hover{
				color:green;
				text-decoration: underline;
			}
			p:hover{
				color: blue;
				background-color: #008000;
			}
			
			/* 当鼠标点击标签时，自动切换到样式表*/
			a:active{
				color: aqua;
			}
			
			input:active{
				background-color: #FF0000;
			}
			
			/* 向拥有鼠标焦点的标签(输入框)	添加样式 */
			i1:focus{
				background-color: aqua;
			}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

透明度：

img{
	opacity: 1;	/*设置标签透明度 0完全透明 1完全不透明*/
}
1
2
3

标签：

块级标签:

无论内容多少，都会独占一行，一般用来进行网页布局
可以设置宽高width height
例如

、

、

• 、
  1. 、

     ---

     等。

行级标签：

只占自身大小，不会占一行
设置宽高无效
主要用来对文字修饰
例如、、、等。

行块级标签：

不占一行，可以设置宽高
例如 等

display：

		
		 
"display: inline;">艾兴瓦尔德
		 
		 "display: block;">里阿尔托
		 
		 "图片" style="display: none;" >
1
2
3
4
5
6
7
8
9
10
11
12

div&span：

p h1这些标签虽然是块级标签，但是它们都有默认样式，会影响网页布局使用
div标签是一个块级标签，没有任何的附加样式，用来进行网页布局，给什么属性就变成什么样子
span和div同理但是是一个行级标签