web前端开发---CSS基础选择器

简介: web前端开发---CSS基础选择器

为了让网页层次更加分明,样式更加美观,我们就需要引入CSS

1.CSS的语法规则

CSS包含选择器、属性、属性值三个部分。

选择器,用于指定要为哪个HTML元素定义样式。

属性,是指我们给HTML元素设置的样式名称。

属性值,用来控制某个属性的显示效果。

英文冒号:用于将属性与属性值分隔开。

英文分号;放到属性值后,作为结束标志,是固定格式。

属性和属性值的组合,可以看作一个声明。一条声明的格式为属性: 属性值;

选择器与大括号之间,冒号与属性值之间均添加一个空格。

注意!

以上的空格不是固定格式,为了代码清晰,我们统一添加

2.CSS的出现,使得网页的样式与内容分离开来。

HTML负责网页中有哪些内容,CSS负责以哪种样式来展现这些内容。

因此,CSS必须和HTML协同工作,那么如何在 HTML 中引用CSS呢?

CSS的引用方式有三种:内部样式表、外部样式表、行内样式。

内部样式表,是指将CSS放到 <style> 标签中,而<style>标签必须放在HTML的<head>标签内。                                          

外部样式表,是指将CSS样式代码复制到一个文本文件后,另存为 .css 文件。

然后,我们通过HTML的<link>标签将这个样式文件应用到HTML中。

3.CSS中,常见的基础选择器有三种。分别为:标签选择器、类选择器、id选择器

a.

顾名思义,标签选择器,是通过具体的标签名,找到页面所有同名的标签,来设置样式。

b.

类选择器,也叫class选择器。使用类选择器的前提是:标签中需要有class属性。

c.

类选择器像身份证的姓名,因为一个姓名可以被多个人使用,所以类选择器可以选择一类标签。

而标签的id属性的值,就像身份照号码,是唯一的。

也就是说,设置这种标签的样式时,就需要用到id选择器。

id选择器,井号# 开头,后面紧跟id属性的值。

相关文章
|
26天前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
22天前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
38 1
|
3月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
57 6
|
3月前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
53 5
|
3月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
61 4
|
4月前
|
人工智能 前端开发
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
105 0
2024 川渝 Web 前端开发技术交流会「互联」:等你来报名!
|
4月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
416 1
|
4月前
|
存储 前端开发 JavaScript
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
【10月更文挑战第4天】本文探讨了从 Web 2.0 到 Web 3.0 的前端开发演变过程。Web 2.0 时代,前端开发者从静态网页设计走向复杂交互,技术框架如 jQuery、React 和 Vue 带来了巨大的变革。而 Web 3.0 以区块链技术为核心,带来了去中心化的互联网体验,前端开发者面临与区块链交互、去中心化身份验证、分布式存储等新挑战。文章总结了 Web 2.0 和 Web 3.0 的核心区别,并为开发者提供了如何应对新技术的建议,帮助他们在新时代中掌握技能、设计更安全的用户体验。
102 0
从 Web 2.0 到 Web 3.0:前端开发的历史与未来
|
4月前
|
前端开发 JavaScript 开发者
Web组件:一种新的前端开发范式
【10月更文挑战第9天】Web组件:一种新的前端开发范式
114 2
|
4月前
|
JavaScript 前端开发 开发者
前端开发趋势:从Web Components到Vue.js
【10月更文挑战第9天】前端开发趋势:从Web Components到Vue.js

热门文章

最新文章