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。

相关文章
|
6月前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
4月前
|
前端开发 JavaScript API
给Web开发者的HarmonyOS指南01-文本样式
本系列教程适合 HarmonyOS 初学者,为那些熟悉用 HTML 与 CSS 语法的 Web 前端开发者准备的。
153 5
给Web开发者的HarmonyOS指南01-文本样式
|
3月前
|
前端开发
|
3月前
|
前端开发
|
3月前
|
前端开发 JavaScript
|
3月前
|
XML 前端开发 JavaScript
|
3月前
|
前端开发 容器
|
5月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
141 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
6月前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
137 1
|
8月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
147 6