CSS三剑客

初学css总结

前端三剑客CSS的使用方法和相关介绍

上一篇文章，我们介绍了HTML语言的基础用法后，今天我们继续学习CSS的基础语法。 CSS，又称为层叠样式表(Cascading Style Sheets)。CSS能够对网页中元素位置的排版进行像素级精准控制，实现美化页面的效果，能够做到页面的样式和结构分离。 文章目录一、基本语法规范二、选择器1、基础选择器2、复合选择器三、常用属性1、字体属性设置字体字体大小字体粗细文字样式（倾斜字）2、文本属性文本颜色文本对齐文本装饰(下划线、上划线、删除线)文本缩进行高3、背景属性背景颜色背景图片背景平铺背景位置背景

CSS是Cascading Style Sheet的缩写，中文译作‘层叠样式表’或者是“级联样式表”，是用于控制网页外观处理并允许网页的表现与内容分离的一种标记性语言，css不需要编译，可以直接由浏览器执行（属于浏览器解释型语言），是Web网页开发技术的重要组成部分； CSS的好处： 使用CSS样式可以有效地对页面进行布局，更加灵活多样 使用CSS样式可以对页面自提，颜色，北京和其他效果实现精准控制，同时对它们的修改和控制变得更加便捷，更加强大 站点中所有的网页风格都是用一个CSS文件进行同一控制，

css具有三种引用方式：内部样式、外部样式、内联样式。 优先级：内联样式>内部样式=外部样式 内部样式、外部样式优先级相同，用谁取决于谁在后面。（后面覆盖前面）1.内部样式 内部样式表是把 CSS 代码写在 HTML 文件的 style 标签内，只在当前页面有效，外部无法使用。 2.内联样式 内联样式是直接将css样式写在标签元素的style属性中。 3.外部样式 外部样式表是把 CSS 代码存放在独立的 .css 文件中，然后在 HTML 文件里通过link标签引入。这样样式和结构相分离方便维护，并且多个

HTML是网页的骨架，CSS给网页穿上衣服，变得美观，JavaScript则让网页有行为，能够动起来（交互）。先让三剑客联动起来，才是最关键的！

今天我们来说说CSS。CSS（Cascading Style Sheets，层叠样式表）是Web前端开发的三大核心技术之一，与HTML（结构）和JavaScript（行为）共同构成“三剑客”。它负责控制网页的视觉呈现，包括布局、颜色、字体和动画等，使网页从简单的文档变为美观、交互性强的用户界面。以下我将逐步介绍CSS的核心概念、工作原理和实际应用，确保内容清晰易懂。CSS作为前端开发的基石，能极大提升用户体验和开发效率。以下是一个简单的CSS代码示例，展示如何为HTML页面添加基础样式。

先来说一下这三种分别是什么吧。HTML是用来描述网页的一种语言，可以在web页面上使用的。HTML可以让你创建文本，添加图片，创建连接等等在浏览器中以页面的形式显示出来。而CSS是另一种标记语言，主要用在设置HTML页面中文本的内容（如字体，大小对齐方式等），图片的样式以及版面的布局和外观等等。最后JavaScript是一种脚本语言，与Java完全截然不同，它允许网页具有动态交互的功能，例如处理用户的输入，操作DOM，与服务器向通信等等。HTML相当于来构建网页的框架结构，而CSS是用来美化网页的样式，JS

首先简单说明三个语言的作用HTML进行网页的结构搭建，例如文本，链接，图片视频等CSS进行网页的美化，例如字体颜色，按钮图形等Javascript简称JS进行网页的交互，例如点击按钮后的跳转设置等。

目录一、概念二、基本语法规范三、引入方式1、内部样式表2、行内样式表3、外部样式四、选择器1、基础选择器2、复合选择器五、常用元素属性1、字体属性2、文本属性3、背景属性4、圆角矩形六、chrome调试工具-查看css属性1、打开方式2、各标签页含义3、elements标签页使用七、元素的显示模式1、块级元素2、行内元素（内联元素）3、区别4、改变显示模式八、盒模型1、边框2、内边距3、外边距4、去除浏览器默认样式九、弹性布局 一、概念 CSS(Cascading Style Sheets)层叠样式表，CS

许多同学误认为页面上的特效都是js实现的，其实不然。css给我们提供了一个极其强大的属性transition。此属性属于css3的属性。它的值可以是一个时间，即过渡的时间。相当于js中setTimeout，setInterval等写出的效果，接下来解释另外两个“剑客”，伪类选择器和position。 伪类选择器“元素:hover”类似于js中的鼠标事件mouseover。但是它多了一个特性就是移出...

前端三剑客之CSS

关于对web部分基础知识的总结

网页设计一般用到三大技术 html ,css ,javascript； HTML： 相当于一个文档，里面是要给用户的信息。使用他提供的一些标签，来把你想传递给用户的信息进行合理编排，使信息更好的传递给用户。 CSS: 相当于把这个文档进行修饰，美化实现更好的交互性，是用户接收信息更加舒服，自然，修饰最好的是接近简洁，自然。JAVASCRIPT: 相当于更好的实现和用户的交互，是信息传递实现双向

今日内容： 1. HTML标签：表单标签 2. CSS： HTML标签：表单标签 * 表单： * 概念：用于采集用户输入的数据的。用于和服务器进行交互。 * form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 * 属性： * action：指定提交数据的URL * method:指定提...

作用特点标签选择器能选出所有相同标签不能差异化选择类选择器能选出一个或多个标签根据需求选择，最灵活，最常用id 选择器能选出一个标签同一个 id 在一个 HTML 中只能出现一次通配符选择器选择所有标签特殊情况下使用。

本文系统讲解 CSS 列表样式：涵盖无序、有序、定义三种列表，详解 list-style-type、list-style-image、list-style-position三属性及 list-style简写。实战中最常用 list-style: none去除默认项目符号，配合 ::before或背景图实现自定义标记，是现代前端必会技能。

承接上一篇CSS基础核心知识点，本篇继续深挖CSS进阶高频考点，涵盖布局适配、样式初始化、文本溢出、文档流、盒模型、属性继承、宽度适配等重难点内容。这些知识点是解决页面布局错乱、适配bug、样式兼容问题的核心，也是期末考试、前端入门面试的高频考题。全文搭配原理解析、区别对比、实战代码、踩坑总结，细节拉满，轻松拿下高分。在网页开发中，底部导航、版权信息、悬浮按钮等模块，需要永久固定在页面底部，不受页面滚动影响，最优解决方案为fixed固定定位组合样式。八、元素固定在网页底部的实现方案。

CSS学习第七篇