Web前端开发学习笔记02--CSS

CSS

1、什么是CSS

CSS是层叠样式表的简称，是一种标记语言，主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局和外观显示样式。简单来说，就是CSS用于美化网页、布局网页

CSS构成规则： 选择器（用于指定HTML标签）以及一条或多条声明

h1 {
                        /*h1为选择器*/
    color:red;          /*声明项*/
    font-size:16px;     /*font-size为属性，16px为属性值*/
}

2、CSS基础选择器

选择器就是根据不同的需求把不同的标签选出来

选择器	作用	特点	使用情况	用法
标签选择器	可以选出所有相同的标签	不能够差异化选择	较多	h1 { color:red;}
类选择器	可以选出1个或多个标签	可以根据需求选择	非常多	.nav {color:red}
id选择器	一次只能选择一个标签	id属性只能在每个HTML文档中出现一次	一般和js搭配	#nav {color:red;}
通配符选择器	选择所有标签	选择太多，有部分不需要	特殊情况使用	* {color:red;}

2.1 标签选择器

1、定义： 标签选择器是指用HTML标签名称作为选择器，按标签名称分类，为页面中某一类标签指定统一的CSS样式。

2、 语法格式

标签名 {
   
       属性1:属性值1;
       属性2:属性值2;
       属性3:属性值3;
       ...
}

2.2 类选择器

1、运用场景： 差异化不同的标签，类选择器在HTML中以class属性表示，在CSS中类选择器以一个 “.” 号表示

2、 语法格式

步骤一：设置相关类名和属性

.类名 {
   
      属性1:属性值1;
      属性2:属性值2;
      属性3:属性值3;
      ...
}

步骤二：用class属性调用

<标签名 class='类名'></标签名>

例如：<div class='red'> 文字</div>

3、类选择器-多类名