HTML (Hyper Text Markup Language 超文本标记语言)
标签大小写不区分,默认是小写
国家标准编码:GB2312
Title
标签
标签分为两大类:块级元素 、行级元素 (网页展示的样子和你书写的格式没有关系)
一、块级元素
特点:独占一行
1、h 元素
ABCD
ABCD
ABCD
ABCD
ABCD
ABCD
2、p 元素
这是 p 元素,是块级元素
3、div 元素
这是 div 元素
4、ul 元素 (ul 、li 都是块级元素)列表元素
- 1
- 2
- 3
- 4
注释:
二、行级元素
1、span 标签
(回车和空格无论按多少下,都代表一个空格)
abcd
1234
2、纯文本是行级元素
3、a 标签(可以跳到其他网站上去)
百度
4、i 元素
斜体字
5、label 元素
6、img 元素
7、strong
加粗字体
我亲爱的王子大人
块级元素可以嵌套块级元素或行级元素,行级元素不能嵌套块级元素
转义字符
1、空格: 
CSS
1、选择器
- id 选择器
#d{
width: 200px;
height: 200px;
background: rebeccapurple;
}
- 元素选择器
h1{
font-size: 28px;
color: aqua;
}
- 类选择器
.c{
height: 100px;
background: yellowgreen;
}
优先级:
id 选择器 > 类选择器 > 元素选择器
如果ID选择器和类选择器与元素选择器对应同一个元素设置样式,她会先根据优先级进行,然后才使用元素选择器中ID选择器和类选择器没有的样式。
HTML 文件引入样式
一个 HTML 可以引入无数个 css 样式
一个元素可以使用多个类,类与类之间用空格间隔,
//起作用的是 d
组合选择器
- 带空格
div p{ //空格后面代表子元素
background: green;
height: 100px;
}
- 不带空格
p.c{ //类为 c 的 p 元素 (两个同时作用)
height: 100px;
background: cornflowerblue;
}
2、属性
1.宽高
width: 60%; 或者
width: 100px;
height: 100px;
- 块级元素:
如果没有设置属性宽高,则默认宽为整个页面的宽,高度以内容物的高度为主。
width:% 用只能给宽度用,高度不能用。且以父元素的百分比为主
- 行级元素:
宽和高属性对行级元素不起作用,宽和高以内容物大小决定.
2.背景
- 背景颜色
background-color: #FFFFFF;
background-color: rgb(255,0,0); //红,绿,篮 取值(0~255)
background-color: rgba(255,0,0,0.1); //设置透明颜色,取值 (0~1)
- 背景图片
background-image: url("1.jpg"); //宽高平铺整个元素
background-repeat: no-repeat /repeat /repeat-x /repeat-y; //使图片不重复/重复/横向重复/纵向重复
background-position: center bottom; //第一个定左右,第二个定上下
background-position: 10px 10px; //第一距离左面的位置,第二个距离上面的位置
background-position: -200px -400px; //可以截图
background-position: 40% 10%; //第一个距离左边的距离,第二个距离图片本身的距离
以上可以合在一起写为:
background:red url("1.jpg") no-repeat 0 0; //背景颜色 图片路径 是否重复 具体位置
3.边框
border: cornflowerblue 1px solid / dashed; //边框颜色 粗细 线形(实线/虚线)
border-bottom: greenyellow 2px dashed; //底部线的线形,还可以是上线,左线,右线
border-radius: 500px; //设置矩形角的弧度
4.字体
color: black; //字体颜色
font-size: 18px; //字体大小
font-family: 楷体; //字体样式
font-weight: bold; //字体粗细
text-align:center; //文字居中
text-decoration: underline; //文字加下划线
text-decoration: line-through; //文字加穿透线
text-indent: 20px; //文字缩进
5.盒子模型
-
margin
(元素与元素的距离或者是元素与他父元素的距离)
margin:10px ; //上下左右都是10
margin:10px 20px 30px 40px; // 上 右 下 左
margin:10px 20px ; // 上下 左右
margin-left:-10px ; //负值向反方向移动
margin:auto; //子元素的位置在父元素居中
注意:内部元素要居中必须要有宽度
-
padding
元素的内容与边框的距离 (会引起元素的撑大)且没有负值。
padding-left: 30px; //距离左边框的距离为30
有的元素自带边框距,消除边框距用以下:
*{
margin: 0;
padding: 0;
}
6.定位
块级元素和行级元素都可以使用绝对定位
- 静态定位
position: static; //默认值。没有定位,元素出现在正常的流中
- 绝对定位
position:absolute; //绝对定位,使元素摆脱文档流的控制(飘起来了,飘到了右下角)
right: 0; //具体定位
bottom: 0;
z-index: 500; //索引值取值范围(-999~999)指元素飘的高度
元素居中:
position: absolute;
left: 50%;
margin-left: -200px; //大小为宽度的一半
让元素占满整个屏幕,没有滚动条
position: absolute;
right: 0;
top: 0;
bottom: 0;
left: 0;
- 相对定位
相对于原来的位置移动,不脱离文档流,没有飘起来。
position: relative; //只有 left,top 两个可以用
left: 20px;
top: 20px;
- 窗口定位(固定定位)
会脱离文档流,相对的是整个窗口。
position: fixed;
left: 0;
top: 100px;
子绝父相
子元素在父元素内部跑。
子元素是绝对定位,父元素是相对定位。
子元素也可以是绝对定位,也可以是固定定位。子元素就在定位过的父元素中跑,若没定位,就在父元素的父元素找,直到找到定位过的父元素为止 ,就在定位过的元素中跑。
7、浮动
浮动会脱离文档流,但只能在这一行跑。
float: left;
float: right;
什么时候会停下来
1、遇到其他的浮动元素
2、遇到父元素
父元素没有高度的时候,高度是子元素之和。(除去浮动元素的高度)
- 清除浮动
clear: both; //清除上一层的浮动
8、展示
- 展示
display: block; // 能将行级变成块级元素展示
display: none; //元素不展示
display: inline-block; //块级元素变为行级,但保留宽高
- 鼠标展示
cursor: pointer; //小手
cursor: progress; //箭头加转圈
cursor: crosshair; //十字架
cursor: wait; //转圈
9、隐藏
给父元素加,去掉子元素溢出的部分
overflow: hidden; //让超出的部分隐藏起来
10、透明
opacity: 0.1; //让整个元素透明 (取值0~1)
11、伪类
鼠标移上去会变化
.a:hover{
background: red;
}
12、去除 li 标签前面的点
list-style: none;
13、文字加阴影
text-shadow: 3px 2px 4px #ffffff; //水平阴影的位置 垂直阴影的位置 模糊距离 阴影颜色
14、文字之间间距
letter-spacing: 1px;
15、盒子阴影
box-shadow: 4px 3px 3px #000000; //水平阴影的位置 垂直阴影的位置 模糊距离 阴影颜色
鼠标点上去有阴影部分
没点的时候:
点击后:
.content1 .list li .item .mask{ //用一个mask div和 li 标签大小一样,背景颜色设置透明,然后隐藏。
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(255, 255, 255, 0.3);
display: none;
}
.content1 .list li .item:hover .mask{ //点击之后显示
display: block;
}
没有宽度还能让其居中
display:table;
margin: auto;
去掉图片底边三像素
img{
vertical-align: middle;
}
原图:
去掉后:
强制改变优先级
后面加 !important
background: greenyellow !important;
1.顺序选择器
简化取名字,可省略 class(input 除外,其他都可以)
ul li:nth-child(1){ //第一个 li
background: gold;
}
ul li:nth-child(2){ //第二个 li
background: green;
}
注意 : a 要这样写
ul li:nth-child(1) a{
background: gold;
}
ul li:nth-child(2) a{
background: green;
}
2.属性选择器
除过 class 其他属性都可以。
form input[type="text"]{
border: solid 1px palegreen;
}
form input[type="password"]{
background: gold;
}