前端笔记02

表格布局的缺陷

1. 嵌套层级太多，一旦出现嵌套顺序错乱，整个页面的顺序都要变
2. 采用表格布局，页面不够灵活，动其中某一块整个表格布局的结构全都要变

HTML的块标签

• div标签：默认占一行，自动换行
• span 标签：内容显示在同一行

CSS

• 什么是CSS

Cascading Style Sheets：层叠样式表，主要用来美化HTML页面，HTML决定网页的骨架,将页面的HTML和美化进行分离

• CSS简单语法

在一个style标签中，去编写CSS内容，最好将style标签卸载head标签中

<style>
	选择器{
		属性名称：属性的值
		属性名称2：属性的值2
	}
</style>

CSS选择器：帮助我们找到我们要修饰的标签或者元素

• 元素选择

元素的名称{
	属性名称：属性的值
	属性名称：属性的值
}

• ID选择器

以#号开头  ID页面中必须是唯一的
#ID的名称{
属性名称：属性值
属性名称2：属性值2
}

• 类选择器

以 . 开头
. 类的名称{
	属性名称：属性值
	属性名称2：属性值2
}

• CSS的引入方式

内部样式：直接在style标签内编写css代码
外部样式：通过link标签引入一个外部的css文件
行内样式：直接在标签中添加一个style属性，编写css样式

• css浮动

CSS 浮动的元素会脱离正常的文档流，在正常的文档中不占空间
float属性：left / right
clear属性：清除浮动 left / right / both

• 选择器的优先级

行内样式 > ID选择器 > 类选择器 > 元素选择器
就近原则：哪个样式离标签近就使用哪个样式

• CSS中的其它选择器

选择器分组
属性选择器：
	a[title]
	a[title='aaa']
	a[href][tile]
	a[href][title='aaa']
后代选择器
	父选择器1 子选择器2   找出所有的后代
子元素选择器
	父选择器1 > 子选择器2   只找出第一代
伪类选择器：通常都是用在 a 标签上