前端与CSS | 青训营笔记

127 阅读1分钟

CSS简介

什么是CSS

CSS也叫做层叠样式表,它是一种定义样式结构如字体、颜色、位置等的语言,对 HTML 代码进行美化。

屏幕截图 2023-01-16 213300.jpg

屏幕截图 2023-01-16 213339.jpg

CSS语法

  • 我们要对某一个标签进行修饰首先就得找到这个标签,需要用到CSS选择器。
  • 选择器通常是需要改变样式的HTML元素。
  • 属性(property)是希望设置的样式属性。每个属性有一个值。

规则:

屏幕截图 2023-01-16 214609.jpg

CSS选择器

标签选择器

CSS实例CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。 屏幕截图 2023-01-16 213450.jpg

id选择器

屏幕截图 2023-01-16 213517.jpg

class选择器

屏幕截图 2023-01-16 213619.jpg

伪类选择器

CSS伪类和伪元素是用来添加一些选择器的特殊效果

屏幕截图 2023-01-16 213707.jpg

特别说明

  • 要选择具有特定 id 的元素,请写一个井号(#),后跟该元素的 id。id 名称不能以数字开头。
  • 如需选择拥有特定 class 的元素,请写一个句点(.)字符,后面跟类名。
  • CSS中注释方法是:/......../(用来解释代码)

CSS使用方法

  • 外部CSS:把写好的样式放在同级目录的另一个文件夹里,使用时只需要写一个link标签引入在编辑器里即可,他真正意义上做到了结构与样式完全分离。可以控制根目录里的所有页面。
  • 内部CSS:主要位于<head>部分,利用<style>标签定义,可以说他做到了结构与样式分离但也没完全分离。可以控制一个页面里的多个元素。
  • 行内CSS:作用在一行里,它通过标签的style属性来设置元素样式。注意这里不是style标签!可以控制一个页面里的一行元素。