【CSS学习笔记】标签选择器和元素显示模式

一、CSS规则

1、CSS规则由两个主要部分：选择器及声明

选择器 {声明1; 声明2; ...}

• 选择器用于指定CSS样式的作用标签，花括号内是对该对象设置的具体样式
• 声明即属性和属性值，由键值对形式出现 key:value

二、CSS选择器作用

        选择所作用的标签

三、CSS选择器分类

基础选择器 

• 标签选择器：为页面中某一类标签指定统一的样式。
• 类选择器： 可以差异化选择同一类型不同标签。样式点定义，结构类(class)调   用，一个或多个。使用多个类时需用空格分隔。
• id选择器：为特定id的HTML标签指定样式，HTML标签以id属性设置id选择器，CSS中id选择器以“#”定义。
• 通配符选择器：为页面中所 有标签设置样式。使用“ * ”定义，无需调用。

复合选择器：由基础选择器组合而成

• 后代选择器：又称为包含选择器，可以选择父元素里的子元素。用空格相连父子标签
• 子选择器：只能选择某元素的最近一级子元素。用>相连父子标签
• 并集选择器：可以选择多组标签，定义相同的样式；通常用于集体声明。用,相连多个基础器
• 伪类选择器：用于向某些选择器添加特殊的效果。用:表示，比如:hover、:first-child。链接伪类和结构伪类

		说明
链接伪类选择器	a:link	选择所有未被访问的链接
	a:visited	选择所有已被访问的链接
	a:hover	选择鼠标指针位于其上的链接
	a:active	选择活动链接（鼠标按下未弹起的链接）
:focus伪类选择器	input:focus	一般情况表单元素使用

四、元素显示模式

 HTML标签一般分为块元素和行内元素两种类型。

块元素

常见块元素有<h1><p><ol><ul><li><div>

特点： 

• 独占一行
• 宽、高、外边距、内边距可以设置
• 宽度默认是容器（父级宽度）的100%
• 是一个容器和盒子，其内可以放行内或块元素

注：文字类的元素内不能使用块元素，如<h1><p>等

行内元素

常见的行内元素有<a><strong><b><em><i><del><s><ins><u><span>

特点：

• 相邻行内元素在一行上，一行可以显示多个
• 宽高无法直接设置
• 默认宽度是其内容的宽度
• 行内元素只能容纳文本或其他行内元素，不能放块元素。

行内块元素

<img><input><td>

特点：

• 一行可以有多个行内块元素，中间有空格缝隙（行内元素特点）
• 默认宽度是它本身内容的宽度（行内元素特点）
• 高度、行高、外边距、内边距可以设置（块元素特点）

元素显示模式转换：通过设置属性实现

• 转为块元素  display:block
• 转为行内元素：display:inline
• 转为行内块元素  display:inline-block

CSS三大特性

层叠性：样式冲突就近原则，样式不冲突正常生效

继承性：子标签继承父标签的某些样式（color、text-、font-、line-  等文字相关）

优先级：

选择器权重：继承/通配符选择器 < 标签选择器 < 类/伪类选择器 < ID选择器 < 行内式< !important