【CSS基础】【前端】基础知识及应用1（未完待续）

一、CSS概述

CSS的主要使用场景就是美化网页、布局页面的，一般写在< head>< /head>中的< style>< /style>标签中，CSS用于设置文本内容、图片版型、版面布局和外观显示样式。
CSS主要有2个部分构成：选择器以及1条或多条声明

h1 {
   color:red;font-size:25px;}

选择器是HTML标签，属性与属性值以键值对形式出现
CSS选择器作用：把不同标签选出来

二、CSS选择器

1、基础选择器：

标签选择器

用HTML标签名作为选择器，为某一类标签指定统一样式

类选择器

单独选一个或某几个标签，实现差异化选择

.red {
   
属性1:属性值1;
}

<div class="red">变红色</div>

类名自己取，不要用标签名作类名，尽量用英文字母表示，比较长可以用短横线分割。结构需要用class属性来调用。
口诀：样式点定义，结构类(class)调用，一个或多个，开发最常用
类选择器——多类名：
可以给一个标签指定多个类名，多个类名间必须用空格隔开。
可以把公共的样式放在一个类里，这些标签都可以调用公共的类，然后再调用自己独有的类。这样既节省代码又修改方便。
如：

<div class="red font20">变红字体变20</div>

id选择器

#pink {
   
属性1:属性值1;
}

<div id="pink">迈克尔杰克逊</div>

口诀：样式#定义，结构id调用，只能调用一次，别人切勿使用
id选择器一般用于页面唯一性元素上，与JS搭配使用

通配符选择器

选中所有的标签，html、body…都选中

* {
   
属性1:属性值1;
}

无须调用

2、复合选择器

复合选择器由基础选择器的两个或多个组合而成

后代选择器*

ol li a {
   
color:red;
}

选择器中间以空格分割，最终改变的是最后一个选择器，前面的选择器与后面的选择器要保持父亲和后代的关系，所有选择器可以是任意基础选择器

子选择器

ol>li{
   
属性1:属性值1;
}

只能选择作为某元素的最近一级子元素

并集选择器

div,
p,
.pig li