深入理解CSS学习笔记1 | 青训营

81 阅读3分钟

CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明。每条声明由一个属性和一个值组成。

CSS注释:/注释/

id 和 class 选择器

  • id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。

HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义

ID属性不要以数字开头

  • class 选择器用于描述一组元素的样式

class 选择器有别于id选择器,class可以在多个元素中使用。

class 选择器在 HTML 中以 class 属性表示, 在 CSS 中,类选择器以一个点 . 号显示

类名的第一个字符不能使用数字

插入方式

  • 外部样式表

用外部的css文件表示样式

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

外部样式表可以在任何文本编辑器中进行编辑。文件不能包含任何的 html 标签

  • 内部样式表

使用 标签在文档头部定义内部样式表

<head>
<style>
......
</style>
</head>
  • 内联样式

在相关的标签内使用样式(style)属性。

一般情况下,优先级如下:

(内联样式)Inline style > (内部样式)Internal style sheet >(外部样式)External style sheet > 浏览器默认样式

如果外部样式放在内部样式的后面,则外部样式将覆盖内部样式

链接样式

这四个链接状态是:

  • a:link - 正常,未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面

常见的用颜色、文本(是否有下划线-text-decoration)、背景等修饰

text-decoration:none;:消除链接下划线

用法:如a:link {text-decoration:none;}

列表

可以选用不同的列表项标记:

ul.a {list-style-type: circle;}
ul.b {list-style-type: square;}
 
ol.c {list-style-type: upper-roman;}
ol.d {list-style-type: lower-alpha;}

可使用图像作为列表项标记:

ul { list-style-image: url('sqpurple.gif'); }

不显示列表前的符号:

list-style-type: none;

盒子模型

image-20230808000151198转存失败,建议直接上传图片文件

  • Margin(外边距) - 清除边框外的区域,外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域,内边距是透明的。
  • Content(内容) - 盒子的内容,显示文本和图像。

分组和嵌套

分组:每个选择器用逗号分隔,可避免重复写很多代码。

h1,h2,p{    color:green; }

嵌套:适用于选择器内部的选择器的样式

  • p{ }: 为所有 p 元素指定一个样式。
  • .marked{ }: 为所有 class="marked" 的元素指定一个样式。
  • .marked p{ }: 为所有 class="marked" 元素内的 p 元素指定一个样式。
  • p.marked{ }: 为所有 class="marked"p 元素指定一个样式。

总结

今天学习了css比较基础的知识点,整理了一部分要点,包括id 和 class 选择器、css插入方式、链接样式、列表、盒子模型以及分组与嵌套,掌握了css框架结构部分,收获颇丰!