百度360必应搜狗淘宝本站头条
HTML5 标签标签HTML5 标签 (已废弃)HTML 简介键盘快捷键
当前位置：网站首页 > 技术文章 > 正文

前端入门——css 样式表简介

zhezhongyun 2024-12-01 19:24 109 浏览

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

那css网页HTML有什么关系?

通俗的讲你可以把HTML比作是组成网页的框架，而css则是装饰美化网页的工具。一个没有任何css的网页是排版混乱，杂乱无章的，没有美感的。

本文下来主要介绍下如何在网页中使用css，以及css包括哪些知识点，具体的css知识点会在以后逐一介绍，一篇文章很难讲完。

回顾下HTML基础

css是作用于HTML标签上的，如果你还不是很熟悉HTML，请先学习HTML的知识，再来学习css。

一个HTML标签如下结构：

  • 标签（Tag）—— 元素名称，如a, div
  • 属性（Attribute）—— 元素属性，如href
  • 值（Value）—— 属性值
  • 元素（Element）—— HTML标记中所有的东西：属性、值和内容。

网页中如何使用css

网页中使用css一般有三种，行内样式，内部样式表及外部样式表。

1、行内样式

在html标签的style属性中写css代码，这样的方式就是行内样式。行内样式有个缺点就是对于页面中相同的元素必须每个元素都写一遍css代码，很不方便，所以这时需要使用内部样式表或外部样式表。

如下示例：

<html>
  <head>
		<title>行内样式</title>
  </head>
<body>
    <p style="color:red;font-size:14px;">hello world!</p>
  </body>
  </html>

2、内部样式表

使用<style></style> 标签之间写css代码，就是内部样式表。内部样式表缺点就是当页面复杂的时候，不利于组织代码，把不同模块功能的css代码组织成不同的css文件，这样更加清晰，便于组织维护代码。

如下示例：

<html>
  <head>
  <title>内部样式表</title>
  	<style type="text/css>
  			h1{
        	color: red;
        }
				p{
        	color: bule;
        }
    </style>
  </head>
<body>
  	<h1>标题1</h1>
    <p>hello world!</p>
  </body>
  </html>

3、外部样式表

使用<link href="css文件路径"> 的方式引入外部css 文件，这就是外部样式表，除此之外，在一个css 文件中还可以使用 @import "css文件路径" 引入另外一个css文件。

示例1：

<html>
  <head>
  <title>内部样式表</title>
  <link href="style.css" rel="stylesheet">
  </head>
  <body>
  	<h1>标题1</h1>
    <p>hello world!</p>
  </body>
  </html>

style.css

h1{
  color: red;
}
p{
  color: bule;
}

示例2：

如下代码，在style.css 中使用@import引入一个home.css文件，

style.css

@import "home.css"
h1{
  color: red;
}
p{
  color: bule;
}

home.css

div{
	color: #ff00ff;
}
p{
  color: red;
}

这里特别注意下，home.css 里面的css 选择器如果和style.css 的一样，那么style.css 的样式效果会覆盖home.css 的效果，比如这里p标签最终显示为蓝色，而不是红色。

css语法

css有三个部分组成：选择器、属性和值。

  • 选择器 —— 用来查询选择HTML标签的
  • 属性 —— 设置HTML元素的各种样式
  • 值 —— 应用的样式值

例子：

#id{
	color: red;
}
p{
	color: green;
}
.head{
	color: blue;
  font-size: 12px;
}

如上#id,p,.head 就是选择器，大括号里面冒号前面是属性，冒号后面是值，每行以分号结束。

css 注释

cs样式表中注释语句以“/*”开始，以“*/”结束，如下所示：

/*这是注释*/
/*这是注释，可以多行
 这是注释，可以多行
*/
p{
	color: red; /*黑色字体*/
}

css 的继承和冲突

css 的继承规则是一个html元素的子元素会继承它的所有上级元素样式，有时会把很多外层的的样式叠加在一起，如下示例：

<html>
  <style>
  body{
  	color:red;
    font-size: 12px;
  }
div{
	 background-color: #0000ff;
}
  </style>
  <body>
  <div>
  	<p>段落文字</p>
  </div>
  </body>
  </html>

如上示例中，p段落包含在body中的div元素里，所以p段落继承了body 和 div 的样式，它将显示蓝色背景和红色字体。

