从头学前端-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篇丨初探【transform】,手把手带你实现1024程序员节动画
前端深入之css篇丨初探【transform】,手把手带你实现1024程序员节动画
|
14天前
|
缓存 移动开发 前端开发
在PWA的开发中,HTML与CSS作为前端技术的基础,发挥着至关重要的作用
【6月更文挑战第14天】PWA(渐进式网页应用)借助HTML和CSS,提供接近原生应用的体验。HTML构建页面结构和内容,响应式设计适应各种设备,语义化标签提升可访问性,Manifest文件配置应用元数据,离线页面保证无网时体验。CSS则用于定制主题样式,创建动画效果,实现响应式布局,并管理字体和图标。两者协同工作,确保PWA在不同环境下的优秀性能和用户体验。随着前端技术进步,HTML与CSS在PWA中的应用将更加深入。
25 2
|
14天前
|
XML 前端开发 JavaScript
前端简介(HTML+CSS+JS)
前端简介(HTML+CSS+JS)
|
23天前
|
存储 前端开发 Windows
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
对于莫名其妙使用smarttomcat上传前端项目失败,上传css等静态资源失败等原因,及解决方法
|
1月前
|
前端开发 Java
前端面试题01(css)
前端面试题01聚焦CSS,涵盖选择器优先级、隐藏元素方法、px与rem差异、重绘与重排解释、元素居中技巧及可继承属性。还探讨了CSS预处理器SASS和LESS的特性。文章提供实例代码展示居中布局的多种实现方式。鼓励读者点赞和支持。
19 0
|
1月前
|
前端开发
前端 CSS 经典:SVG 描边动画
前端 CSS 经典:SVG 描边动画
34 0
|
1月前
|
前端开发
前端 CSS 经典:好看的文字阴影
前端 CSS 经典:好看的文字阴影
24 0
|
1月前
|
前端开发
前端 CSS 经典:模特换装效果
前端 CSS 经典:模特换装效果
45 0
|
1月前
|
前端开发 算法
前端 CSS 经典:filter 滤镜
前端 CSS 经典:filter 滤镜
30 0
|
1月前
|
前端开发
前端 CSS 经典:弧形边框选项卡
前端 CSS 经典:弧形边框选项卡
36 0