CSS基础入门：样式编写与常用选择器讲解

需积分: 44 114 浏览量更新于2024-08-17 收藏 3.43MB PPT 举报

本文档是一份关于CSS基础编写的教程，主要介绍了如何在HTML中应用CSS样式来控制网页元素的外观。CSS全称为层叠样式表(Cascading Style Sheets)，是一种用于描述HTML或XML（包括如SVG、MathML等）文档呈现的样式语言。下面我们将详细解析几个关键知识点： 1. 内嵌样式：内嵌样式是通过在`<head>`标签中使用`<style>`标签来定义CSS规则的。例如，`<head><style>p {color:red;}</style></head>`这一部分展示了如何将段落文本颜色设置为红色。这种方式的优点在于可以直接在需要应用样式的元素附近编写样式，但不便于管理和复用。 2. CSS选择器： - 子代选择器：`div > p{color:red;}`表示只选择`div`元素内的`p`元素，并对其设置颜色属性。这是一种基于上下级关系的选择器，非常直观。 - 属性选择器：`p[class="your-class"][id="your-id"]{color:red;}`允许你根据元素的类名(class)和ID(id)来指定样式。这对于具有特定类或ID的元素进行个性化样式设置非常有用。 3. 样式命名与字体：文档提到了一些常用的中文字体及其对应的英文名称和Unicode编码，比如宋体(SimSun)、新宋体(NSimSun)、黑体(SimHei)等。了解并正确应用这些字体可以确保在不同浏览器上保持一致的显示效果。 4. 布局控制：页面布局涉及到一些常见的元素和概念，如header、content/container、footer、nav(导航)、sidebar(侧边栏)、column(栏目)等，它们在CSS中可以通过定位(positioning)、浮动(float)、Flexbox或Grid等技术进行布局管理。 5. 其他常见元素： wrapper(页面外围)用于控制整体布局宽度，leftrightcenter可能指水平居中布局，loginbar(登录条)用于用户登录信息展示，logo(标志)代表网站标识，banner(广告)用于放置视觉焦点，main(页面主体)是主要内容区域，hot(热点)可能是热门内容区块，而新闻(news)则是具体的文章分类。这篇CSS教程不仅介绍了基础语法，还涉及了选择器的高级用法以及常见的网页布局元素。学习者可以按照这些知识点逐步掌握CSS，从而实现更精细的网页设计和布局控制。

小婉青青

粉丝: 26
资源: 2万+

CSS基础入门：样式编写与常用选择器讲解

前端开源库-css-sprite-loader

CSS经典练习-css-diner-develop.7z

前端开源库-postcss-px2rem

HTML---CSS----基础知识及代码----各种小程序网页设计

CSS-from-scratch:CSS-初学者-6章-源代码-css source code

css-advanced-challenge-DioAinto：css-advanced-challenge-DioAinto由GitHub Classroom创建

css-flexbox-pankajsindagi:GitHub Classroom创建的css-flexbox-pankajsindagi

css-flexbox-utkarsha316:GitHub Classroom创建的css-flexbox-utkarsha316

intro-to-css-rachhely：由GitHub Classroom创建的intro-to-css-rachhely

css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜

最新资源

css基础教程--CSS快速入门、怎样编写CSS、CSS属性、CSS定位、CSS滤镜　