CSS3个人笔记基础知识

最新推荐文章于 2024-07-25 15:36:30 发布

墨辰辰辰辰辰

最新推荐文章于 2024-07-25 15:36:30 发布

阅读量41

点赞数

分类专栏：个人笔记文章标签： css html web

本文链接：https://blog.csdn.net/m0_46469077/article/details/115519651

版权

个人笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

CSS3个人笔记

基础知识

定义

CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML）的语言，可以将文档以更优雅的形式呈现给用户。

工作原理

当一个浏览器在显示文档的时候，需要将文档内容和样式内容结合到一起，以此，在处理文档的时候包含两个阶段：

浏览器将HTML和CSS转换为DOM (Document Object
Model)，DOM在计算机内存中表示文档，使得文档和CSS结合。
浏览器显示DOM的内容

DOM简介

DOM （Document Object Model）是一个树形结构，在HTML中的每个元素，属性，甚至于文本都可以被转换为DOM中的一个节点。每个节点在节点树中都有对应的关系节点（比如父节点，兄弟节点）。
在这里插入图片描述

CSS语法

CSS声明（CSS declarations）

CSS语言的核心功能就是为特定的属性设定特定的值，CSS引擎通过计算出声明的每个属性来显示元素。CSS的属性和值都是大小写敏感的。属性与值通过“:”分隔开。并不是所有的值都适用于同一个属性，不同的属性有一系列不同的值。
在这里插入图片描述

CSS声明块（ CSS declaration blocks）

将多个CSS声明写在一起，每个CSS声明通过“;”分隔开，最后一个css声明无需使用“;”分隔开。使用“{”“}”将多个CSS声明括起来，这样就构成了一个CSS声明块。
在这里插入图片描述

CSS规则（CSS selectors and rules）

在CSS声明块前添加一个选择器，用来指明将CSS声明应用在哪些元素上。

在这里插入图片描述

CSS可读性（ make CSS readable）

空白（ White space）
空白意味着实际空格、制表符和新行，可以添加空白使样式表更加可读。
注释（ Comments）

 /* 这里就是CSS的注释 */

速记写法（ Shorthand）
类似于font，background， padding， border， margin 这些都被称为速记属性。这些属性允许在一行中写多个属性值。速记属性可以节省时间，使代码整洁。
例如：
border:1px solid red;
background-color:red;
padding: 10px 15px 15px 5px;
等价于
padding-top: 10px; padding-right: 15px;
padding-bottom: 15px;
padding-left: 5px;

CSS应用

CSS如何作用于HTML

浏览器将CSS规则应用到文档上，使CSS影响文档的显示。CSS规则由选择器和一系列的属性对组成。一系列的CSS规则就可以形成一个层叠样式表。

外部样式表（ External stylesheet）

将CSS规则写到一个以“.css”为后缀的文件中，然后使用HTML中的标签将CSS文件应用到HTML文档中，或者在style标签的第一行使用@import ‘style.css’;导入。

CSS代码片段

@charset ”utf-8”; 	
		h1 { 
			color: blue;
		   background-color: yellow; 
		   border: 1px solid black; 
		   }

HTML代码片段

		<head>  		
		<meta charset="utf-8">  		
		<link   rel="stylesheet" href="style.css"
		</head>


        <style>
		@import 'style.css';
		</style>

@import和link的区别

1) 所属范围
	@import 是css的语法，只能导入样式
	link是html的标签，不仅可以加载样式，还可以定义rel属性
		rel="stylesheet"表示调用外部样式表
2) 加载顺序
	页面加载的时候，link标签引入的css被同时加载
	@import引入的css在页面加载完毕后再被加载
3) 兼容性
	@import需要兼容IE5+
	link标签，不存在兼容性问题

内部样式表（ Internal stylesheet）

将CSS规则写到<style>标签内，在不能直接更改CSS文件情况下，这种方式有效，但是一般不推荐使用，修改起来不方便。

HTML代码片段

           <head>
		      	     <meta charset="utf-8">
		      	     <style> 		 
		      	     /*放在style的第一行去导入外部样式表*/ 					  
		      	     @import  'style.css'; 	 	
		      	     h1 { 
		      	     color: blue; 
		      	     background-color: yellow; 
		      	     border: 1px solid black;
		      	     } 		 
		      	     p { 
		      	     color: red; 
		      	     } 
		      	     </style> 
		   </head>

行内样式表（ Inline styles）

将CSS规则写到元素的style属性中，只能作用于一个元素，一般不推荐使用。

HTML代码片段

				<body> 
				   <h1 style="color: blue;background-color:yellow;border: 1px solid black;"> 		
				   			Hello World!
				   </h1> 
				   <p style="color:red;">
				   This is my first CSS example
				   </p>  	
				</body>

墨辰辰辰辰辰

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3个人笔记基础知识

CSS3个人笔记基础知识定义CSS (Cascading Style Sheets) 层叠样式表，是一个用于修饰文档（可以是标记语言HTML，也可以是XML）的语言，可以将文档以更优雅的形式呈现给用户。工作原理当一个浏览器在显示文档的时候，需要将文档内容和样式内容结合到一起，以此，在处理文档的时候包含两个阶段：浏览器将HTML和CSS转换为DOM (Document ObjectModel)，DOM在计算机内存中表示文档，使得文档和CSS结合。浏览器显示DOM的内容DOM简介DOM
复制链接

扫一扫