字节前端青训营-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天前
|
前端开发
【前端web入门第四天】02 CSS三大特性+背景图
本文详细介绍了CSS的三大特性:继承性、层叠性和优先级,并深入讲解了背景图的相关属性,包括背景属性、背景图的平铺方式、位置设定、缩放、固定以及复合属性。其中,继承性指子元素自动继承父元素的文字控制属性;层叠性指相同属性后定义覆盖前定义,不同属性可叠加;优先级涉及选择器权重,包括行内样式、ID选择器等。背景图部分则通过具体示例展示了如何设置背景图像的位置、大小及固定方式等。
239 91
|
9天前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
12 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
9天前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
13 2
前端基础(九)_CSS的三大特征
|
24天前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
51 28
|
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操作以及实现轮播图等技术细节。
|
22天前
|
SpringCloudAlibaba JavaScript 前端开发
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
分布式组件、nacos注册配置中心、openfegin远程调用、网关gateway、ES6脚本语言规范、vue、elementUI
谷粒商城笔记+踩坑(2)——分布式组件、前端基础,nacos+feign+gateway+ES6+vue脚手架
下一篇
无影云桌面