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

相关文章
|
8天前
|
前端开发
CSS:高级选择器
CSS:高级选择器
20 1
|
8天前
|
前端开发 JavaScript
CSS:基础选择器
CSS:基础选择器
20 1
|
9天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
12 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
9天前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
13 2
前端基础(九)_CSS的三大特征
|
8天前
|
前端开发 JavaScript 容器
谁动了我的选择器?深入理解CSS选择器优先级
该文章详细解释了CSS选择器的工作原理,包括不同种类选择器的权重计算规则,并通过实例说明了如何解决样式冲突问题,确保所需的样式能够正确应用到目标元素上。
|
10天前
|
编解码 前端开发
前端基础(六)_CSS单位
本文介绍了CSS中常用的单位,包括像素(px)、相对长度单位(em、rem)、百分比(%)、视窗宽度(vw)和视窗高度(vh)。文章通过示例代码展示了这些单位在实际布局中的应用,解释了它们各自的特点和使用场景。例如,em和rem单位与字体大小相关,百分比单位与父元素的尺寸相关,而vw和vh单位则与浏览器视窗的宽度和高度相关。
10 1
|
9天前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
36 1
|
23天前
|
前端开发
|
23天前
|
前端开发
【前端web入门第六天】01 CSS浮动
这是关于CSS布局第六天学习目标的介绍,主要解决多个`&lt;div&gt;`标签在同一行显示的问题,即一个在左边,另一个在右边。文中介绍了标准流、浮动及flex布局的概念,重点推荐使用flex布局。文章详细讲解了浮动的基本使用、布局技巧及清除浮动的方法,包括额外标签法、单伪元素法、双伪元素法和`overflow`隐藏法,并提供了示例代码帮助理解。
|
9天前
|
JavaScript 前端开发
网页前端课程设计-【模仿】香港中文大学官网,轮播图及div+css布局,js的dom操作
这篇文章介绍了如何模仿香港中文大学官网进行网页前端课程设计,包括使用div+css布局、js的DOM操作以及实现轮播图等技术细节。
下一篇
无影云桌面