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

相关文章
|
2天前
|
缓存 前端开发 JavaScript
使用Web前端性能优化提高网站加载效率
前端性能优化关键在于提高用户体验和降低资源消耗,Webpack是重要工具。基础优化策略包括减少HTTP请求、资源压缩与缓存、异步加载。Webpack优化配置涉及Tree Shaking、代码分割。高级策略涵盖Long-term Caching、缓存提升和插件优化。打包部署时,自动化流程和环境管理也至关重要。通过这些方法,可提升Web应用速度和体验。
53 0
|
2天前
|
前端开发 JavaScript Java
web 技术中前端和后端交互过程
客户端:上网过程中,负责浏览资源的电脑,叫客户端
13 0
|
3天前
|
前端开发
web前端作业3
web前端作业3
9 1
|
3天前
|
前端开发 安全 数据安全/隐私保护
web前端第二天
web前端第二天
7 1
|
3天前
|
前端开发
web前端的作业1
web前端的作业1
7 1
|
3天前
|
前端开发 JavaScript 搜索推荐
WEB前端第一天
WEB前端第一天
10 1
|
6天前
|
数据安全/隐私保护
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
那些酷炫的网页你也可以做到——第六篇,小型公司web开发
|
7天前
|
存储 安全 前端开发
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
第五章 跨域资源共享(CORS):现代Web开发中的关键机制
|
1天前
|
缓存 应用服务中间件 数据库
Python Web Service开发及优化
随着互联网的快速发展,Web服务已成为现代技术的核心。Python作为一种功能强大且易于学习的编程语言,在Web服务开发领域占据着重要地位。Python Web服务开发的重要性在于它能够提供高效、可扩展且易于维护的解决方案。本篇博客将探讨如何使用Python的Flask框架、Gunicorn WSGI服务器和Nginx网页服务器来实现高性能的Web服务。
|
4天前
|
存储 人工智能 前端开发
从前端到后端,探索Web开发的奥秘
Web开发是当今最热门的技术领域之一,涉及前端、后端、数据库等多个方面。本文将介绍Web开发的基本架构和技术要点,并深入探讨前后端交互、安全性等问题,帮助读者更好地理解Web开发的奥秘。