CSS前端总结

简介: 一、CSS基本介绍1、在web中标准中具体的要求是:结构.样式.行为三者相分离 2、2、CSS的作用是修饰当前网页中html元素

一、CSS基本介绍
1、在web中标准中具体的要求是:结构.样式.行为三者相分离 2、2、CSS的作用是修饰当前网页中html元素
二、存放于head 标签中 title 标签的下面是style 是一个双标签 里面用来写css代码的
三、Css使用的核心思想是:通过具体的css选择器找到某一个或者多个HTML元素后对其进行设置。
四、CSS体验使用<标签选择器>它的作用:就是选中我们想要设置样式的元素【可能是一个 也可能是多个】
五、在css中有很多的选择器。人为分为两大类(1:简单选择器 2:复合选择器)
六、简单选择器:【标签名选择器 类名选择器 id选择器】
七、.元素展示类型分类
1.元素展示类型分为三种【块元素,行内元素,行内块元素】
2.块元素【独占一行,宽高有效】

  1. 行内元素【一行显示,宽高无效】

4.行内块元素【一行显示,宽高有效】
5.标签:div 他是双标签,块元素,标签:span 他也是一个双标签,行内元素,
6.注意:段落标签中不能嵌套标题标签,浏览器解不能正常解析7.转成块元素display:block 转成行内块 display:inline-block
转成行内元素display:inline
8.简单选择器的权重最大到最小以次是:id 类名 标签名
9.(继承一般都发生在块元素身上)
八、.复合选择器:后代选择器和并列选择器
1.后代选择器

  1. 并列选择器

选择器权重 – 复合选择器
简单选择器: id > class > element【标签名】

CSS写法介绍
1.内嵌CSS
内嵌:把他放在head标签中(为了提高页面加载性能)
2、行内CSS(写在具体点的html标签上)【权重最高】

3、外链CSS:将CSS 代码写在外部独立的CSS文件中 < link href=”CSS文件路径” type=”text/css” rel = “stylesheet” />
4、< audio src=”音频文件地址【路径中不能有中文】”> < /audio>
例如:< audio src=”music/yinyue.mp3” autoplay controls loop > < /audio> 【autoplay:自动播放】、【controls:控制播放】、【loop:循环播放】
5、< video width =”200px” autoplay controls loop > </ video>
常见的文字样式:行高(line-height)、水平(text-align)、字体大小(font-size)、字体粗细(font-family)、字体颜色(color)。

相关文章
|
1天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
14 6
|
19天前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
25 4
|
1月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
186 1
|
2月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
41 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
2月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
30 2
前端基础(九)_CSS的三大特征
|
1月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
1月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
57 2
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
16 1
|
1月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
24 1
|
1月前
|
缓存 前端开发 JavaScript
【前端基础篇】CSS基础速通万字介绍(上篇)1
【前端基础篇】CSS基础速通万字介绍(上篇)
18 1
下一篇
无影云桌面