如果在上面的示例代码中，再加上 p{color: #ffffff;} ,这个时候，p元素中的文字显示什么颜色？答案是白色，为什么，这就是css 产生冲突了。

在同一个元素上使用了同一个css属性但不同值的时候，就会产生冲突，浏览器会按照最后定义的样式为准。

css知识点

1、css 选择器

2 、css优先级

3、css 间距 —— margin、padding

4、css 盒子模型

5、css字体和文本 —— font

6、css链接样式

7、css颜色和背景 —— color 、background

8、css边框和圆角 —— border

9、css显示 —— display

10、css定位 —— position

11、css浮动 —— float

12、css布局：flex弹性盒子

13、css响应式：媒体查询

14、css 过渡和动画

15、css渐变和阴影

16、css网格

最后

css （层叠样式表）它有很多属性，但是平时只会用到一小部分，学习css不能死记硬背一大堆属性语法，这样没有多大用处，只需要掌握基本的概念和常用语法，基本上就够用了，对于其它的属性在用的时候再查询文档就可以了。

关于css详细内容，后面会按知识点介绍，感谢关注。

下一篇：前端入门——css 选择器

相关推荐

Python入门学习记录之一:变量_python怎么用变量

写这个，主要是对自己学习python知识的一个总结，也是加深自己的印象。变量（英文：variable），也叫标识符。在python中，变量的命名规则有以下三点：>变量名只能包含字母、数字和下划线...

python变量命名规则——来自小白的总结

python是一个动态编译类编程语言，所以程序在运行前不需要如C语言的先行编译动作，因此也只有在程序运行过程中才能发现程序的问题。基于此，python的变量就有一定的命名规范。python作为当前热门...

Python入门学习教程:第 2 章 变量与数据类型

2.1什么是变量？在编程中，变量就像一个存放数据的容器，它可以存储各种信息，并且这些信息可以被读取和修改。想象一下，变量就如同我们生活中的盒子，你可以把东西放进去，也可以随时拿出来看看，甚至可以换成...

绘制学术论文中的“三线表”具体指导

在科研过程中，大家用到最多的可能就是“三线表”。“三线表”，一般主要由三条横线构成，当然在变量名栏里也可以拆分单元格，出现更多的线。更重要的是，“三线表”也是一种数据记录规范，以“三线表”形式记录的数...

Python基础语法知识--变量和数据类型

学习Python中的变量和数据类型至关重要，因为它们构成了Python编程的基石。以下是帮助您了解Python中的变量和数据类型的分步指南：1.变量：变量在Python中用于存储数据值。它们充...

一文搞懂 Python 中的所有标点符号

反引号`无任何作用。传说Python3中它被移除是因为和单引号字符'太相似。波浪号~（按位取反符号）~被称为取反或补码运算符。它放在我们想要取反的对象前面。如果放在一个整数n...

Python变量类型和运算符_python中变量的含义

别再被小名词坑哭了：Python新手常犯的那些隐蔽错误，我用同事的真实bug拆给你看我记得有一次和同事张姐一起追查一个看似随机崩溃的脚本，最后发现罪魁祸首竟然是她把变量命名成了list。说实话...

从零开始:深入剖析 Spring Boot3 中配置文件的加载顺序

在当今的互联网软件开发领域，SpringBoot无疑是最为热门和广泛应用的框架之一。它以其强大的功能、便捷的开发体验，极大地提升了开发效率，成为众多开发者构建Web应用程序的首选。而在Spr...

Python中下划线 ‘_’ 的用法，你知道几种

Python中下划线()是一个有特殊含义和用途的符号，它可以用来表示以下几种情况：1在解释器中，下划线(_)表示上一个表达式的值，可以用来进行快速计算或测试。例如：>>>2+...

解锁Shell编程:变量_shell $变量

引言：开启Shell编程大门Shell作为用户与Linux内核之间的桥梁，为我们提供了强大的命令行交互方式。它不仅能执行简单的文件操作、进程管理，还能通过编写脚本实现复杂的自动化任务。无论是...

一文学会Python的变量命名规则!_python的变量命名有哪些要求

目录1.变量的命名原则3.内置函数尽量不要做变量4.删除变量和垃圾回收机制5.结语1.变量的命名原则①由英文字母、_(下划线)、或中文开头②变量名称只能由英文字母、数字、下画线或中文字所组成。③英文字...

更可靠的Rust-语法篇-区分语句/表达式，略览if/loop/while/for

src/main.rs://函数定义fnadd(a:i32,b:i32)->i32{a+b//末尾表达式}fnmain(){leta:i3...

C++第五课:变量的命名规则_c++中变量的命名规则

变量的命名不是想怎么起就怎么起的，而是有一套固定的规则的。具体规则：1.名字要合法：变量名必须是由字母、数字或下划线组成。例如：a，a1，a_1。2.开头不能是数字。例如：可以a1，但不能起1a。3....

Rust编程-核心篇-不安全编程_rust安全性

Unsafe的必要性Rust的所有权系统和类型系统为我们提供了强大的安全保障，但在某些情况下，我们需要突破这些限制来：与C代码交互实现底层系统编程优化性能关键代码实现某些编译器无法验证的安全操作Rus...

探秘 Python 内存管理:背后的神奇机制

在编程的世界里，内存管理就如同幕后的精密操控者，确保程序的高效运行。Python作为一种广泛使用的编程语言，其内存管理机制既巧妙又复杂，为开发者们提供了便利的同时，也展现了强大的底层控制能力。一、P...

一周热门
最近发表
标签列表