CSS:选择器的基本说明及css基本属性_css 选择器属性-优快云博客

本文链接：https://blog.youkuaiyun.com/wzc3180043380/article/details/143331639

一.选择器

要使用CSS对HTML页面中的标签实现一对一，一对多的控制，这就需要用到CSS选择器。

现进行常用选择器的说明(所有选择器都是在网页头部中进行操作的,且在<style>标签内)

1.标签选择器

标签选择器顾名思义,就是根据标签名进行选择,以下是标签选择器色基本语法:

<head>
		<style>
			标签名{
				属性1:属性值1
				属性2:属性值2
				属性3:属性值3
			}
		</style>
		
		 </head>

2.类选择器

通过使用class标签为目标标签命名,然后通过标签的class属性进行选择,基本语法如下:(以下以选择超链接为例,展现完整的类选择器使用示例)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style>

			.p{
				
				属性1:属性值1
				属性2:属性值2
				属性3:属性值3
			}
		</style>
		
		 </head>

			}
		</style>
		
		 </head>


			
		
	</head>
	<body>
		<!-- 此处我将标签命名为"p" -->
		<a class="p">取之有道</a>
		
	</body>
</html>

注意:前面的小点是不可以舍去的.

3. id选择器

id选择器的使用和类选择器几乎是一摸一样的,同样首先命名,然后进行选择,不过id选择器一次只能匹配一个标签,单个的标签仅能匹配一个唯一的id.基本语法如下:
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		
		<style>
			#s{
				
				属性1:属性值1
				属性2:属性值2
				属性3:属性值3
			}
		</style>
		
		 </head>

			}
		</style>
		
		 </head>


			
		
	</head>
	<body>
		
		<a id="s">取之有道</a>
		
	</body>
</html>
还有一点与类选择器不同的是,id选择器将小点,更换为了"#"
#s{
				
				属性1:属性值1
				属性2:属性值2
				属性3:属性值3
			}

4.通配选择器

通配选择器可以用来选中页面中的所有的标签,基本语法如下:

<head>
		<style>
			*{
				
				属性1:属性值1
				属性2:属性值2
				属性3:属性值3
			}
		</style>
		
		 </head>

5.子选择器

当出现标签相互套用时,可以只用此选择器,类似于使用坐标,对具体位置定位修饰,基本语法如下:

<head>
		<style>
			.外标签名 内标签名{
				
				属性1:属性值1
				属性2:属性值2
				属性3:属性值3
			}
		</style>
		
		 </head>

以上即为选择器的基本说明.

二.CSS样式的基本属性

1.文本

color：字体颜色

● font-size：字体大小

● font-family：字体

● text-align：文本对齐

● text-decoration:line-through：定义穿过文本下的一条线

● text-decoration:underline：定义文本下的一条线

● text-decoration:none：定义标准的文本

● font-style: italic;斜体文本

● font-weight:字体粗细

● line-height:设置行高

● letter-spacing:可以指定字符间距

● text-indent:用来设置首行缩进

2.背景

●background-color 背景颜色

●background-image:url(图片地址) 背景图片

●background-repeat 背景重复

●background-size 背景尺寸

●background- position 背景位置

3.透明效果

opacity (透明度数值在0~1之间)

4.css伪类

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

伪类的语法：

:hover伪类表示鼠标移入的状态

:active表示的是被点击的状态

:focus向拥有键盘输入焦点的标签添加样式

语法演示
<head>
		<meta charset="utf-8" />
		<title></title>
		
		 标签名:hover{
			 属性1:属性值1
			 属性2:属性值2
			 属性3:属性值3
		 }
		 
		 标签名:active{
			 属性1:属性值1
			 属性2:属性值2
			 属性3:属性值3
		 }
		 
		 标签名:focus{
			 属性1:属性值1
			 属性2:属性值2
			 属性3:属性值3
		 }
			
		
	</head>

5.css列表

CSS 列表属性可以放置、改变列表项标志，或者将图像作为列表项标志。

● list-style-image:url(图片地址) 将图象设置为列表项标志。

● list-style-position 设置列表中列表项标志的位置。

● list-style-type设置列表项标志的类型.

● list-style :属性1 属性2 属性3 简写属性。

以上就是本章的全部内容.感谢观看.