前端——css
html 标签就基本不怎么做笔记了。css 的学习就稍微记录下,需要的可以自行百度搜索查找相关知识,例如:W3School
一、html的一些标签或相关知识
1、frameset
a、标签解释
1.frameset:是将多个界面组合成一个新的界面。
frameset 可以左右进行平分:cols ;也可以上下进行平分:rows
2.frame:src属性:来动态填充界面
3.注意点:
A.frameset,不能与body同时存在
B.frameset,可以进行嵌套的使用
b、例子
上下分两层,在下面那层又分左右两层
2、div
div 标签这里就不解释了,百度到处都有解释。
1、div一般需要与css进行搭配使用。
2、大部分网站都是使用div来进行模块化开发。
3、div是块状元素,不跟内容来进行填充,独占一行。
3、元素的转换
1、在html中标签分为三类 A.块元素 B.行元素 C.行块元素
2、块元素:不根据内容来进行填充独占一行,例子:div p
3、行元素:不独占一行,根据内容来进行填充:a span
4、行块元素:既有行元素的特征又有块元素的特征,不是独占一行,可以设置其宽度:img
二、css
1、css是什么以及能做什么
这里还是不解释。百度到处都有
2、css基本语法
1、css组成部分: A.选择器 B.声明
选择器:就是需要修饰的html标签。
声明:需要具体修饰的一些特征(样式),声明可以存在一条,也可以存在多条。
2.例子:
p{color:red;font-size:12px}
3.注意点:
A、大括号中编写样式
B、多组属性是以英文分号进行分割
C、属性与属性值是不区分大小写,但是建议使用小写,选择器是区分大小写(除了标签以外)。
3、css样式引入方式
a、行内引入
1、行内引入:直接在标签中引入样式
2、优点:方便、简单
3、 缺点:html代码与css样式混合在一起,代码清晰结构度比较差
例子:
!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h3 style="color: red;font-size: 20px;">库里超神得33分</h3>
</body>
</html>
b、内部引入
1.内部引入:在html标签的头部<head>中编写样式。
2.优点:html代码与css进行分离,代码清晰度比较高。
2.缺点:代码的扩展性比较差,其它的界面引入不到。
例子:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
div{
/*宽度*/
width: 200px;
/*高度*/
height: 200px;
/*背景颜色*/
background-color: red;
}
</style>
</head>
<body>
<div>
哈哈!今天天气真好
</div>
</body>
</html>
c、外部引入
1.外部导入:在css文件夹创建一个css文件编写样式,再页面进行引入。
2.优点:代码扩展性比较高。
3.缺点:可能会导致css样式冲突。
外部引入需要先创建一个 css 文件,文件里面写样式:
p{
color: red;
}
然后通过代码导入:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--引入css文件-->
<!--rel 告诉浏览器以css样式的方式进行解析 必须加上
href css文件的路径
-->
<link rel="stylesheet" href="css/demo.css"/>
</head>
<body>
<p>梅西获奖了</p>
</body>
</html>
还有另一种外部导入:
<style>
@import url("css/demo.css");
</style>
link 和 @import 的区别
link:引入任何的浏览器都支持,@import 不支持低版本ie浏览器。
link:先加载样式 再加载标签,@import 先加载标签 再加载样式(用户体验度差)。
4、三种引入方式的优先级
行内>内部 / 外部——就近原则
5、基本选择器
a、标签选择器
1、概念:以html标签来进行命名的选择器,就是标签选择器 例子:p div
2、语法:标签的名称 {属性名:属性值}
b、id选择器
1、概念:以id来进行命名的选择器 就是标签选择器 例子:#id名称{属性:属性值}
2、语法:# id选择器的名称 {属性:属性值}
3、注意点:id选择器需要在标签中进行引入,才会生效
c、类选择器
1、概念:以类来进行命名的选择器 就是标签选择器 例子:.class名称{属性:属性值}
2、语法:. 类选择器的名称 {属性:属性值}
3、注意点:类选择器需要在标签中进行引入 才会生效
d、三种基本选择器的优先级
1、优先级:id选择器> class选择器 > 标签选择器
2、提示:在编写页面时,不确定使用什么类型的基本选择器,建议使用类选择器。
id选择器一般是唯一;标签选择器容易冲突。
6、属性选择器
1、概念:以标签中的属性进行命名的选择器,就是选择器。
2、语法:标签[属性='属性值'] 标签[属性] 例子: input[type='text'] a[href]
7、层级选择器
1、概念:获取父子相关的标签,通过父级获取子级
2、语法:#id 类选择器 、类选择器 id选择器 、标签选择器 标签选择器
举个例子:
可以看到嵌套关系,外层就是父,内层就是子。
8、伪类选择器
1、a:link {} 未访问的链接 默认状态 (重点)
2、a:visited {}已访问的链接
3、a:hover {} 鼠标悬停链接 (重点)
4、a:active{} 已选择的链接
9、盒子模型
1、生活中盒子:内容:content + 内边距:padding + 边框:border + 外边距:margin,网页中的盒子模型就是这几部分。
2、两个盒子:纵向进行排列,同时设置margin值时,取的两个盒子较大的 margin 值。(两值只取最大值,并不是相加)
3、两个盒子:横向进行排列,同时设置margin值,取的两个盒子 margin 值之和。(横向时才是相加)
4、嵌套盒子:
两个盒子进行嵌套,给子盒子设置margin值:
产生问题:父容器塌陷的问题:父容器会随着子容器而移动。
解决方案:在父容器设置属性:overflow:hidden;
常用属性:
10、浮动
1.在网页中html中的元素,标签要么是从左到右进行排列,或者是从上到下进行排列,如果需要改变这个默认排列的
规则,就需要使用浮动。浮动的元素是脱离标准文档流(让元素飘起来)。例子:所有网站的导航栏均是float
(left、right)
2.注意点:
A.浮动的元素遇到其他容器的边界的时候会停止浮动。
B.浮动的元素会影响不浮动的元素,可以清除浮动来解决:clear(left、right、both)。