Web前端学习:CSS基础【简介、基础语法、选择器、样式形式】

简介: Web前端学习:CSS基础【简介、基础语法、选择器、样式形式】

一、CSS简介


CSS 指层叠样式表 (Cascading Style Sheets)


让网页元素的样式更加丰富


使用 CSS 我们可以大大提升网页开发的工作效率


使用 CSS 同时控制多重网页的样式和布局 有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁。



二、CSS的基础语法


0a10c36ac1384f2c908717f5abe5b560.png


1、代码演示

  • 在python编辑器中先创建一个HTLML文档

c4c04f8c4ec1464f88912b03ba6d02af.png



  • 然后在<body>标签内写入一个文本内容,字体大小为<h1>

c444d1493b3a49c79fadf7d10c91f883.png



  • 接着在<head></head>标签中创建一个<style>标签,在<style>中写入css语句,这个css语句是要修改<h1>标签内的文本样式


注意:声明标签样式都是写在style里面的,style标签通常是在title标签下


2e0cb04bb023498a8dce5b38b89e1a79.png


  • 写入css样式未写入css样式的的运行结果对比

743d2de2a24a45bab35a6b5f2bc08567.png


2、css注释


注释语法: /*注释内容*/


e54ccca9a1a442e383ab374f8de9dfe3.png


三、CSS选择器




css选择器一共有五种,分别是:

  • id选择器
  • class选择器
  • 标签选择器
  • 层级选择器
  • 伪类选择器


下面将对这五类选择器的使用进行演示和说明



1、id选择器


id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。


HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义。

代码演示 :


b3ecbc370514444d9b480ea248a72b25.png

运行结果


f3fe44fbf17b42b3a309158ac7e0d326.png



2、class选择器


class 选择器用于描述一组元素的样式,class 选择器有别于id选择器,class可以在多个元素中使用。


class 选择器在HTML中以class属性表示, 在 CSS 中,类选择器以一个点"."号显示:

代码演示:


c79f7b9527934ca8887d9fbb69d00045.png


运行结果

247b37e9e6e049d992332edc9e061544.png


3、标签选择器


一个完整的HTML页面是由很多不同的标签组成,而[标签选择器],则是决定哪些标签采用相应的CSS样式 。

代码演示 :

272abf447022479d913da6f0b56a8a97.png


运行结果

530ffd819df54d17a0450a23cd2652bd.png



相关文章
|
1月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
43 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
2月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
81 1
|
2月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
4月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
100 5
|
4月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
73 6
|
4月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
95 4
|
4月前
|
前端开发 JavaScript UED
深入理解与应用 CSS 伪类选择器
【10月更文挑战第23天】通过以上对 CSS 伪类选择器的深入探讨,我们可以更好地理解和应用它们,为网页设计和开发带来更丰富、更灵活的样式效果。同时,要注意在实际应用中根据具体情况合理选择和使用伪类选择器,以达到最佳的设计效果和用户体验。
96 2
|
5月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
525 1
|
5月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
34 0
|
5月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
123 2

热门文章

最新文章