CSS学习笔记

一、CSS介绍

CSS 指层叠样式表 (Cascading Style Sheets)，定义如何显示HTML元素。  
CSS规则由两个主要的部分构成：选择器，以及一条或多条声明:  
p{color:red; text-align:left;}  
其中p为选择器，选择器一般是须要改变样式的HTML元素。  
{}内的为声明，每条声明由一个属性和一个值组成，属性和值用冒号分开，声明之间用分号隔开。

二、CSS选择器

选择器的类型较多，根据本身的理解，梳理集中经常使用的。

选择器名称	选择器	示例	示例说明	备注
id选择器	#id	#firstname	选择全部id="firstname"的元素	经常使用
id选择器	#id	#firstname	选择全部id="firstname"的元素
属性选择器	[attribute]	[target]	选择全部带有target属性的元素
	element[attribute]	a[target]	选择全部带有target属性的<a>元素
类选择器	.class	.center	选择全部class="center"的元素	经常使用
	element.class	h1.center	选择全部class="center"的<h1>元素
元素类型选择器	element	p	选择全部<p>元素	经常使用
	element,element	div,p	选择全部<div>元素和<p>元素
	element element	div p	选择<div>元素内的全部<p>元素
	element>element	div>p	选择全部父级是 <div> 元素的 <p> 元素
通用选择器	*	*	选择全部元素
状态选择器	：state	a:link	选择全部未访问的<a>连接
		a:visited	选择全部访问过的连接
		a:hover	选择鼠标在连接上面时
		a:active	选择活动连接

https://www.w3cschool.cn/cssref/53s812dp.html

三、选择器的优先级

1. 内联样式
2. ID 选择器
3. 属性选择器
4. 类选择器
5. 元素类型选择器
6. 通用选择器

四、CSS声明

简单举几个例子，工做中遇到了不熟悉的，能够来这里查：https://www.w3cschool.cn/cssref/sel-attribute.html

• 背景

body{  
    background-color:#cccccc;  
    background-image:url('./mm.jpg');  
    background-repeat:repeat-y;  
    background-position:right top;              
}  

• 文本

p{  
    color:red;  
    text-align:left;  
}

• 字体

h1{  
    font-size:20px;  
    font-family: Arial;  
}

• 填充

p{  
    padding-top:25px;  
    padding-bottom:25px;  
    padding-right:50px;  
    padding-left:50px;  
}

• 轮廓线

p {   
    outline-style:dotted;   
    outline-color:#00ff00;   
}

# 五、Bootstrap简介

官方对Bootstrap定义是，Bootstrap是一套用于 HTML、CSS 和 JS 开发的开源工具集。能够将Bootstrap理解为是对CSS的补充，能够提升页面布局、样式设置的效率。  

学习Bootstrap就是了解与不一样HTML元素相对应的类名，不一样类名对应着不一样的实现效果。