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



相关文章
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
891 108
|
JavaScript 前端开发 Java
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
895 72
前端框架选择之争:jQuery与Vue在现代Web开发中的真实地位-优雅草卓伊凡
|
移动开发 前端开发 JavaScript
前端web创建命令
本项目使用 Vite 搭建 Vue + TypeScript 开发环境,并基于 HTML5 Boilerplate 提供基础模板,快速启动现代前端开发。
279 2
|
Web App开发 编解码 移动开发
零基础音视频入门:你所不知道的Web前端音视频知识
本文回顾了Web端音视频的发展历程,同时还介绍了视频的编码、帧率、比特率等概念,提到了Canvas作为视频播放的替代方案,以及FFmpeg在音视频处理中的重要作用等知识。
416 1
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1295 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
前端开发
web前端开发---CSS基础选择器
web前端开发---CSS基础选择器
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
985 1
|
前端开发 JavaScript 开发者
前端的CSS选择器
前端的CSS选择器
210 1
|
前端开发
前端 CSS 经典:好用的 CSS 选择器
前端 CSS 经典:好用的 CSS 选择器
228 0
|
前端开发
前端 css 经典:选择器速记
前端 css 经典:选择器速记
189 0

热门文章

最新文章

  • 1
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    612
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    469
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    467
  • 4
    (CSS)使用Flex布局,帮助你快速了解各种基本的Flex布局属性以及帮你让元素快速达到布局中的指定位置!
    306
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    586
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    765
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1503
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    346
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    1211
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    562