欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

前端笔记02

程序员文章站 2022-05-10 22:52:01
...

表格布局的缺陷

  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 标签上
	
相关标签: 前端