一.HTML与css
#day02_CSS
1.回顾:
html:超文本标记语言
超文本:文本…,超链接|音频|视频|图片
标记:标签 <标签名></标签名> < 标签名/>
标记(标签):
1.标题标签 n:1-6
2.段落
—>块标签
3.文字 属性 <标签名 属性名 = 值 属性名 = 值 >
size,color
4.字体修饰标签 :加粗 斜体
5.图片:
width: alt:
锚点:
1.设置锚点
2.找锚点
<a href=""#id属性值/name属性值>
7.
线条
8.
换行
9.列表
9.1:有序列表
9.2:无序列表
9.3:自定义列表
10.表格 table
行 列 表头行合并 rowspan
列合并 colspan
11.表单标签(重点)
<form method="" action=""></form>
1.普通输入文本框
<input type="text" name="" value="">
2.密码框 password
3.单选 radio 默认值checked
<input type="radio" name="" value=""> checked
4.复选框 checkbox
5.上传文件 file
6. 按钮 button
提交 submit
重置 reset
7.邮件 email
8.日期 date
9.数字 number
10.下拉选列表 <select><option value="" selected></option> </select>
11.文本域 <textarea rows cols ></textarea>
12.框架
13.
2.CSS
css:层叠样式表
css作用:修饰html标签,给html页面标签添加样式
使用:
1.行内样式
<标签名 style="" >
2.内联样式
<style>
css样式
</style>
3.外联样式
<link rel="" href="">
三种方式的优先级遵循:就近原则
href:关联外部的css文件
CSS语法:
选择器{ 样式名:样式的值;样式值}
1.选择器:
作用:
定位标签位置
1.id选择器
以#开头,以标签中的id属性的值作为选择器的名称
#d1{
border:5px solid yellow;
}
<div id="d1">第一个区域</div>
2.class选择器(类选择器)
以. 开头 以标签中class属性的值作为选择器的名称
.c1{
border-bottom-color: red;
}
<input class="c1">
3.标签选择器
以标签名作为选择器的名称
p{
color: #FFA500;
}
<p>段落标签</p>
<p>段落标签2</p>
优先级:id选择器>类选择器>标签选择器
4.属性选择器
选择器[属性名]{ }
定位原则:查看那个标签中有该属性
选择器[属性名=属性值]{ }
a[href=sd]{
color: red;
}
选择器[属性名*=属性值]{ }
*:包含
a[href*=d]{
color: red;
}
5.混合选择器
多个选择器使用,选择器与选择器之间用逗号隔开
#id,.c1,[href]{ }
6.层级选择器
选择器 选择器{ }
选择器与选择器之间以空格隔开
一层一层的定位标签
div .c1 p{
font-size: 30px;
color: red;
}
7. * :页面所有的标签 --->设置页面的外边距和内边距 --->浏览器自带样式
8.伪类选择器
:选择器名称
超链接的伪类选择器
1. :link 未访问的时候
2. :visited 已经访问过的
3. :hover 鼠标悬停
4. :actived 点击不松的状态
a:link{
color: red;
}
a:visited{
font-size: 40px;
}
a:hover{
color: blue;
font-size: 40px;
}
a:active{
color: orange;
font-size: 20px;
}
2.样式
1.字体
font
font-famly:字体 如微软雅黑 宋体
font-style:字体样式/斜体
font-size:字体大小
2.文本
text-align:文本的对齐方式
text-indent:文本的缩进
text-decoration:文本的样式:overline|underline|
line-height:行高 --->垂直居中 当行高等于外部标签的高度
3.背景 background
background-color:背景色--->body
background-image:url() 背景图片
background-position:背景定位left|right|center|top|bottom 往往2个值定位,
但是当只有一个值定位的时候,另外一个默认是center
background-repeat: 背景平铺
4.定位 position
相对定位 relative 相对原来的位置的定位
left:距离那边方向的长度
right
top
bottom
原来位置空间不清除
绝对定位 absolute
如果实现绝对定位,默认主要看父标签有没有定位,如果没有定位,看body,就相对body来实现位置移动
如果父标签有定位(除了static定位),那么相对父标签移动
原来的位置空间要清除掉
固定位置定位 fixed
5.浮动
float:left|right
紧跟前边的标签实现浮动,如果是左浮动,影响的标签框的左边框,如果是右浮动,影响的标签框的右边框
clear:清除浮动--->清理浮动只能清理对应的浮动边框 left|right|both
display:改变标签的类型--->块--->行内--->块
block|inline|none(不见了)
6.列表
list-style: none; 去圆点
当列表的标识是图片的时候,该样式无效
list-style-image:url()
list-style-position: inside;inside|outside 表示标识的位置
overflow:溢出的时候显示的方式
overflow:scroll|hidden;
7.盒子模型
认为在页面上一切都可以以盒子来看待--->布局(轻微)
margin:外边距--->上右下左
margin:a,b,c,d
当ac相同,bd,相同
margin:a b
margin-left|right|top|bottom:
padding:内边距
总宽度=2*magrin+2*border+padding*2+内容的真实宽度
来源：https://blog.csdn.net/weixin_43789559/article/details/101079717