失眠网 > JavaWeb-CSS（选择器页面定位行元素块元素行内块元素之间的转换层的浮动表格

JavaWeb-CSS（选择器页面定位行元素块元素行内块元素之间的转换层的浮动表格

时间：2021-09-21 14:13:09

1.行标签和块标签

行标签：默认不会占据一整行的标签，内容有多宽，就占据多宽 b font s u
块标签：就是该标签默认会占据一行的标签 h1 hr ul li
行内块标签：具有一些行标签和块标签的特点 button

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><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><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><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><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><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><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><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><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布局页面）

如果觉得《JavaWeb-CSS（选择器页面定位行元素块元素行内块元素之间的转换层的浮动表格》对你有帮助，请点赞、收藏，并留下你的观点哦！

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。