网页前端培训3CSS基本使用/选择器/常用属性

刹那芳华❀

已于 2022-02-06 16:27:23 修改

阅读量645

点赞数

分类专栏：网页前端培训文章标签： css 前端 css3

于 2022-02-06 16:26:00 首次发布

本文链接：https://blog.csdn.net/qq_61176213/article/details/122796313

版权

网页前端培训专栏收录该内容

7 篇文章 0 订阅

订阅专栏

CSS

概述

层叠样式表，做到网页表现与内容分离的一种样式的设计语言，能对网页中的对象位置进行像素级的精确控制。

基本语法

选择器{

属性：属性值；

......

}

注意：声明需要 { } 括起来，每个声明以分号结尾，若属性值为多个单词，需要加 " "

注释： /* 注释内容 */

使用方式：

1.行内样式

直接写在标签上的样式，在标签上通过style属性定义

<h2 style="color: blue;font-family: 楷体;">Hello World</h2>

2.内部样式

定义在style标签中的样式，style标签一般设置在head标签中

<style>
    h2{
        font-size=20px；
		color: red;
      }
</style>

设置所有的h2标签的文本大小20px，为红色

3.外部样式

定义在外部的CSS文档中，通过link标签

<link rel="stylesheet"type="text/css"href="css文件的路径"/>

link标签写在head标签中

当有多重样式时，按就近原则

选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			/*通用选择器*/
			*{
				color: #00FFFF;
			}
			/*元素选择器*/
			div{
				font-size:1.875rem ;
			}
			/*ID选择器*/
			#p1{
				background-color: brown;
			}
			/*类选择器*/
			.class1{
				font-family: 楷体;
			}
			/*分组选择器*/
			#p1,.class2,font,span{
				text-decoration: line-through;
			}
		</style>
	</head>
	<body>
		<div class="class1">这是一个div</div>
		<div>这是另一个div</div>
		<p id="p1">这是一个p</p>
		<span class="class2">这是一个span</span><br />
		<font>这是一个font</font>
		<!--
		1.通用选择器*{
			......
		}
		2.元素选择器
		元素名称{
			......
		}
		3.id选择器
		#id属性值{
			......
		}
		4.类选择器
		.class属性值{
			......
		}
		
		5.分组选择器
		选择器1选择器2{
			......
		}
		-->
	</body>
</html>

CSS样式的优先级，是根据选择器的精准度/权重来决定，权重越大，优先级越高

元素选择器：1

类选择器：10

id选择器：100

内联选择器：1000

组合选择器

后代选择器（空格隔开）

子元素选择器（大于号隔开）

相邻兄弟选择器（加号隔开）

普通兄弟选择器（波浪线隔开）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<style type="text/css">
			/*后代选择器*/
			.food li{
				border: chartreuse solid 1px;
			}
			/*子代选择器*/
			.food2>li{
				border: palevioletred dotted 1px;
			}
			/*相邻兄弟选择器*/
			#mydiv+div{
				background-color: coral ;
			}
			/*普通兄弟选择器*/
			#mydiv2~div{
				background-color: fuchsia;
			}
				</style>
		<title>组合选择器</title>
	</head>
	<body>
		<!--
		组合选择器
			后代选择器
				选择指定元素的所有指定后代元素，以空格隔开
				选择器 指定元素{
					属性名：属性值；
					......
				}
			子代选择器
				选择指定元素的第一代元素，以大于号隔开
				选择器 > 指定元素{
					属性名：属性值；
					......
				}
			相邻兄弟选择器
				选择指定元素的下一个指定元素（只会找一个）两者有相同的父元素，
				以加号隔开
				选择器 + 指定元素{
					属性名：属性值；
					......
				}
			普通兄弟选择器
				选择指定元素的所有指定元素，两者有相同的父元素，以波浪号~隔开
				选择器 ~ 指定元素{
					属性名：属性值；
					......
				}
		-->
		<ul class="food">
			<li>水果
				<ul>
					<li>苹果</li>
					<li>菠萝</li>
					<li>火龙果</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>菠菜</li>
					<li>胡萝卜</li>
					<li>白菜</li>
				</ul>
			</li>
		</ul>
			<hr />
		<ul class="food2">
			<li>水果
				<ul>
					<li>苹果</li>
					<li>菠萝</li>
					<li>火龙果</li>
				</ul>
			</li>
			<li>蔬菜
				<ul>
					<li>菠菜</li>
					<li>胡萝卜</li>
					<li>白菜</li>
				</ul>
			</li>
		</ul>
		<div>相邻兄弟选择器测试</div>	
		<div id="mydiv">相邻兄弟选择器测试</div>	
		<div>相邻兄弟选择器测试</div>	
		<div>相邻兄弟选择器测试</div>	
		<div>相邻兄弟选择器测试</div>	
		<hr />
		<div>普通兄弟选择器测试</div>
		<div id="mydiv2">普通兄弟选择器测试</div>	
		<div>普通兄弟选择器测试</div>	
		<div>普通兄弟选择器测试</div>	
		<div>普通兄弟选择器测试</div>	
	</body>
</html>

刹那芳华❀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
网页前端培训3CSS基本使用/选择器/常用属性

CSS概述层叠样式表，做到网页表现与内容分离的一种样式的设计语言，能对网页中的对象位置进行像素级的精确控制。基本语法选择器{属性：属性值；属性：属性值；......}注意：声明需要 { } 括起来，每个声明以分号结尾，若属性值为多个单词，需要加 " "注释： /* 注释内容 */使用方式：1.行内样式直接写在标签上的样式，在标签上通过style属性定义<h2 style="color...
复制链接

扫一扫