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属性的值。

相关文章
|
1天前
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
16 5
|
1天前
|
前端开发 JavaScript Go
构建高性能Web应用:优化前端资源加载
在构建现代Web应用时,优化前端资源加载是至关重要的一步。本文将介绍一些提升Web应用性能的关键策略,包括减少HTTP请求、压缩和合并资源、使用CDN加速、以及异步加载技术等。通过实施这些优化策略,开发人员可以显著提升网站的加载速度和用户体验。
|
1天前
|
前端开发 JavaScript UED
Web前端开发:探索技术与艺术的交融
Web前端开发:探索技术与艺术的交融
8 1
|
2天前
|
前端开发 JavaScript Java
前端与后端:构建现代Web应用的双翼
前端与后端:构建现代Web应用的双翼
|
11天前
|
移动开发 前端开发 JavaScript
CSS选择器 前端开发入门笔记(十)
CSS选择器 前端开发入门笔记(十)
19 1
|
11天前
|
前端开发 搜索推荐 数据安全/隐私保护
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
HTML标签详解 HTML5+CSS3+移动web 前端开发入门笔记(四)
18 1
|
23天前
|
监控 JavaScript 前端开发
《理解 WebSocket:Java Web 开发的实时通信技术》
【4月更文挑战第4天】WebSocket是Java Web实时通信的关键技术,提供双向持久连接,实现低延迟、高效率的实时交互。适用于聊天应用、在线游戏、数据监控和即时通知。开发涉及服务器端实现、客户端连接及数据协议定义,注意安全、错误处理、性能和兼容性。随着实时应用需求增加,WebSocket在Java Web开发中的地位将更加重要。
|
1月前
|
Web App开发 前端开发 开发工具
介绍Web开发的基础知识
介绍Web开发的基础知识
29 7
|
3天前
|
设计模式 存储 前端开发
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式