CSS入门：详解选择器及其用法

需积分: 14 115 浏览量更新于2024-09-09 收藏 14KB MD 举报

"CSS笔记-选择器" 在网页设计中，CSS（Cascading Style Sheets）是一种至关重要的技术，用于控制HTML或XML文档的呈现样式。它允许开发者将内容与表现分离，使得页面的布局和视觉效果更加灵活和可维护。CSS的概念源于HTML的发展需求，以解决内容与样式混杂的问题，提升网页的设计水平。 1. **CSS的基础知识** - **1.1.1 CSS概念**：CSS全称“层叠样式表”，它用来定义HTML元素的外观和布局。通过CSS，我们可以改变标签的字体、颜色、大小、布局等多种样式属性。 - **1.1.2 CSS的作用**：主要负责网页的外观表现，与HTML（内容和结构）和JavaScript（行为）相辅相成，形成网页的三大核心技术。 - **1.1.3 CSS书写位置**：CSS可以内嵌在HTML文档中（内嵌式），链接外部CSS文件（外链式），或者直接在HTML标签内定义（行内式）。 - **1.1.4 CSS语法**：基本语法是选择器 + {属性: 值; 属性: 值}，例如：`div {color: green; font-size: 25px;}`。 2. **1.2 选择器** - **1.2.1 标签选择器**：通过HTML标签名称来选择元素，如`div`、`p`等。常用属性包括`color`（文字颜色）、`background-color`（背景颜色）、`font-size`（文字大小）、`width`和`height`（设置尺寸）、`text-align`（内容对齐）以及`text-indent`（首行缩进）。下面是一些实例应用： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> div { color: green; font-size: 25px; background-color: #f0f0f0; width: 200px; height: 100px; text-align: center; text-indent: 2em; } </style> </head> <body> <div>这是一个使用CSS样式定义的div元素</div> </body> </html> ``` 在这个例子中，我们为`div`元素定义了颜色、字体大小、背景颜色、宽度、高度、内容居中和首行缩进的样式。通过这种方式，我们可以精确地控制HTML元素在页面上的显示效果。理解并熟练掌握CSS选择器是进行网页设计和前端开发的关键技能。不同的选择器类型，如类选择器、ID选择器、属性选择器、伪类和伪元素等，提供了更精细的元素定位和样式设置。随着CSS3的引入，还出现了更多高级选择器和功能，如子选择器、相邻兄弟选择器、变量、过渡效果、动画等，极大地扩展了CSS的能力。学习和熟悉这些内容将有助于创建更美观、响应式的现代网页。

清风丶Spirit_Breeze

粉丝: 47
资源: 4

CSS入门：详解选择器及其用法

CSS3手写笔记.md

CSS笔记-011

谷歌师兄的leetcode刷题笔记-cssi-1-html-lab-student-walkthrough:CSSi-1-html-lab-s

CSS笔记 - 培训那会记录的（详解）

CSS--------------笔记

day04（CSS02-选择器进阶+背景相关属性+元素显示模式+三大特性）.rar

CSS学习笔记-适合初学者

韩顺平html+css+javascript-----div+css笔记

CSS样式-JavaScript笔记.pdf

css选择器303-311-Artificial-Intelligence-笔记

最新资源