从头学前端-CSS基础01

简介: 从头学前端-CSS基础01

CSS简介:

CSS是层叠样式表的简称,有时也会称之为CSS样式表或级联样式表。CSS也是一种标记语言(和html一样,不是个编程语言);
Html主要是页面结构,显示元素内容,CSS是美化页面,布局网页;
CSS规则主要有选择器和样式声明组成;样式声明以键值对的形式出现;如下:
p{
font-size: 12px,
color:'red'
}

CSS基础选择器

选择器就是根据不同的需求把不同的标签选出来;CSS就是找的指定的标签,设置标签样式;

  • 选择器分为基础选择器和复合选择器两大类;基础选择器又包括:标签选择器,类选择器,id选择器和通配符选择器;
    1. 标签选择器是指用html标签名称作为选择器,把某一类标签设置样式;不能对标签进行差异化设置
    2. 类选择器可以单独选一个或多个标签,进行差异化设置;需要给标签设置class属性;(不要使用纯数字,中文,标签名作为类名)使用的时候,class前面加符号.
      语法如下:.类名{ k:v}
      一个标签页可以使用多个类名;

      在标签的class属性中,写多个类名,以空格分开;

  1. id选择器是通过标签的Id属性值作为选择器,id以#开始;其他与类选择器类似;相比类选择器,id可以表示一个标签,id只能使用一次;
  2. 通配符选择器使用*定义,它表示选取页面所有的元素;

在这里插入图片描述

CSS字体属性

字体属性用于定义字体系列,大小,粗细和文字样式等;
  • 字体系列:font-family
  • 字体大小: font-size; 大小以px(像素)为单位;谷歌浏览器默认的大小为16px; 一般情况下给body添加此属性;标题标签特殊设置
  • 字体粗细:font-weight : 常用值 normal(400) bold(700) bolder和数字(100-900)
  • 文字样式: font-style 常用值normal和italic
  • 字体复合属性:font {font-style(可省略) font-weight(可省略) font-size(必需)/line-height font-family(必需) } 空格隔开,顺序不可以更改

CSS文本属性

css文本属性主要定义文本的外观属性,如文本的颜色,文本对齐,缩进,行间距等;
  • 文本颜色: color; 三种标识方式,预定义颜色值,RGB和16进制
  • 对齐文本: text-align用于设置水平对齐方式,属性值,left right center
  • 装饰文本: text-decoration 给文本添加下划线,删除线,上划线,默认值:none
  • 文本缩进: text-indent 文本首行缩进,用于段落开头;可以取负值,单位px或em
  • 行间距: line-height 设置行与行之间的距离,行间距包含:文字大小,上间距和下间距;

CSS引入方式

引入方式分三种,内部引用(style标签),行内引用(style属性) 外部样式引用(link标签),权重依次递减。

一个页面的搭建过程

  • 搭建页面html结构

    根据页面展示内容,设置页面标签

  • 添加CSS样式

    添加body全局css
    添加各个标签样式

注意

图片标签没有水平居中样式,如要水平居中,需要放到行标签中,如p和div标签

相关文章
|
8天前
|
前端开发 JavaScript 开发者
前端 CSS 优化:提升页面美学与性能
前端CSS优化旨在提升页面美学与性能。通过简化选择器(如避免复杂后代选择器、减少通用选择器使用)、合并样式表、合理组织媒体查询,可减少浏览器计算成本和HTTP请求。利用硬件加速和优化动画帧率,确保动画流畅。定期清理冗余代码并使用缩写属性,进一步精简代码。这些策略不仅加快页面加载和渲染速度,还提升了视觉效果,为用户带来更优质的浏览体验。
|
4天前
|
前端开发 开发者 UED
《前端技术基础》第02章 CSS基础【合集】
层叠样式表(Cascading Style Sheets,简称CSS)是一种用于描述网页视觉表现的语言。该语言与HTML协同工作,其中HTML负责构建网页的结构,而CSS则负责定义网页的外观和格式。CSS通过一系列规则来实现样式的应用,这些规则由选择器(Selectors)和声明块(Declaration Blocks)构成。选择器的作用是明确指出哪些HTML元素将受到特定样式规则的影响,而声明块则包含了具体的样式声明,这些声明定义了元素的视觉属性和相应的值。
21 1
|
2月前
|
前端开发 JavaScript 搜索推荐
HTML与CSS在Web组件化中的核心作用及前端技术趋势
本文探讨了HTML与CSS在Web组件化中的核心作用及前端技术趋势。从结构定义、语义化到样式封装与布局控制,两者不仅提升了代码复用率和可维护性,还通过响应式设计、动态样式等技术增强了用户体验。面对兼容性、代码复杂度等挑战,文章提出了相应的解决策略,强调了持续创新的重要性,旨在构建高效、灵活的Web应用。
52 6
|
2月前
|
Web App开发 前端开发 JavaScript
揭秘!前端大牛们如何巧妙利用CSS3,打造炫酷视觉效果!
【10月更文挑战第31天】前端开发面临复杂布局的挑战,本文介绍了几种提升开发效率和代码质量的工具和技术。基础的HTML和CSS可以应对大部分布局需求,而Firefox开发者工具、VS Code、Vue、React等则能应对更复杂的布局,帮助开发者构建高性能、用户友好的网页应用。
42 4
|
3月前
|
前端开发 JavaScript
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
CSS样式穿透技巧:利用scoped与deep实现前端组件样式隔离与穿透
365 1
|
4月前
|
前端开发
前端基础(九)_CSS的三大特征
本文详细解释了CSS的三大特性:层叠性、继承性和优先级,并通过实例演示了样式冲突、叠加和选择器优先级的应用。
43 2
前端基础(九)_CSS的三大特征
|
3月前
|
前端开发 容器
前端技术分享:利用CSS Grid布局实现响应式设计
【10月更文挑战第1天】前端技术分享:利用CSS Grid布局实现响应式设计
|
3月前
|
前端开发 UED 容器
前端技术分享:利用 CSS Grid 实现响应式布局
【10月更文挑战第1天】前端技术分享:利用 CSS Grid 实现响应式布局
89 2
|
3月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)2
【前端基础篇】CSS基础速通万字介绍(上篇)
31 2
|
3月前
|
Web App开发 前端开发
【前端基础篇】CSS基础速通万字介绍(上篇)3
【前端基础篇】CSS基础速通万字介绍(上篇)
28 1