字节前端青训营-css简介

简介: 字节前端青训营-css简介

css定义


Cascading Style Shee 用来定义页面元素的样式

设置字体和颜色

设置位置和大小


Css基本式样包括:


选择器selector,选择器property,属性值value,声明declaration


页面中使用css的三种方法:


  1. 外链:

<link rel = “stylesheet” href=”地址”>

  1. 嵌入

<style>

 Li {margin: 0; list-styles:none;}

 P{margin:lem 0;}

</style>

  1. 内联

<p style=”margin:lem 0”>Example Content</p>


选择器selector


找出页面中的元素,以便给他们设置样式

找出多种方法选择元素:

按照标签名,类名或者id

按照属性

按照dom树中的位置

种类:

通配选择器:*

标签选择器

Id选择器:#“id”

类选择器:.”类名”

属性选择器


伪类


不基于标签和属性定位元素

几种伪类

状态伪类:处于特定的状态才会被选中,如:链接

颜色设置--RGB 相关函数:1.rgb(x,y,z)

--HSL 相关函数:hsl(x,y%,z%)

--alpha透明度调节


字体设置


font-family:”字体名字”,”字体名字”,,,,,”字体名字”

使用建议:

字体列表最后写上通用字体族

英文字体放在中文字体前面

font-size:

关键字:small,mediu,large

长度:px,em

百分数:相对于父元素字体大小

font-weight:字体粗细数值

Line-height:设置每行文字的间距

上面的属性可以写在一个font当中,格式是:

font:style(样式) weight(粗细) size(大小)/height(行高) family(字体族)

text-aligin文本对齐:left,center,right,justify

letter-space文本间距:字母之间的间距,word-space单词之间的间距

Text-indent缩进

text-decoration 文本修饰

white-space:

normal:在默认情况下,多个连续空白符会被合并为一个空百符,

nowrap:段落内的文字只在一行中展示

pre:保留字节写的所有内容

pre-wrap:一行内显示不下则换行

pre-line:合并空格

目录
相关文章
|
21天前
|
前端开发 容器
简介CSS
简介CSS
22 4
|
2天前
|
前端开发 JavaScript 开发者
CSS进阶 - CSS Modules与预处理器简介
【6月更文挑战第17天】前端开发中,CSS Modules和预处理器(如Sass、Less)解决了大规模项目中CSS的管理难题,提升代码复用和维护性。CSS Modules提供局部作用域的类名,避免全局冲突,而预处理器扩展CSS功能,使代码更像编程语言。常见问题包括命名冲突和过度嵌套,可通过自动哈希、少嵌套、合理变量规划来解决。结合两者使用,遵循模块化和适度预处理原则,集成到构建工具中,能优化开发流程。这些技术是现代前端不可或缺的工具。
|
4天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
5天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
18 2
|
12天前
|
Web App开发 移动开发 前端开发
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 二
20 1
|
12天前
|
移动开发 前端开发 HTML5
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器一
Web网页制作-知识点(3)——HTML5新增标签、CSS简介、CSS的引入方式、选择器、字体属性、背景属性、表格属性、关系选择器 一
26 1
|
13天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
25天前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
16 0
|
15天前
|
JSON 前端开发 JavaScript
前端Ajax、Axios和Fetch的用法和区别笔记
前端Ajax、Axios和Fetch的用法和区别笔记
22 2
|
1月前
|
移动开发 前端开发 JavaScript
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战
10款精美的web前端源码的特效,2024年最新面试题+笔记+项目实战

热门文章

最新文章