HTML+CSS
1、HTML和CSS定义
<!DOCTYPE HTML> <html> <!--html超文本标记语言 超指的是超连接和图片视频音频等不是文字的资源，文本是文字，标记是标签或元素--> <head> <title> New Document </title> <meta name="Generator" content="EditPlus"> <meta charset = "utf-8"> <!-- 1、因为写代码的时候，用的是utf-8的编码，而浏览器默认用系统GBK编码解析
，只有告诉浏览器用utf-8解码，才不会出现乱码--> <!--ANSI自动匹配系统字符集 --> <!--CSS 层叠样式表， 层叠是多个样式成表--> <!--内部样式，只能在本页面中用；style标签中是css代码，无法使用HTML标签 --> <style type="text/css"> p /*选择器*/ { /*声明块*/ color:red; font-size: large; } /*这是css注释*/ /* CSS语法 选择器：选择页面中的指定标签 声明块：一组键值对，使用分号隔开 */ </style> <!--外部样式，可以供外部页面使用--> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <h1>zhe </h1> <!--这是内联样式，只对当前标签有效--> <p style= "color:red; font-size:40px;">你好</p> <p >你好</p> </body> </html>
2、块元素和内联元素
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 块元素：div，p，h1-h5 内联元素（行内元素）：span，a div和span没有语义，只是用来选中，设置样式，用于布局； 块元素包裹内联元素 a标签可以包含任何元素，除其本身 p内不可放块元素 --> <div style="background: red;">这是一个块元素，独占一行</div> <div style="background: yellow;">这是一个块元素，独占一行</div> </body> </html>
3、选择器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style type="text/css"> /* 通配选择器：选中页面中所有元素 *{} 某一元素全部： 元素、标签选选择器:改变所有选中的标签，改变其属性 p{ color：red； } */ /* 一个： id选择器：通过ID属性值选中一个元素 语法： #id{ } #p1{ color:yellow; } */ /*一组： 类选择器：通过class选中一个元素,class可以实现id选择器 语法： .class{ }*/ /* 选择器分组：（并集选择器） 任意一个元素满足 选择器1，选择器2、、、选择器n{ color:yellow; } 选择器复合：（交集选择器）同时满足多个选择器的元素 选择器1选择器2、、、选择器n{ } */ span.spancls { /*标签选择器+类选择器，在类选择器中选中一个span的元素，为标签为span且有spancls类型的元素设置背景色为红色*/ background: red; } p#p1{ /* 标签选择器+ ID选择器 #p1已经可以唯一确定一个元素了，无需选中交集选择器*/ background: yellow; } </style> </head> <body> <p>锄禾日端午</p> <p>锄禾日端午</p> <p id = "p1">锄禾日端午</p> <p class="cls1 cls2">锄禾日端午</p> <!--一个元素可以设置多个class属性值，用空格隔开--> <span class="spancls">锄禾日端午</span> <p>锄禾日端午</p> <p>锄禾日端午</p> </body> </html>
4、后代选择器
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
后代选择器用得比较多，子元素选择器用的比较少
后代元素选择器 是所有的后代元素，包含儿子，孙子，曾孙
语法：祖先元素 后代元素{
}
为div下的所有的span设置一个背景色为绿色*/
div span{
background: green;
}
/*
子元素选择器 （IE 6 以下不支持）
语法： 父元素 > 子元素 {
}
为div下一层的span设置一个背景色为蓝色*/
#d1 > span{
background: blue;
}
/*为div下p下的span设置一个背景色为红色*/
#d1 p span{
background: red;
}
</style>
</head>
<body>
<div id ="d1">
<span>hhhh</span>
<p>
<span>tttt</span>
</p>
</div>
<div>
<span>hhhh</span>
</div>
<span>gggggg</span>
</body>
</html>
5、伪类选择器
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 伪类专门用来表示元素的一种特殊状态 */ a:link{} 没有访问过的 a:visited{} a:hover{} a:active{} hover和active也可以用于其他元素 p:hover{} p:active{} 修改input文本框中的颜色 input:focus{ background: yellow; } p::selection{ background: red; } 伪元素用来表示元素中的一些特殊位置
为p的第一个字符设置一个特殊样式 p:first-letter{ background: black; } p:first-line{ background: black; } p:before{ content:"我会出现在p的最前面"； } /* 子元素的伪类： child是所有的子元素中找 type是所有子元素且是当前类型中找 */ p:first-child{ firstchild 是p元素父元素的第一个子元素p } p:nth-child(2){ nth-child 是p元素父元素的第2个子元素p } p:nth-child(even / odd){ nth-child 是p元素父元素的第2个子元素p } p:first-of-type{} p:last-of-type{} p:nth-of-type(2){} /* 属性选择器*/ p[title]{ background: yellowgreen; } p[title="属性值"]{ } 选择以title属性值ab开头的元素 p[title^="ab"]{ } 选择以title属性值ab结尾的元素 p[title$="ab"]{ } 选择以title属性值包含ab的元素 p[title*="ab"]{ } /* 兄弟选择器： span + p{}选中后一个兄弟元素的选择器 span ~ p{} 选中后所有兄弟元素的选择器 */ /* 否定伪类： p:not(.cls){} 除去所有p中带有类选择器.cls的p标签 */ </style> </head> <body> <a href="www.baidu.com">baidu</a> <p title="鼠标放在上面的文字"> 我是一个p</p> <span>哈哈哈哈</span> <p > 我是一个上面span的后一个兄弟</p> </body> </html>
6、选择器的优先级
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> /* 选择器的优先级 可以在样式后加！important， 表示此样式优先级最高，但尽量避免使用 优先级 ： 1000 > 100 >10 > 1 >0 >-1 内联元素（行内元素） > ID选择器 > 类和伪类选择器 > 元素选择器 > 通配 > 继承下来的样式 style > #id > .p p:hover > p > * > 继承下来的样式 1、 p#p2{ 交集选择器 优先级： p#p2 > #p2 >p } 2、 优先级靠后使用 p1,p2,p3{ 并集选择器 无影响，相互独立 } 3、伪类的优先级 四个优先级都一样，但是后面会覆盖前面的伪类，按照以下顺序写 a:link a:visited a:hover a:active */ </style> </head> <body> <a href="www.baidu.com">baidu</a> <p style="font-size: 45px"> 我是一个p <span>哈哈哈哈</span> <!--span会继承p的样式，但，边框定位背景样式不会被继承--> </p> <p > 我是一个上面span的后一个兄弟</p> </body> </html>
7、文本标签
<body> <!--文本标签--> <em></em> 有语义：强调语气 <i></i> 无语义 <strong></strong> 有语义：加强语气 <b></b> 无语义 <small></small> 有语义：合同中的小字 版权声明@ <cite></cite> 有语义： 参考引用，书名，歌名 <q></q> 有语义：行内引用，加引号 <blockquote> </blockquote> 块级引用 <sub></sub> <sup></sup> <ins></ins> 有语义：插入内容，添加下划线 <del></del>有语义：删除内容 <pre> 预格式标签，可以保存多个空格，保留代码格式 </pre> <code> 语义标签，不会保留空格和格式 </code> <!--列表标签--> 是块元素 无序列表 <ul type="circle | disc | square"> <li></li> <li></li> </ul> 有序列表 <ol> <li></li> <li></li> </ol> 定义列表 <dl> <dt></dt> <dd></dd> </dl>
8、长度和颜色单位
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> 长度单位： px：一个像素就是屏幕中一个点 1366*360 意思是1366个点，高360个点 显示效果越清晰，单位面积内的像素点越多，像素点就越小 同样12px大小的字体，在手机由于像素点小，字体也会变小，模糊 在手机中会把12px * 4 来显示，所以高清屏中，字体会变小，清晰 百分比： 百分比是针对其父元素的百分比，可以动态随着父元素变化 em： 和百分比类似，是相对于当前元素的字体大小，一个字体大小单位的倍数 1em = 1 font-size if font-size =100px then 2em=200px 颜色单位： 1.用单词表示 red green 2.用RGB三种颜色的不同比例来表示 rgb(红色浓度，绿色浓度，蓝色浓度) 取值形式：1、数字 0-255 2、百分比 3、16进制表示 三组两位的二进制表示 语法： #红色绿色蓝色 像素中三组中两位都重复的颜色可以简写 红色： #FF0000 简写为：#f00 #abc 等价于 #aabbcc </style> </head> <body div.box +tab 可以生成以下内容 <div class="box"></div> div#box +tab 可以生成以下内容 <div id="box2"></div> </body> </html>
9、文本和字体样式
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
字体样式
p{
color: red;
font-size: 30px; //设置文字框框的大小，不是文字本身的大小，字体大小要小于30px
font-family: Arial, 微软雅黑" ; //字体先使用arial，没有arial就使用微软雅黑，计算机中再没有就默认
//一般用一些常用的字体，避免用户电脑中没有该字体
font-family: Arial, "微软雅黑",serif ;
字体分类：（字体分类一般放在最后，终极备胎）
serif{衬线字体}
sans-serif（非衬线字体）
monospace（等宽字节）
cursive（草书字体）
fantasy（虚幻字体）
font-style:normal| italic;
font-weight: normal |bold;
font-variarant:
}
p1{ //简写，解析效率高 ，但像素和字体必须写在末尾，顺序不能颠倒
font: italic bold 60px/50px "微软雅黑"; //可以用font统一设置font-XXXX的样式 60px是字体大小，50px是行高
line-height: 100%; 1、100px；2、百分比 3、数值 ：字体font大小的倍数
}
div{
height: 200px;
line-height: 200px; // 行高和父元素的div的高度一样，可以设置成垂直居中
}
文本样式
p2{
text-transform: capitalize;
text-decoration: red;
}
a{
text-decoration: none; //去掉超链接的下划线
}
p{
letter-spacing: normal;
word-spacing: 3px;
}
p{
text-align: justify;
text-indent: 2em; //往前缩进2个字
}
</style>
</head>
<body
div.box +tab 可以生成以下内容
<div class="box"></div>
div#box +tab 可以生成以下内容
<div id="box2"></div>
</body>
</html>
10、盒子模型
<style>
盒子模型
1、一个元素标签都包含在一个不可见的盒子里
2、网页布局就是布局盒子
组成部分：
内容区：content 盒子的子元素
内边距：padding
边框：border
外边距：margin
.box{
/*盒子内容区的高宽，不是盒子大小*/
width: 100px;
height: 100px;
/*边框必须设置宽度、样式、颜色三个样式,因为有默认值*/
border-color: red orange green khaki; 上右下左
border-width:10px 20px 30px 40px ; //上右下左
border-style: solid;
/*简写*/
border: solid red 10px;
border-bottom: 12px;
}
.box{
/*背景会影响内边距*/
padding: 10px ;上右下左
padding: 10px 10px; 上下 左右
padding: 10px 10px 25px; 上 下 左右
padding: 10px 20px 35px 40px; 上右下左
padding-left: 23px;
}
外边距是指盒子和盒子或者父元素的内边距的距离
外边距可以为负数，两个盒子可以重叠
页面中的标签默认是往左往上靠
margin-left：auto； 自动左外边距为最大
{
margin-left：auto； 左右外边距都auto就居中
margin-right：auto；
}
简写： marigin：0 auto; 上下 0 左右 auto
如果兄弟元素之间的盒子在“垂直”方向上的“相邻”，则外边距会重叠，会取盒子外边距中的最大值
如果父子元素之间的盒子在“垂直”方向上的“相邻”，则会把子元素设置的外边距给父元素
不需要就不相邻，可以设置border和padding就不相邻了
浏览器在页面没有样式时，很多标签会使用默认样式
*{ 除去默认边距
margin: 0;
padding: 0;}
</style>
11、内联元素
<style>
内联元素 内联（行内）span，a 元素没有宽高 width height ，不起作用 内联元素 垂直方向的内边距不影响布局，会层叠 内联元素 水平方向的内边距影响布局，会挤兑 内联元素 水平方向的外边距影响布局，会挤兑，求和 内联元素 垂直方向的外边距不影响布局，不起作用 总结：水平方向有效果，垂直方向没有效果 内联元素不支持宽高 通过display样式可以改变元素的类型 inline：当成一个内联元素使用 block：把内联元素变成块元素，可以独占一行 inline-block:将一个元素转换成行内块，既有行内元素的特点，又有块元素的特点，既可以设置宽高，又不回独占一行 none：不显示，不占据位置 使用 visibility可以设置元素隐藏和显示 visible：默认显示 hidden：不显示元素，但占据位置 overflow 子元素会默认在父元素的内容区，子元素长度超过父元素则会溢出，在父元素外面显示 可以通过overflow处理溢出： visble：默认值，没有任何处理 hidden：溢出内容不会显示 scroll：无论是否溢出都会出现滚动条 auto：溢出的时候自动添加滚动条，不溢出则不加 素在文档流中高度和宽度默认只占自身元素大小 </style>
12、文档流
文档流
处在网页的最底层，我们所创建的元素默认就在文档流中
元素在文档流中的特点：
块元素：
1、块元素在文档流中是自上向下排列，且独占一行
2、块元素在文档流中默认宽度是父元素的100% auto，自动修正
3、块元素在文档流中默认高度是子元素的内容大小
内联元素：行内元素内联元素不支持宽高
1、内联元素在文档流中默认只占自身元素大小，从左往右排列、
如果一行无法容纳所有元素，会换行
2、内联元素在文档流中的宽度和高度默认是子元素的内容大小
13、浮动
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
/*display: inline-block; 此种方法会有空隙*/
/*在文档流中，子元素如果没有脱离文档流，会默认占父元素的100%
浮动后，脱离文档流后，就会被其内容撑开
内联元素在文档流中设置宽度和高度无效，脱离文档流后可以设置
任何元素脱离文档流后都会变成块元素
*/
height: 200px;
background-color: green;
}
.box2{
width: 200px;
height: 200px;
background-color: lavender;
}
/*1、块元素在文档流中默认垂直排列
2、如果希望块元素水平排列，可以使块元素脱离文档流，使用float
none：默认值，元素会在文档流中排列
left：元素脱离文档流，在文档流上层向左上方向浮动，直到父元素的边框或者其他浮动元素
right：元素脱离文档流，在文档流上层向右上方向浮动，直到父元素的边框或者其他浮动元素
浮动元素上面如果是块元素，块元素是一堵墙，则浮动不上去
浮动元素不会超过其兄弟元素
浮动元素不会盖住文字内容，会自动环绕文字周围
*/
</style>
</head>
<body>
<div class="box1">
</div>
<div class="box2">
</div>
</body>
</html>
14、解决高度塌陷的问题
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.box1{
border: 10px solid red;
/*解决高度塌陷的方案一：*/
/*display: inline-block; 此方法会淹没宽度*/
/*float: left; 此方法父元素下面的兄弟元素会上移*/
/*overflow: hidden; auto scroll 三者都可以*/
/*overflow: auto;*/
}
.box1-child{
background-color: green;
height: 200px;
width: 100px;
float: left;
}
.box2 {
background-color: yellow;
height: 100px;
}
.clear{
clear: both;
/*clear:清楚其他浮动元素对当前元素的影响，回到原来的位置*/
/*none：默认，不清楚浮动*/
/*left：清楚左侧浮动元素对当前元素的影响*/
/*right：清楚右侧浮动元素对当前元素的影响*/
/*both：清楚两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素*/
/*解决高度塌陷的方案二：*/
/* 可以在高度塌陷的父元素下，添加一个空白的div*/
/* 由于这个div没有浮动，可以通过它来撑开父元素*/
/* 基本没有副作用*/
/* 但会添加多余的结构div，不符合表现与形式分开的思想*/
}
/*解决高度塌陷的方案三： 最佳方案*/
/*通过after伪类向子元素后添加一个空白的块元素，对齐清除浮动*/
/*这样做的效果和解决方案二中添加一个div的原理一样，*/
/*而且不会在页面中添加多余的div*/
.clearfix:after{
/*通过CSS添加一个空白内容*/
content: "";
/*转换成块元素*/
display: block;
/*清除两侧浮动*/
clear: both;
}
</style>
</head>
<body>
<!--文档流中，父元素默认是被子元素撑开的
但是当子元素浮动时，父元素就无法被其子元素撑开，会变成一条线
父元素下面的兄弟元素也会往上挤
我们可以设置父元素的高度，避免塌陷问题，但是高度一定时，父元素就无法随子元素的高度变化而变化
根据W3C，在页面中，元素都有一个隐含的属性，block formating content
简称BFC，该属性默认是关闭的
开启BFC后：（IE 6不支持BFC,开启 has layout ---zoom:1;只在IE中有效）
1、父元素的外边距不会和子元素重叠
2、开启的BFC的父元素不会被浮动元素所覆盖
3、开启的BFC的父元素可以包含浮动的子元素
开启BFC的方式：
1、设置父元素浮动
2、设置元素的绝对定位
3、设置父元素inline-block
以上3中方式都有副作用
4、设置父元素的overflow为hidden
-->
<div class="box1 clearfix">
<div class="box1-child "></div>
<!-- <div class="clear"></div>-->
</div>
<div class="box2">
</div>
</body>
</html>
15、定位
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> 定位：任意位置摆放元素，通过postion属性实现 可选值： static：默认值。元素没有开启定位，非static值就开启了定位 relative：相对定位， 1、通过left，right，top，bottom 设置元素的偏移量 （相对于原来在文档流中位置（自身元素）的偏移量） 2、相对定位的元素不会脱离文档流，其原来的位置还会被占据，但会使元素提升一个层级 3、如果有重叠，定位元素会覆盖文档元素 4、 通常只需要两个偏移量即可定位 5、相对定位不会改变元素的属性，块元素依旧是块元素，内联元素依旧是内联元素 absolute：绝对定位 1、开启绝对定位后会脱离文档流，会有一个默认的top 和left，其值是它本身元素相对于浏览器窗口的位置 2、开启绝对定位后，若没有设置偏移量，则元素的位置不会发生变化 3、绝对定义是相对于离他最近的开启了定位的祖先元素进行定位的 （一般情况下，开启了绝对定位的子元素，也会相对应的开启起父元素的定位） （如果所有的祖先元素都没有开启定位，会相对于浏览器的窗口进行定位） 4、绝对定位会提升元素的一个层级 5、绝对定位会改变元素的性质 内联元素会变成块元素，块元素的宽度和高度默认都被内容撑开 fixed：固定定位 1、固定定位也是一种绝对定位，有绝对定位的特性 2、固定定位会永远相对于浏览器窗口 3、固定定位会固定在某个位置不动， 不会随滚动条滚动 元素的层级：如果定位元素是一样的，则文档后面的元素会覆盖文档前面的元素 可以通过z-index设置层级，同一等级的兄弟元素，层级越高，越优先显示 子元素无法盖住父元素 opacity： 用0-1的值，设置透明程度， IE8以及以下的版本不支持opacity，可以使用filter：alpha .box1{ width: 200px; height: 200px; background-color: red; } .box2{ width: 200px; height: 200px; background-color: grey; position: absolute; left: 5px; top:67px; } .box3{ width: 200px; height: 200px; background-color: yellow; } </style> </head> <body> <div class="box1"></div> <div class="box2"></div> <div class="box3"></div> </body> </html>
16、hack
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*css hack 不建议使用，不到万不得已就不用*/
body{
background-color: yellow;
/*属性hack*/
/*下面样式只在IE6下有效*/
_background-color: grey;
/*下面样式只在IE7及以下的浏览器有效*/
*background-color: red;
}
</style>
</head>
<body>
<!-- 有一些解决兼容性的代码只需在一些特定浏览器里运行，而不需要在其他浏览器中执行-->
<!-- 可以使用CSS的hack-->
<!-- 条件hack只对ie浏览器有效，其他浏览器识别成注释-->
<!-- [if IE 6]>
<p>本条文字只在IE6中显示</p>
<![endif]-->
<!-- [if IE lt 9]>
<p>本条文字只在IE9以下的浏览器中显示</p>
<![endif]-->
</body>
</html>
