1.行标签和块标签
行标签:默认不会占据一整行的标签,内容有多宽,就占据多宽 b font s u
块标签:就是该标签默认会占据一行的标签 h1 hr ul li
行内块标签:具有一些行标签和块标签的特点 button
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><!-- 行标签:默认不会占据一整行的标签,内容有多宽,就占据多宽 b font s u块标签:就是该标签默认会占据一行的标签 h1 hr ul li行内块标签:具有一些行标签和块标签的特点 button--><h1>这是一个标题标签</h1> <b>后面的标签</b><ul><li>asdfasfasf</li><li>asdfasfasf</li><li>asdfasfasf</li><li>asdfasfasf</li><li>asdfasfasf</li><li>asdfasfasf</li></ul><font size="4" color="">这是行标签</font><font size="4" color="">这是行标签</font><font size="4" color="">这是行标签</font><b>这也是行标签</b></body></html>
2.纯净的行标签和块标签
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!-- 纯净的块标签: div 就是这个标签,是一个纯净的块标签,所谓纯净,就是该表签,不带任何样式,默认,没有背景颜色,没有字体大小,没有高度等待一些样式 正是因为他纯净,我们才会配合CSS来设置他的样式纯净的行表签: sapn 是一个行标签,不带有任何样式,我们在设置文本样式时,可以使用它来配合CSS 来设置文本的样式--><h1>阿三发射点发射点发</h1><div>asdfasdfasdfasdf</div><div>asdfasdfasdfasdf</div><div>asdfasdfasdfasdf</div><div>asdfasdfasdfasdf</div><div>asdfasdfasdfasdf</div><div>asdfasdfasdfasdf</div><b>asfasdfasdfasfasfsaf</b><s>asdfasdfasdfasdfasdfsaf</s><u>asdfasdfasdfasdfasdfasdfasfd</u><span>asdfasfasdfasdfasdfasdfs</span><span>asdfasfasdfasdfasdfasdfs</span><span>asdfasfasdfasdfasdfasdfs</span><span>asdfasfasdfasdfasdfasdfs</span><span>asdfasfasdfasdfasdfasdfs</span><span>asdfasfasdfasdfasdfasdfs</span></body></html>
3.CSS的概念
1.实现了样式和html的代码分离。
2.弥补html对属性的的控制不足。
3.精确的控制页面的布局。
4.可以提高页面的执行效率。
5.css还有特殊的功能。
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><!-- CSS:英文全称:Cascading Style Sheets,层叠样式表,作用就是来修饰HTML表签所展示的样式,使表签的样式展示更加丰富,HTML表签自带的样式以及属性,不能满足我们丰富的样式要求那么我们可以使用CSS来做,因为他有大量丰富的样式来满足我们的需求,一旦我们学习了CSS 就很少使用表签自带的属性来调整样式了。这个表签展示成什么样子,那就交由CSS来控制 --><font size="7" color="red">表签自带的属性来控制样式</font><span style="font-size: 30mm;color: green">CSS来控制这行文本的样式</span></body></html>
4.CSS和HTML的结合方式
1.内联样式,就是把CSS代码,写到HTML表签的内部,每一个HTML表签,都有一个style 这个属性,那这个属性的值,就是CSS代码
缺点:一次只能控制一个表签的样式,复用性差,书写凌乱
<span style="css属性名:值;css属性名:值;css属性名:值">aasdfasdf</span>
<font style="css属性名:值;css属性名:值;css属性名:值">asfasfasfasfasd</font>
2. 内部样式:在HTML页面上head表签内部 提供style表签,然后配合选择器,控制一个和多个表签的展示样式
选择器:选中一个或多个表签的语法 优点,可以提高CSS代码的复用性,缺点,只能控制一个HTML页面的展示样式
3.外部样式:将CSS代码单独写到要给文件中,可以一次控制一个或多个页面的展示样式,大大提高了CSS代码的复用性,开发首选 -->
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#bb {color: aqua;font-size: 100px;}h1{color: gold;}</style></head><body><!-- CSS和HTML的结合方式1.内联样式,就是把CSS代码,写到HTML表签的内部,每一个HTML表签,都有一个style 这个属性,那这个属性的值,就是CSS代码缺点:一次只能控制一个表签的样式,复用性差,书写凌乱<span style="css属性名:值;css属性名:值;css属性名:值">aasdfasdf</span><font style="css属性名:值;css属性名:值;css属性名:值">asfasfasfasfasd</font>2. 内部样式:在HTML页面上head表签内部 提供style表签,然后配合选择器,控制一个和多个表签的展示样式选择器:选中一个或多个表签的语法 优点,可以提高CSS代码的复用性,缺点,只能控制一个HTML页面的展示样式3.外部样式:将CSS代码单独写到要给文件中,可以一次控制一个或多个页面的展示样式,大大提高了CSS代码的复用性,开发首选 --><font style="color: red;font-size: 30px;font-family: 楷体;">内联样式,就是把CSS代码,写到HTML表签的内部,每一个HTML表签,都有一个style这个属性,那这个属性的值,</font><span style="color: green;font-size: 30px;font-family: 楷体;">内联样式,就是把CSS代码,写到HTML表签的内部,每一个HTML表签,都有一个style这个属性,那这个属性的值,</span><b id="bb">阿三发射点发射点发射点</b><h1>啊手动阀手动阀</h1><h1>啊手动阀手动阀</h1><h1>啊手动阀手动阀</h1><h1>啊手动阀手动阀</h1><h1>啊手动阀手动阀</h1><h1>啊手动阀手动阀</h1><h1>啊手动阀手动阀</h1><h1>啊手动阀手动阀</h1></body></html>
外部样式:
a.css:
h1{color: red;}
b.css:
h1{color: #FFD700;}
public.css:
body{background: greenyellow;}
a.html:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><!-- 引用css文件 --><link rel="stylesheet" type="text/css" href="css/public.css"/><link rel="stylesheet" type="text/css" href="css/a.css"/></head><body><h1>A页面</h1></body></html>
b,html:
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/public.css"/><link rel="stylesheet" type="text/css" href="css/b.css"/></head><body><h1>B页面</h1></body></html>
5.id选择器
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* id 选择器 前面使用 #id选择器,一次只能选中一个表签,进行样式的控制*/#myh1 {color: red; font-family:'楷体';font-size:20px;}#mydiv{color: red;font-family:'楷体';font-size:20px;/* 加粗 100---900 bolder bold */font-weight:bold; }</style></head><body><!-- 注意每个表签的 id值时唯一的,不能有重复的 --><h1 id="myh1">阿斯顿发射点法大师傅</h1><div id="mydiv">纯净的div表签</div></body></html>
6.class选择器
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* class 选择器 以 点开头 可以选择多个表签进行控制 */.myh{color: red;}#one{font-size: 10px;}</style></head><body><!-- classs属性值,多个表签可以一样 --><h1 class="myh" id="one">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><h1 class="myh">阿斯顿发生发生大</h1><font class="myh">adsffffffffffffff</font></body></html>
7.标签名选择器
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 表签名选择器,根据表签名称来选择 ,可以选中多个表签 */h1{color: #00FFFF;}li{color: #FF0000;}</style></head><body><h1>阿斯顿发射点发生</h1><h1>阿斯顿发射点发生</h1><h1>阿斯顿发射点发生</h1><ul><li>adsfadsfdsaf</li><li>adsfadsfdsaf</li><li>adsfadsfdsaf</li><li>adsfadsfdsaf</li></ul></body></html>
8.包含选择器
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 包含选择器 层层往里面选择*/#d1 ul li a{font-size: 30px;}#d2 ul li a{font-size: 50px;}</style></head><body><div id="d1"><ul><li><a id="mya" href="#">adsfadsfadsfadsfds</a></li><li><a href="#">adsfadsfadsfadsfds</a></li><li><a href="#">adsfadsfadsfadsfds</a></li><li><a href="#">adsfadsfadsfadsfds</a></li><li><a href="#">adsfadsfadsfadsfds</a></li></ul></div><div id="d2"><ul><li><a id="mya" href="#">adsfadsfadsfadsfds</a></li><li><a href="#">adsfadsfadsfadsfds</a></li><li><a href="#">adsfadsfadsfadsfds</a></li><li><a href="#">adsfadsfadsfadsfds</a></li><li><a href="#">adsfadsfadsfadsfds</a></li></ul></div></body></html>
9.通配符选择器
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 全局统配,可以选中所有表签 */* {color: #ADFF2F;}/* 局部统配 */#d2 h1 *{color: #FFD700;}</style></head><body><h1>啊手动阀手动阀</h1><h2>啊的说法都是帆帆帆帆帆帆帆帆</h2><font>啊多发点是否</font><div id="">adsfasfadsfsf</div><div id="d2"><h1><ul><li>adfasdfdsf</li><li>adfasdfdsf</li><li>adfasdfdsf</li><li>adfasdfdsf</li></ul><ol><li>adfasdfdsf</li><li>adfasdfdsf</li><li>adfasdfdsf</li><li>adfasdfdsf</li></ol></h1></div></body></html>
10.伪类选择器
1.未连接 a:link
2.已经访问链接 a:visited
3.进入链接 a:hover
4.激活(按下)状态 a:active
其中的hover 和active 可以用于其他控价
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 伪类选择器,是针对 a 表签的四种状态来进行选择的链接状态鼠标移上状态鼠标按下状态链接访问过后的状态*//* 链接状态 */a:link {color: #FFD700;/* 去掉a标签的下划线 */text-decoration:none;}/* 鼠标移上状态 */a:hover {font-size: 30px;color: aqua;/* 去掉a标签的下划线 */text-decoration: none;}/* 鼠标按下状态 */a:active {color: #FF0000;/* 去掉a标签的下划线 */text-decoration: none;}/*链接访问过后的状态 */a:visited {color: brown;/* 去掉a标签的下划线 */text-decoration: none;}</style></head><body><a href="a.html">跳到a页面</a><a href="b.html">跳到b页面</a></body></html>
11.伪类选择的鼠标悬浮和按下状态对其他标签也起作用
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#d1{height: 200px;width: 200px;background-color: #00FFFF;}/* 鼠标悬浮 */#d1:hover{height: 300px;width: 300px;background-color:red;}/* 鼠标按下 */#d1:active{background-color:yellow;}</style></head><body><div id="d1"></div></body></html>
12.选择器优先级
在页面中同一个html元素有不同的选择器定义样式的。
1、id选择器最高 2、类选择器 3、标记选择器
!important>内联样式>id选则器>class选则器>标签选择器
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 多个选择器,选中了同一个表签,如果他们控制的样式没有冲突,就叠加生效如果多个选择器控制同一个表签的样式,有冲突呢? 那听哪个选择器的呢?根据选择器的优先级来决定!important>内联样式>id选择器>class选择器>标签名选择器*/#myh1{color: red;}.aa{background-color: #ADFF2F;color: #FFFF00;}h1{/* !important 让此样式的优先级最高*/color: blue !important;font-size: 100px;}</style></head><body><h1 id="myh1" class="aa" style="color: pink;">阿斯蒂芬撒地方</h1></body></html>
13.子选择器
div >p{
意思是 div 里面所有的子标签p 都被会选中 注意对孙子标签是不起作用的
}
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#fu>h1 {color: red;}#fu2>h1 {color: yellow;}div h1 {background-color: gainsboro;}</style></head><body><div id="fu"><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h2>22222222</h2><h2>22222222</h2><h2>22222222</h2><h2>22222222</h2><h2>22222222</h2></div><div id="fu2"><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h1>阿斯顿发射点发大水</h1><h2>22222222</h2><h2>22222222</h2><h2>22222222</h2><h2>22222222</h2><h2>22222222</h2></div></body></html>
14.相邻选择器
div +p{
意思是选择跟我 div 同级的下一个挨着的p元素(单个的p 后面在跟p是选不中的) 如果在div 和p 之间隔着一个元素 那是选不中的
}
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#one {height: 200px;width: 200px;/* 边框:粗细,边框颜色,线条样式 solid 实线 */border: 1px black solid;background-color: #FF0000;}/* + 相邻选择器 */#one+div {height: 200px;width: 200px;/* 边框:粗细,边框颜色,线条样式 solid 实线 */border: 1px black solid;background-color: blue;}#one:hover +div{background-color:yellow;}</style></head><body><div id="one">1111</div><div id="two">2222</div></body></html>
15.相邻所有选择器
div ~p{
意思是 选中 div 后面所有同级的p元素 即使多个p 元素 之间有隔着的其他元素 也是能选中p元素
}
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">#d1 {height: 200px;width: 200px;/* 边框:粗细,边框颜色,线条样式 solid 实线 */border: 1px black solid;background-color: #FF0000;}/* ~ 相邻所有选择器 */#d1~div {height: 200px;width: 200px;/* 边框:粗细,边框颜色,线条样式 solid 实线 */border: 1px black solid;background-color: blue;}#d1:hover ~div{background-color: #FFFF00;}</style></head><body><div id="d1">1111</div><div id="" class="mydiv">00000</div><div id="" class="mydiv">00000</div><div id="" class="mydiv">00000</div></body></html>
16.属性选择器
a[title] { 意思是选中 a标签 里面只要有 title 这个属性的 都会选中 }
a[title=num1] 意思是选中 属性title=num1 的a 标签
a[title^=num] 选中title的属性值以num 开头的a标签
a[title$=num]选中title的属性值以num 结尾的a标签
a[title|=num] 选中title的属性值以num-连接的a标签 如<a title=“num-ai”>
a[title~=num] 选中title的多个属性值以 空格隔开的 有其中一个属性值都能选中 例如<a tilte=“num num2 num3”> 三个属性值你任意选一个都能选中 比如a[title~=num2] 和 a[title~=num3] 选中的其实是同一个标签
a[title*=num] 选中title属性值 包含num的都能选中 例如<a title=“mynumaaaa”>
a[title=num][name=lisi] 多个属性选择 意思 是选中 title=num 并且 name=lisi 的这个a标签 <a title=“num” name=“lisi”>
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 属性选择器 */[align] {color: red;}h1[align='left'] {background-color: green;}</style></head><body><h1 align="center">111111</h1><h1 align="left">111111</h1><h1 align="right">111111</h1></body></html>
17.过滤选择器(其他伪类选择器)
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">p{font-size: 30px;font-weight: 900;}p::first-letter{font-size:50px;color: red;}p::first-line{background-color: #DCDCDC;}</style></head><body><p>像我这样优秀人的,本该灿烂过一生<br>像我这样默默无闻的人,世上还有多少人</p></body></html>
18.页面定位
元素的定位方式有相对定位和绝对定位两种方式
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 页面的原点位置,在左上角,第一个元素,就会跑到原点位置页面元素默认使用的定位方式是相对定位相对定位:第一个元素在原点位置,后面的元素参数他前面的元素绝对定位:元素之前不参考,所有元素只参考原点位置。*/button{/* 元素的定位方式:relative 相对定位,默认值 absolute 绝对定位*/position:relative;}</style></head><body><button type="button">一个按钮</button><button type="button">两个按钮</button><button type="button">三个按钮</button></body></html>
19.相对定位时元素之间的间距
相对定位设置四个方向的间距
margin-right: 20px;
margin-top: 50px;
margin-bottom: 200px;
margin-right: 20px;
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div{position: relative;width: 200px;height: 200px;border: 1px black solid;}/* 相对定位:设置四个方向的间距margin-right: 20px;margin-top: 50px;margin-bottom: 200px;margin-right: 20px; */#d1{background-color: red;margin-left: 120px;}#d2{background-color: #0000FF;margin-top: 50px;margin-bottom: 200px;margin-right: 20px;}#d3{margin-top: 150px;background-color: #FFFF00;}</style></head><body><div id="d1">11111</div><div id="d2">2222</div><div id="d3">3333</div></body></html>
20.绝对定位设置间距
top:50px;
left:100px;
right: auto;
bottom: auto;
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">div{position: absolute;width: 200px;height: 200px;border: 1px black solid;}/* 绝对定位,设置元素距离原点位置:top:50px;left:100px;right: auto;bottom: auto;*/#d1{top:50px;left:100px;right: auto;bottom: auto;background-color: red;}#d2{top:80px;left:120px;background-color: #0000FF;}#d3{top:150px;left:200px;background-color: #FFFF00;}</style></head><body><div id="d1">11111</div><div id="d2">2222</div><div id="d3">3333</div></body></html>
21.行标签块标签行内块标签对CSS样式的不同之处
行标签,设置上下间距不生效,设置左右间距是生效的
行内块标标签:设置上下左右间距是生效的
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 块标签,对设置上下左右的间距是生效的 */h1{margin-top: 50px;margin-left: 50px;}</style></head><body><!-- 行标签,设置上下间距不生效,设置左右间距是生效的。 --><b style="margin-left: 200px;margin-top: 500px;">这是个行标签</b><h1>这是个块标签</h1><!-- 行内块标标签:设置上下左右间距是生效的, --><button type="button" style="margin-left: 150px;margin-top: 500px;">按钮</button><button type="button">按钮</button><button type="button">按钮</button></body></html>
22.行元素块元素行内块元素之间的转换
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">h1{/* 把块元素,转换成行元素 */display: inline;}span{/* 把行元素,转换成块元素 */display: block;margin-top: 100px;}h2{/* 把块元素,转换成行内块元素 */display: inline-block;margin-top: 300px;}div{height: 300px;width: 300px;background-color:red;/* none 可以隐藏块元素 */display: none;}</style></head><body><h1>啊多发点是否</h1><h1>啊多发点是否</h1><span>asfasdfadsfasdf</span><span>asfasdfadsfasdf</span><span>asfasdfadsfasdf</span><span>asfasdfadsfasdf</span><h2>asdfasfasffsasddddddddddddddddddd</h2><h2>asdfasfasffsasddddddddddddddddddd</h2><h2>asdfasfasffsasddddddddddddddddddd</h2><h2>asdfasfasffsasddddddddddddddddddd</h2><div id="d1"></div></body></html>
23.层的浮动
浮动:可以使块标签,一字排开 float: left
clear: left; 清除左浮动
clear: both; 清除左右浮动
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">/* 浮动:可以使块标签,一字排开 float: left;*/#d1{height: 300px;width: 300px;background: red;float: left;}#d2{height: 300px;width: 300px;background: green;float: left;}#d3{height: 300px;width: 300px;background:yellow;float:left;}#d4{height: 300px;width: 300px;background:pink;}</style></head><body><div id="d1">111</div><div id="d2">222</div><div id="d3">333</div><!-- clear: left; 清除左浮动clear: both; 清除左右浮动--><div style="clear: both;"></div><div id="d4">444</div></body></html>
24.使用表格进行页面布局
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">body{margin-top: 0px;margin-left: 0px;margin-right: 0px;}</style></head><body><table border="0" cellspacing="0" cellpadding="" width="100%" height="40px"><tr><td width="300px"></td><td width="102px"><img src="img/logo.png"></td><td align="center" width="200px"><font size="5">西部开源欢迎你!</font></td><td width="280px"></td><td width="50px"><img src="img/phone1.png"></td><td width="200px">029-86699937 88262419</td><td width="300px"></td></tr></table><table border="0" cellspacing="0" width="100%"><tr><td><img src="img/linux.jpg" height="480px" width="100%" ></td></tr></table></body></html>
25.div和css布局页面
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title><style type="text/css">body {margin-top: 0;}#tubu {width: 100%;height: 400px;border: 1px black solid;/* 背景图片 */background-image: url(img/linux.jpg);/* 背景图片尺寸 */background-size: 100% 100%;}#dh {width: 100%;height: 80px;margin-top: 10px;border: 1px black solid;}#zuo {width: 25%;height: 600px;border: 1px black solid;float: left;}#zhong {width: 40%;height: 600px;border: 1px black solid;margin-left: 5%;float: left;}#you {width: 25%;height: 600px;border: 1px black solid;float: right;margin-right: -2px;}#dibu {margin-top: 10px;width: 100%;height: 400px;border: 1px black solid;}#box {margin-top: 10px;}.btn {margin-top: 10px;height: 60px;width: 150px;border: 1px black solid;float: left;margin-left: 5.5%;/* 文本左右居中 */text-align: center;/* 文本上下居中:取值就是外框的高度 */line-height: 60px;/* 边框圆角 */border-radius: 5px;background-color: skyblue;color: white;font-size: 20px;box-shadow: 5px 5px 5px gray;}.btn:hover {font-size: 21px;}a:link {color: white;text-decoration: none;}a:hover {color: #0000FF;}</style></head><body><div id="tubu">头部横幅</div><div id="dh"><div class="btn"><a href="#">进入首页</a></div><div class="btn"><a href="#">学习原地</a></div><div class="btn"><a href="#">关于本站</a></div><div class="btn"><a href="#">学习资料</a></div><div class="btn"><a href="#">报名需知</a></div><div class="btn"><a href="#">联系我们</a></div></div><div id="box"><div id="zuo"><table border="0" cellspacing="0" width="100%" height="100%"><tr><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td></tr><tr><td>Data</td><td>Data</td></tr></table></div><div id="zhong">中</div><div id="you">右</div></div><div id="" style="clear: both;"></div><div id="dibu">底部</div></body></html>
JavaWeb-CSS(选择器 页面定位 行元素块元素行内块元素之间的转换 层的浮动 表格布局页面 div和css布局页面)