欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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 > 标签

  1. 实际开发中,使用较多的是class选择器,归纳总结思想 Bootstrap
  2. 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