【零基础入门前端系列】—基础选择器和字体属性(十)

简介: 【零基础入门前端系列】—基础选择器和字体属性(十)

一、全局选择器

二、元素选择器

三、类选择器

四、ID选择器

五、选择器的优先级

行内样式(1000)>ID选择器(100)>类选择器(10)>元素选择器(1)>全局选择器

六、字体属性

font-size

  • 浏览器默认字体大小为16px
  • 浏览器支持的最小字体为12px
  • px绝对单位
  • em相对单位 默认字体为16px 1em=16px 2em=32px

七、颜色的取值(四种方式)

  • 关键字:redblue
  • 十六进制:包含0-9,a-f,#ffffff 简写#fff,#000000 简写#000
  • rgb(0,0,0):黑色 三原色 取值0-255
  • rgba(0,0,0,.5) :a透明度取值0-10:完全透明 1不透明 0.5简写.5

八、文本属性

文本属性是指定元素文本的水平对齐方式

九、列表属性


相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
3月前
|
前端开发
前端引入字体文件
文章介绍了如何在前端项目中引入字体文件,并展示了具体的HTML和CSS代码示例,包括如何使用`@font-face`规则来定义字体和在页面中应用自定义字体。
85 1
前端引入字体文件
|
4月前
|
前端开发 搜索推荐 开发者
揭秘Web前端的隐形英雄:神奇的title与alt属性,你真的了解吗?
【8月更文挑战第26天】在Web开发中,`title`和`alt`属性对于提升网站的可访问性和搜索引擎优化至关重要。`title`属性可在鼠标悬停时显示额外信息,增强用户体验;`alt`属性主要用于图像,提供替代文本以确保视觉障碍用户及搜索引擎能理解图像内容。正确使用这两个属性可以显著提高网站的友好性和可达性。
119 0
|
3月前
|
前端开发
【前端web入门第四天】01 复合选择器与伪类选择器
本文档详细介绍了CSS中的复合选择器与伪类选择器。复合选择器包括后代选择器、子代选择器、并集选择器和交集选择器,能够更精确地定位和样式化元素。后代选择器用于选中某元素的所有后代,子代选择器仅选中直接子元素。并集选择器可为多个标签设置相同样式,而交集选择器则选中同时满足多个条件的元素。此外,还介绍了伪类选择器,如鼠标悬停效果和超链接的不同状态。
73 32
【前端web入门第四天】01 复合选择器与伪类选择器
|
3月前
|
前端开发
前端基础(五)_CSS文本文字属性、背景颜色属性
本文详细介绍了CSS中关于文本和背景颜色的样式属性。包括字体大小、字体族、字体加粗、字体样式、文本行高、`font`属性、文本颜色、文本对齐方式、文本装饰线、首行缩进等文本属性,以及背景颜色、背景图片、背景重复、背景位置等背景属性。文章通过示例代码展示了这些属性的具体应用和效果。
73 3
前端基础(五)_CSS文本文字属性、背景颜色属性
|
3月前
|
前端开发
【前端web入门第三天】02 CSS字体和文本
本文详细介绍了CSS中字体和文本的相关属性。字体部分涵盖字体大小、粗细、样式、行高、字体族及`font`复合属性,通过具体示例展示了如何设置和使用这些属性。文本部分则讲解了文本缩进、对齐方式、修饰线及文字颜色等属性,并提供了实用的代码示例。此外,还简要介绍了调试工具中的一些细节,如错误属性标识和属性生效状态的控制。
76 28
|
3月前
|
前端开发
前端基础(十二)_overflow属性、clear属性、vertical-align属性
本文详细介绍了CSS中的overflow属性、clear属性和vertical-align属性的用法和效果,并通过实例展示了如何控制元素内容溢出时的显示方式、清除浮动以及对齐行内元素和行内块元素。
86 1
|
3月前
|
前端开发
前端基础(四)_CSS层叠样式表_什么是css_css样式的引入方式_样式表的优先级_样式选择器
本文详细介绍了CSS(层叠样式表)的基本概念、语法规则、引入方式、样式表的优先级和样式选择器。文章解释了CSS的作用,展示了如何在HTML中通过行内样式、内部样式和外部样式引入CSS,讨论了不同CSS选择器的优先级和如何确定最终的样式应用。此外,还强调了使用`!important`规则时的优先级高于行内样式。
116 1
|
3月前
|
JavaScript 前端开发
前端基础(十)_Dom自定义属性(带案例)
本文介绍了DOM自定义属性的概念和使用方法,并通过案例展示了如何使用自定义属性来控制多个列表项点击变色的独立状态。
54 0
前端基础(十)_Dom自定义属性(带案例)
|
3月前
|
前端开发
【前端web入门第五天】01 结构伪类选择器与伪元素选择器
本文介绍了CSS中的结构伪类选择器和伪元素选择器。结构伪类选择器如`nth-child`可根据元素结构关系进行选择,例如将列表中首个`<li>`元素背景设为绿色。伪元素选择器用于创建装饰性内容。
103 8