字节前端青训营-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:合并空格

目录
相关文章
|
24天前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
32 6
|
1月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
28 4
|
2月前
|
前端开发 JavaScript 开发者
qiankun(乾坤)微前端框架简介
qiankun(乾坤)微前端框架简介
227 1
|
2月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
241 1
|
2月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
2月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
74 2
|
2月前
|
前端开发 JavaScript 容器
前端之CSS基础知识
前端之CSS基础知识
18 0
|
2月前
|
前端开发 容器
【前端基础篇】CSS基础速通万字介绍(下篇)3
【前端基础篇】CSS基础速通万字介绍(下篇)
18 0
|
24天前
|
前端开发 测试技术 定位技术
如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤
本文深入介绍了如何利用HTML和CSS构建企业级网站的全过程。从项目概述到页面结构设计,再到HTML结构搭建与CSS样式设计,最后实现具体页面并进行优化提升,全面覆盖了网站开发的关键步骤。通过实例展示了主页、关于我们、产品展示、新闻动态及联系我们等页面的设计与实现,强调了合理布局、美观设计及用户体验的重要性。旨在为企业打造一个既专业又具吸引力的线上平台。
49 7
下一篇
DataWorks