第三次网页前端培训（CSS）

最新推荐文章于 2024-05-18 11:09:56 发布

轻大Klein

最新推荐文章于 2024-05-18 11:09:56 发布

阅读量585

点赞数

分类专栏： HTML 文章标签：前端 css jquery

本文链接：https://blog.csdn.net/m0_54055385/article/details/122789689

版权

HTML 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1. 视频链接

【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili2

2. 教程链接

菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)

3. CSS主要内容

4.CSS概述

CSS(英文全称:Cascading Style Sheets）层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML（标准通用标记语言的一个子集)等文件样式的计算机语言。

CSS目前最新版本为CSS3，是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言，CSS能够对网页中的对象的位置排版进行像素级的精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力，并能够进行初步交互设计，是目前基于文本展示最优秀的表现设计语言。CSs能够根据不同使用者的理解能力，简化或者优化写法，针对各类人群，有较强的易读性。

CSS是用来美化网页用的，没有网页则css毫无用处，所以css需要依赖HTML展示其功能。

5. CSS的基本使用

5.1 CSS的基本语法

CSS样式由选择器和一条或多条以分号隔开的样式声明组成。每条声明的样式包含着一个CSS属性和属性值。

注意： css声明要以分号;结束，声明以{}括起来。

建议一行书写一个属性。

若值为若干单词，则要给值加引号，如 font-family: "agency fb";

5.2 CSS的三种使用方式

CSS的三种使用方式：1.行内样式

2.内部样式

3.外部样式

5.2.1 行内样式

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

实例：

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

效果：

缺点：如果每个h2都想用这种样式耦合度过高。

5.2.2 内部样式

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

<head>
		<meta charset="utf-8" />
		<title>CSS的基本使用</title>
		<!-- 设置所有的h2标签的文本为红色 -->
		<style>
		h2{
			color:red;
		}
		</style>
</head>

css的定义：

选择器名{

属性名：属性值；

}

5.2.3 外部样式

定义在外部的css文件中，通过link标签引入

<link rel="stylesheet" type="text/css" href="css/new_file.css" />

rel="stylesheet" 层叠样式表

type="text/css" CSS类型

href="css/new_file.css" CSS文件路径

6. CSS选择器

6.1 基本选择器

6.1.1 通用选择器

6.1.2 元素选择器

选择指定标签

6.1.3 ID选择器

选择设置过指定id属性值的元素

6.1.4 类选择器

选择设置过指定class属性值的元素

6.1.5 分组选择器

当几个元素样式属性一样时，可以共同调用一个声明，元素之间用逗号分隔。

样例

        *{
			color: #0000FF;
		}
		div{
			font-size: 1.25rem;
			font-family: 楷体;
			background-color: aqua;
		}
		#p1{
			font-size: 40px;
			background-color: #FF0000;
		}
		#1{
			font-size: 40px;
			background-color: #FF0000;
		}
		.cls1{
			background-color: bisque;
		}
		h2,font{
			color:red;
			font-family: "arial black";
		}

6.2 组合选择器

CSS组合选择器说明了两个选择器直接的关系。CSS组合选择符包括各种简单选择符的组合方式。在CSS 中包含了四种组合方式:后代选取器(以空格分隔)，子元素选择器(以大于号分隔），相邻兄弟选择器(以加号分隔)，普通兄弟选择器（以波浪线分隔)。

6.2.1 后代选择器（派生选择器）

用于选择指定标签元素下的后辈元素，以空格分隔。

<style type="text/css">
			.china li{
				border: #7FFF00 solid 0.0625rem;
			}
</style>

<ul class="china">
			<li>省份
				<ul>
					<li>河南</li>
					<li>河北</li>
					<li>山东</li>
				</ul>
			</li>
			<li>直辖市
				<ul>
					<li>北京</li>
					<li>上海</li>
					<li>天津</li>
				</ul>
			</li>
</ul>

6.2.2 子元素选择器

用于选择指定标签元素的所有第一代子元素，以大于号分隔

6.2.3 相邻兄弟选择器

可选择紧接在另—元素后的元素，且二者有相同父元素。以加号分隔

        #mydiv+div{
				    background-color: #8A2BE2;
			        }

        <div>相邻兄弟选择器1</div>
		<div id="mydiv">相邻兄弟选择器2</div>
		<div>相邻兄弟选择器3</div>
		<div>相邻兄弟选择器4</div>

6.2.4 普通兄弟选择器

可选择指定元素后面的所有指定元素，两者具有相同的父元素，用波浪号隔开。

#mydiv2~div{
				background-color: brown;
			}

<div id="mydiv2">普通兄弟选择器1</div>
		<div>普通兄弟选择器2</div>
		<div>普通兄弟选择器3</div>

轻大Klein

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第三次网页前端培训（CSS）

1. 视频链接【优极限】 HTML+CSS+JavaScript+jQuery前端必学教程，小白教学，前端基础全套完成版_哔哩哔哩_bilibili22. 教程链接菜鸟教程 - 学的不仅是技术，更是梦想！ (runoob.com)3. CSS主要内容4.CSS概述CSS(英文全称:Cascading Style Sheets）层叠样式表,是一种用来表现HTML(标准通用标记语言的一个应用)或XML（标准通用标记语言的一个子集)等文件样式的计算机语言。...
复制链接

扫一扫