初识css--1

logical_thinking

已于 2022-08-05 19:48:58 修改

阅读量173

点赞数 2

分类专栏： html的基础知识文章标签： html5 前端 html 青少年编程 css

于 2022-08-05 19:29:43 首次发布

本文链接：https://blog.csdn.net/logical_thinking/article/details/126183774

版权

html的基础知识专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

初识css
一、css的引入方式
二、选择器
- 1.基本选择器
- 2.层次选择器
总结

前言

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

一、css的引入方式

css的引入方式有三种：分别是行内式、内嵌式、外链式。每个方式都不同，并且每个方式的优先级是不同的：样式优先级：最晚优先，就近原则，外链>行内>内嵌
！important：优先级最大，无穷大

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 3、可以被多个文件重用 -->
		<link rel="stylesheet" href="./css/style.css" >
		<!--
			内嵌式
			
		 -->
		<style>

			h1,p
			{
				width: 130px;
				background-color: violet;
				
			}
/* 			span
			{
				font-size: 30px;
			} */
			/* 样式优先级：最晚优先，就近原则
				外链》行内》内嵌
				！important：优先级最大，无穷大
			 */
		</style>
	</head>
	<body>
		<!--
			1、行内方式:结构与变现混合，不利于维护 代码可读性差  样式重用性差
		-->
		<p style="color: red;">666</p>
		<h1>
			666
		</h1>
		<span>666</span>
	</body>
</html>

二、选择器

1.基本选择器

如果想要用css为html页面中的元素添加样式，就需要用到css选择器，css设置样式都是通过css选择器进行控制。
css选择器就是用于指向需要css作用的标签，让css样式知道自己需要到那个标签上去。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 标签选择器，会选出所有符合条件的标签 */
			h1{
				color: red;
			}
			p{
				color: cornflowerblue;
			}
			/* 类选择器   选出所有类名一致的标签  .类名*/
			.active{
				font-size: 30px;
			}
			/* id 选择器：唯一不能重复   #id名 */
			#text{
				background-color: blueviolet;
			}
			#ww{
				background-color: antiquewhite;
			}
			.second{
				font-weight: 56.25rem;
			}
			/* 并集选择器  以逗号隔开任何选择器都可加入 */
			h1,p{
				font-style: italic;
			}
			/* 通配符选择器 *代表所有标签 */
			*{
				border: 1px solid;
			}
		</style>
	</head>
	<body>
		<h1>welcome</h1>
		<p class="active" id="text">张三</p>
		<p class="active" id="ww">李四</p>
		<div class="active second">王五</div>
	</body>
</html>

2.层次选择器

层次选择器又有分别；子代选择器、后代选择器、兄弟选择器；

子代选择器：如其名所选择的都是父级的下一级标签；

后代选择器：所选择的是这父级一下的所有的标签；

兄弟选择器：所选择的是父级下面的同级标签；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			/* 子代选择器 E>F  F是E的儿子 */
			.wrapper>ul{
				background-color: aqua;
			}
			.wrapper>ul>li+p{
				font-size: 20px;
				background-color: tan;
			}
			/* 后代选择器  E F E所有的后代F */
			.wrapper p{
				font-size: 50px;
				background-color: crimson;
			}
			/* 兄弟选择器 E+F,E的第一个兄弟F */
			.wrapper>p+span{
				background-color: chocolate;
			}
		</style>
	</head>
	<body>
		<!-- div.wrapper+tab键  快捷键 -->
		<div class="wrapper">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<p>html</p>
			</ul>
			<p>奇酷教育</p>
			<span>web大前端1</span>
			<span>web大前端2</span>
		</div>
		<div class="wrapper1">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
			</ul>
		</div>
	</body>
</html>

总结

以上就是今天要讲的内容，本文仅仅简单介绍了css的引入方式，并且简单叙述了选择器的使用方法，感兴趣的朋友可以订阅，本人会持续更新前端知识，适合零基础学习。

logical_thinking

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
初识css--1

CSS 指层叠样式表 (CascadingStyleSheets)样式定义如何显示HTML 元素样式通常存储在样式表中把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS 文件中多个样式定义可层叠为一个以上就是今天要讲的内容，本文仅仅简单介绍了css的引入方式，并且简单叙述了选择器的使用方法，感兴趣的朋友可以订阅，本人会持续更新前端知识，适合零基础学习。......
复制链接

扫一扫