深入理解前端CSS：外部、内部与行内样式及选择器解析

需积分: 0 165 浏览量更新于2024-08-03 收藏 9KB MD 举报

"前端三件套CSS学习笔记分享，涵盖了CSS的引用方式、选择器以及字体样式的详细讲解。" 在前端开发中，CSS（层叠样式表）是用于描述HTML或XML（包括如SVG、MathML等各种XML方言）文档样式的样式语言，是构建网页界面美学的关键技术之一。这篇学习笔记主要讲解了CSS的三种引用方式、选择器的种类以及常见的字体样式设置。首先，CSS的引用方式分为外部样式表、内部样式表和行内样式表： 1. **外部样式表**：CSS代码存储在单独的`.css`文件中，通过`<link>`标签在HTML文件的`<head>`部分引用，如： ```html <link rel="stylesheet" type="text/css" href="文件路径"/> ``` 这种方式有利于代码的组织和复用，减少代码重复。 2. **内部样式表**：将CSS代码放在HTML文件的`<head>`部分的`<style>`标签内，适用于整个页面统一的样式设定： ```html <style type="text/css"> …… </style> ``` 3. **行内样式表**：直接在HTML元素的`style`属性中定义CSS，适用于特定元素的独特样式： ```html <元素 style="属性1:取值1; ……; 属性n:取值n;"> ``` 接下来，笔记详细介绍了CSS选择器，这是CSS中定位元素并应用样式的工具： 1. **元素选择器**：根据元素名称选取元素，如`p`选择所有的段落。 2. **ID选择器**：通过元素的`id`属性选取特定元素，如`#myId`选取id为`myId`的元素。 3. **类选择器**：利用元素的`class`属性选取一组元素，如`.myClass`选取所有class包含`myClass`的元素。 4. **后代选择器**：通过空格分隔，选取父元素内的子元素，如`div p`选取所有`div`元素内的`p`元素。 5. **群组选择器**：使用逗号分隔多个选择器，一次性定义多个元素的样式，如`h1, h2, h3`同时设置所有`h1`、`h2`和`h3`的样式。最后，笔记还提到了一些基本的字体样式属性： - **font-family**：定义字体类型，可以设置多个备选字体，如`font-family: "Arial", sans-serif;` - **font-size**：设置字体大小，可以使用像素等单位，如`font-size: 16px;` - **font-weight**：控制字体的粗细，取值范围从`100`到`900`，如`font-weight: bold;`（等于`700`） - **font-style**：设置字体样式，如`italic`表示斜体。这些基础知识构成了CSS的基础架构，掌握它们是成为合格前端开发者的关键步骤。通过深入理解和实践，可以更好地创建美观、响应式的网页设计。

Super易

粉丝: 75
资源: 5

深入理解前端CSS：外部、内部与行内样式及选择器解析

Web前端HTML5 CSS3初学者零基础入门全套学习笔记.zip

前端的学习笔记HTML+css.zip

HTML+CSS学习笔记.zip

web前端CSS学习笔记

html+css学习笔记 前端 CSS html

css课堂笔记前端css课堂笔记

css学习笔记

CSS学习笔记CSS学习笔记

前端入门：HTML+CSS 学习笔记 Day01

前端新手必备：HTML和CSS学习笔记

最新资源

html+css学习笔记前端 CSS html