前端与CSS|青训营笔记

树梢还未果
88 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第2天

简介了前端的功能和由什么组成的「HTML是什么」

CSS是什么？

前面我们有说到前端基础主要由HTML、CSS、JavaScript组成的，那么CSS主要是干什么的呢？

层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

简单的说CSS主要用来定义页面元素的样式：

  • 设置字体和颜色
  • 设置位置和大小
  • 添加动画效果

CSS可以通过外链、嵌入以及内联的方式来定义标签中的样式。

外链就是创建一个.css的文件来编写相关的CSS样式代码，然后通过相关的标签导入到HTML文件中。

image.png

嵌入就是在HTML文件中创建一个<style>的标签来编写CSS样式代码。

image.png

内联就是直接在HTML标签中添加CSS样式代码。

image.png

CSS选择器

可以快速找到页面中的元素，以便给他们设置样式 CSS有多种方式可以选择元素：

  • 按照标签名类名或者id

  • 按照属性

  • 按照DOM树中的位置

      CSS代码
  <style>
  /* 标签选择器 */
  li{
      background-color: antiquewhite;
      color: brown;
  }
  /* 类选择器 */
  .box{
      background-color: #0f0;
      color: #fff;
      font-size: 24px;
  }
  /* id选择器 */
  #paragraph{
      font-family: 黑体;
  }
  /* 属性选择器 */
  [disabled]{
      background-color: rgb(118, 227, 231);
      color: #000;
  }
  </style>
  
  HTML代码
  <div class="box">这是一个div标签</div>
  <p id="paragraph">这是一个p标签</p>
  <p>这是一个p标签</p>
  <input value="搜索栏" disabled/>
  <!-- 内联设置宽度和高度 -->
  <img src="./1673788756406.jpg" style="width: 100px; height: 50px; display: block;" />

image.png

CSS常用样式

  • 设置字体：font-family:宋体;
  • 设置文字大小：font-size:24px;
  • 设置高度: height:50px;
  • 设置宽度: width:300px;
  • 设置字体颜色：color:#f00;也可以使用RNG模式：color:rgb(118, 227, 231)。
  • 设置背景颜色：background-color：#f00;也可以设置RNG模式。
avatar
文章
阅读
粉丝