CSS基础:掌握核心选择器与属性用法

需积分: 44 1 下载量 86 浏览量 更新于2024-08-17 收藏 3.43MB PPT 举报
CSS(Cascading Style Sheets)是一种用于描述网页或应用程序外观和布局的语言,它与HTML(HyperText Markup Language)共同构建网页的视觉表现。本文主要介绍了CSS的基础语法结构,以便初学者更好地理解和应用。 在CSS语法中,核心的结构是选择器和声明。选择器是决定要应用样式的HTML元素或元素组,它们可以按照多种方式来指定,包括: 1. **元素选择器**:通过元素名称直接选取,如`header`、`content`、`footer`等。这些是最基本的选择器,表示任何该类型的HTML元素。 2. **类选择器**:使用`.`符号后跟类名,如`.sidebar`,可以为所有拥有该类别的元素设置样式。 3. **ID选择器**:使用`#`符号后跟唯一标识符,如`#logo`,针对特定的唯一元素进行样式定义。 4. **伪类选择器**:例如`:hover`,当用户鼠标悬停在元素上时应用样式;`:active`,元素被激活时应用样式。 5. **子代选择器**:使用`>`符号,如`div > p`,仅选中元素直接子元素,不会作用于后代。示例中的`div>p{color:red}`表示将颜色设为红色的规则仅应用到div元素内部的所有直接子级p元素。 6. **属性选择器**:允许根据元素的属性值来选择,如`p[class="hot"]`,选择class属性值为"hot"的p元素;`p[id]`,选择具有id属性的p元素。 7. **组合选择器**:可以结合以上选择器,如`div .sidebar`表示div元素内的所有sidebar类元素。 页面布局控制方面,CSS提供了`wrapper`、`leftrightcenter`等伪类来管理页面的整体宽度和对齐。对于文本样式,提到了常用的中文字体,如宋体、黑体和微软雅黑,以及它们对应的Unicode编码。此外,还列举了一些常见的网页元素,如`nav`(导航)、`loginbar`(登录条)和`banner`(广告)等,它们都有各自的用途和可能的样式设置。 CSS语法的灵活性和强大性使得网页设计者能够精细地控制元素的外观和行为,无论是基本样式还是复杂的交互效果,都是基于这些基础规则实现的。理解并掌握CSS语法是前端开发人员必须具备的基本技能之一。