web前端开发-----CSS样式设置

简介: web前端开发-----CSS样式设置

一.CSS中用16进制码表示颜色。

CSS中,除了使用RGB定量地表示颜色,还有一种常见的表达方法--十六进制码。

十六进制码,是以#开头的6位十六进制数表示颜色的方式。其语法规则为:#FF0000

这个6位数可以分为三组,依次对应red、green、blue三种颜色的强度。

每组两位数,最低值为00,最高值为FF。

比如#FF0000的FF表示red的强度,00表示green的强度,后一组00表示blue的强度。

使用十六进制码表示颜色时,如果每组的两个十六进制数是相同的。

例如 #FF0000、#FFFFFF、#AABBCC,则可以将它们简写#F00、#FFF、#ABC。

除了字体颜色外,在制作网页时我们往往会在网页中添加一些背景颜色让网页更加美观,吸引访问者的眼球。

我们设置字体颜色时,使用color属性。

而设置背景颜色,则使用background-color属性,属性值同样可以使用颜色名称、RGB和十六进制码。

二.CSS设置字体样式。

font-family 属性,用于设置字体类型。

font-style属性,用于设置字体风格。

font-weight属性,用于设置字体粗细。

font-size属性,用于设置字体的大小。

牢记,字体大小和字体类型是必须设置的,并且字体类型放在最后。

这里一定需要注意,不同的属性值之间使用空格间隔。

text-align 属性,用于设置文本的水平对齐方式。

text-indent属性,用于指定文本的首行缩进,通常是将段落元素p的首行缩进。

text-decoration属性,用于为文本添加修饰。

line-height属性,用于设置文本的行高。

设置属性text-decoration: none;,清除了链接默认的下划线。

其实,行高还可以是单独的数字,数字表示字体大小的倍数。

比如p元素的字体大小为16px,则设置line-height: 3,表示行高为字体大小的3倍,为48px。

相关文章
|
22天前
|
前端开发
如何设置 CSS 盒子模型的边框样式?
CSS盒子模型的边框样式可以通过`border`属性设置,包括边框宽度、样式和颜色。例如:`border: 2px solid red;` 设置了2像素宽的红色实线边框。也可分别设置四边,如`border-top`、`border-right`等。
|
11天前
|
前端开发 JavaScript UED
|
28天前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
132 1
|
1月前
|
存储 前端开发 安全
详解CSS之Web 字体
详解CSS之Web 字体
22 4
|
1月前
|
编解码 前端开发 JavaScript
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
使用 CSS 打印样式为 Web 页面设置专业的打印机效果
46 2
|
16天前
|
前端开发
HTML 样式- CSS3
内部样式表适用于单个文件的特别样式,通过<head>部分的<style>标签定义;外部样式表适用于多个页面,通过<link>标签引用外部CSS文件;<style>定义样式,<link>引用资源;已弃用的标签有<font>、<center>、<strike>,属性有color和bgcolor。
|
16天前
HTML 样式- CSS2
HTML样式实例展示了如何使用`font-family`、`color`和`font-size`属性来定义字体样式,以及使用`text-align`属性来设置文本的对齐方式。示例包括标题和段落的样式设置。
|
16天前
|
前端开发
HTML 样式- CSS1
CSS (层叠样式表) 用于为 HTML 元素添加样式,包括颜色、文本、盒子模型等。CSS 可以通过内联样式、内部样式表或外部引用的方式添加到 HTML 中。推荐使用外部引用方式。本教程将介绍如何使用 CSS 为 HTML 添加样式,并提供实例演示。
|
29天前
|
存储 前端开发 JavaScript
CSS:现代Web设计的不同技术
【10月更文挑战第11天】 CSS:现代Web设计的不同技术
|
28天前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
118 2