CSS-01

程序员文章站 2022-06-23 10:02:15

CSS1. frameset1.1 frameset使用使用frameset时，当前HTML页面中不得嵌套body标签。frameset目前是一个被淘汰的标签。CSS2.1 CSS是什么？层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像...

CSS

1. frameset

1.1 frameset使用

使用frameset时，当前HTML页面中不得嵌套body标签。
frameset目前是一个被淘汰的标签。

2.1 CSS是什么？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

总结：

CSS是一种样式控制语言，用于控制HTML元素显示的外观。

HTML是前端骨架，CSS是前端页面的润色。

web2.0 规范下，一个页面应该分层设计，结构，样式，交互。这三层分别对应不同的技术：

html - 页面结构。
css - 页面样式。
javascript - 页面交互。

2.2 CSS三种引入方式

行内样式

    <div style="color: green; font-size: 20px;">午餐菜单</div>

内联样式

    <head>
    		<meta charset="utf-8">
    		<title>css案例2-CSS三种引入方式</title>
    		<link href="css-02.css" rel="stylesheet" />
    		<style>
    			/* 内联样式 */
    			span{
    				color: aqua;
    				font-size: 30px;
    			}
    			/* b{
    				color: brown;
    				font-size: 15px;
    			} */
    		</style>
    	</head>

外联样式

html文件

    <head>
    		<meta charset="utf-8">
    		<title>css案例2-CSS三种引入方式</title>
    		<link href="css-02.css" rel="stylesheet" />
    </head>

CSS文件

    p{
    	color: greenyellow;
    	font-size: 20px;
    }

2.3 三种引入方式优先级顺序

行内 > 内联 > 外联

2.4 选择器

2.4.1 标签选择器

使用标签名作为选择器约束的标签范围
/* 标签选择器 */
div{
		color: #BC8F8F;
		font-size: 10px;
}

2.4.2 ID选择器

根据HTML标签的ID属性，作为选择器来约束对应HTML标签，这里要求ID属性当前页面唯一
/* ID选择器 */
#id1{
		color: aqua;
		font-size: 20px;
}

2.4.3 class选择器

根据HTML标签的class属性，作为选择器的标签，而class属性可以多个标签同时使用
/* class选择器 */
.class1{
	color: blueviolet;
	font-size: 30px;
}

2.4.4 层级选择器、并集选择器

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>层级、并集选择器</title>
    		<style>
    			/* 层级选择器 */
    			#div1,#div2 p{
    				color: #00FFFF;
    				font-size: 25px;
    			}
    			/* 并集选择器 */
    			#div3,.p1,span{
    				color: forestgreen;
    				font-size: 35px;
    			}
    		</style>
    	</head>
    	<body bgcolor="antiquewhite">
    		<div id="div1">
    			<p>生命中总要有裂缝</p>
    		</div>
    		<div id="div2">
    			<p>这样阳光才照的进来嘛</p>
    		</div>
    		<hr/>
    		<div id="div3">陈</div>
    		<p class="p1">卓</p>
    		<span>璇</span>	
    	</body>
    </html>

层级选择器：不加，
并集选择器：加，

2.4.5 选择器优先级顺序

ID > class > 标签

实际开发中，使用较多的是class选择器，归纳总结思想 Bootstrap
id class 标签权重最高是id，其次是class，最后是标签
精准度关系。

2.4.6 伪类选择器

    <head>
    		<meta charset="utf-8">
    		<title>伪类选择器</title>
    		<style>
    			a{
    				color: red;
    				font-size: 30px;
    				text-decoration: none;
    			}
    			/* 伪类选择器  顺序固定 */
    			/* 未访问 */
    			a:link{
    				color: yellow;
    			}
    			/* 访问后 */
    			a:visited{
    				color: yellowgreen;
    			}
    			/* 悬浮状态 */
    			a:hover{
    				color: #008000;
    			}
    			/* 点击访问 */
    			a:active{
    				color: #8A2BE2;
    			}
    		</style>
    	</head>
    	<body>
    		<a href="https://www.acfun.cn">A站</a>
    	</body>

顺序固定
未访问link --> 访问后visited --> 悬浮状态hover --> 点击访问active

下篇： CSS-02

本文地址：https://blog.csdn.net/weixin_43755857/article/details/107224568

上一篇：新骁龙8和骁龙8有什么区别新骁龙8和骁龙8对比介绍

下一篇：我大半夜的才懒得理你们