HTML中的CSS应用方式
HTML中常用的CSS方式，有两种：标签中的style属性；把样式在head头中定义，style标签样式。
1、标签的style属性（设置比较简单）。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<div style="height: 80%;width: 60%;background-color: blue">chen1203</div> ???<!-- ?style="height: 80%;width: 60%;background-color: blue" 就是在标签中定义的用样式--></body></html>
2、写在head里面，style 标签中的样式。
- ID选择器#i1 {}- class 选择器（推荐使用）.cl{定义名字}<标签 class=‘名称‘> </标签>- 标签选择器div{ ....} ???所有div 设置此样式- 层级选择器（关联选择器，都是空格）.cl .c2 div{}- 组合选择器（逗号）#i1,#i2,#i3{} ??????????.i1,.i2,.i3{}- 属性选择器对选择到的标签在通过属性在进行一次筛选.cl[n=‘alex‘]{属性}如看效果，直接代码复制。
A 、ID选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#id_set1{ ???????????height: 80%;width: 60%;background-color: blue ???????} ???</style> ??</head><body> ???<div id="id_set1">chen1203</div></body></html><!--在body中，ID 是唯一的值，不能设置重复 -->B、class 选择器（因为ID是唯一的值，body中不能设置重复。但class可以）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.cl_set_1 { ???????????height: 80%;width: 60%;background-color: blue ???????} ???</style></head><body> ???<div class="cl_set_1">chen1203</div> ???<div class="cl_set_1">chen</div> ???</body></html><!-- class 选择器与ID选择器，具体的区别就是，head中把#换.; 且class支持的标识不是唯一，可以写多个 -->C、标签选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????span { ???????????height: 80%;width: 60%;background-color: blue ???????} ???</style></head><body> ???<div class="cl_set_1">chen1203</div> ???<div class="cl_set_1">chen</div> ???<span>fasdfasdfasf</span></body></html><!-- 只针对span标签，进行样式渲染，其他的div 标签并没有发现改变-->D、层级选择器（也叫关联选择器）
h1 b: 说明h1标签下与b标签才生效
h1>b: 说明h1下面的b标签全部生效
h1+b: 说明h1标签相连的b标签才会生效
h1~b: 说明h1类下面的所有b都生效
<!-- ?层级选择器 --><!DOCTYPE html><html lang="en"><head> ???<style> ????????h1 b { ????????????color: red; ????????} ???</style></head><body> ???<h1> ???????<b>chen1203</b> ???</h1> ???<h2> ???????<b>chen1204</b> ???</h2></body></html><!-- 子元素选择器 --><!DOCTYPE html><html lang="en"><head> ???<style> ???????h1 b { color:blue; } ???????h1 > b { color:red; } ???</style></head><body> ???<h1> ???????<b>chen1203</b> ???</h1> ???<h1> ???????<i>chen ???????????<b>chen</b> ???????</i> ???</h1></body></html><!-- 相邻选择器 --><!DOCTYPE html><html lang="en"><head> ???<style> ???????h1+b { color:blue; } ???</style></head><body> ???<h1>OK</h1> ???<b>chen1203</b> ???<h1> ???????<i>chen ???????????<b>chen</b> ???????</i> ???</h1></body></html>E、组合选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????#id_1,#id_2,#id_3{ ???????????height: 80%;width: 60%;background-color: #57ff82 ???????}<!-- 对应ID选择器 --> ???????.cl_set_1,.cl_set_2,.cl_set_3{ ???????????height: 80%;width: 60%;background-color: blue ???????}<!-- 对应class 选择器 --> ???</style></head><body> ???<div id="id_1">chen_1</div> ???<div id="id_2">chen_2</div> ???<span id="id_3">chen_3</span> ???<div class="cl_set_1">chen1203</div> ???<div class="cl_set_2">chen</div> ???<span class="cl_set_3">chenqinq</span></body></html>F、属性选择器
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????input[id=‘username‘]{height: 80%;width: 60%;}<!-- 只针对id为username的input标签进行调整--> ???</style></head><body> ???<label for="username">用户名：</label> ???<input id=‘username‘ type="text" name="user"> ???<label for="pwd">密码：</label> ???<input id=‘pwd‘ type="text" name="user"></body></html>1、 CSS在HTML中执行的优先级
优先级：标签上的style优先，编写顺序，就近原则
测试代码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1 { ???????????background-color: red; ???????} ???????.c2 { ???????????background-color: blue; ???????} ???</style></head><body> ???<span class="c1 c2" style="background-color: green">chen1203</span></body></html>谷歌调出：开发者工具进行检测，如图,可以点击大框里面的进行点。验证，执行的顺序。
2、 CSS在外部调用的方式
A、CSS样式，可以写在单独的文件中，外部需要用 <link rel="stylesheet" href="comm.css"> 调用。过程如下：
编写CSS文件，命名为comm.css ,注意在编写css文件时，不需要<style>标签。
#set_1 { ???????????background-color: #5655ff; ???????}.c1,span{ ???????????background-color: #804668;}编写css.html文件，并引用外部的css样式。head 中添加 <link rel="stylesheet" href="comm.css">
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<link rel="stylesheet" href="comm.css"> <!-- 外部引用css文件 --></head><body> ???<div id="set_1">1</div> ???<div class="c1">af</div> ???<div >2</div> ???<div class="c1">3</div> ???<span >4</span></body></html>
如图：
B 、访问看样式加载的效果
边框的设置：
- 宽度，样式，颜色 ?(border: 4px dotted red;)---- 设置边框虚线
- border-left;只设置边框的左边
- border-right;只设置边框的右边
- border-top;只设置边框的顶部
边框的样式：
- height ??高度，百分比
- wight宽度，百分比，像素
- text-align:center ?水平方向居中
- line-height ?垂直方式根据标签高度自动居中
- color 设置字体颜色
- font-size 字体大小
- font-weight字体加粗
举例：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<!--<div style="border: dotted;height: 20px;width: 200px ">chen1203</div>--> ???<div style="border: 1px solid red ">chen1203</div> ???<p></p> ???<div style=" ???height: 48px; ???width: 80%; ???border: 1px solid red; ???text-align:center; ???line-height: 48px; ???color: green; ???font-size: large; ???font-weight: bold" ???>qing</div></body></html>
效果：
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
float样式在页面的导航条上，使用的比较广，比较常用。让标签浪起来，块级标签也可以堆叠。
可定的值：
- left元素向左浮动
- right元素向右浮动。
- none默认值。元素不浮动，并会显示在其在文本中出现的位置。
- inherit规定应该从父元素继承 float 属性的值。
举例：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<div style="width:30%;background-color: red; float:left">1</div> ???<div style="width:60%;background-color: blue;float:right">2</div></body></html>
效果：（两个div中，可以堆叠起来使用）
补充：（ <div style="clear: both"></div> ） 的功能点，不好描述请看图吧
代码如下：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body style="margin: 0 auto"> ???<div class="pg_header"> ???????<div style="float: left">收藏本站</div> ???????<div style="float: right"> ???????????<a>登录</a> ???????????<a>注册</a> ???????</div> ???</div> ???<br /> ???<div style="width: 300px;border: 1px solid red"> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="width:90px;height: 30px;border: 1px solid green;float:left"></div> ???????<div style="clear: both"></div> ?<!-- ?主要把红色边框调整出来 --> ???</div></body></html>
效果：
display 属性规定元素应该生成的框的类型。
display 可用参考值：
- display: none -- 让标签消失(可以设置弹出对话框、关闭对话框)
- display: inline;
- display: block;
- display: inline-block;
解析：
- inline-block 两者兼有
- 具有inline, 默认自己有多少，占用多少
- 具有block ，可以设置高度、宽度，padding 、margin
++++ +++ ++ ++ ++ +++ +++ ++ +++ ++ +++ ++ ++ +++
??行内标签：无法设置高度、宽度，padding ???margin
??块级标签: ?设置高度，宽度 ???padding ??margin
举例：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<div style="background-color: red;display: inline-block"> fadfafaf </div> ???<span style="background-color: red;display: block">fnnnnn</span> ???<a style="background-color: red;display: inline-block"> fadfafaf </a> ???<span style="background-color: red;display: none">chen1203</span></body></html>
效果：(第4行被隐藏掉了)
补充：padding\margin
观察两个工具中，样式的具体标变化
举例：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title></head><body> ???<h2>margin</h2> ???<div style="border: 1px solid red;height: 70px "> ???????<div style="background-color: green;height: 50px; ???????margin-top: 0px"></div> ???</div> ???<h3>padding</h3> ???<div style="border: 1px solid red;height: 70px "> ???????<div style="background-color: green;height: 50px; ???????padding-top: 0px"></div> ???</div></body></html>
效果：
两者区别在于：padding 与margin 根据开发者代码里面去看。用鼠标调整padding-top、margin-top像素，就可以知道margin的绿色块是整体往下移动，而padding就向下扩大，就想瀑布一样，调整像素，越来越大。
postion 几种常用的属性：
absolute
- 生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
- 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed
- 生成绝对定位的元素，相对于浏览器窗口进行定位。
- 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative
- 生成相对定位的元素，相对于其正常位置进行定位。
- 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static默认值。
- 没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit规定应该从父元素继承 position 属性的值。
这里重点介绍一下，fixed 的定位元素。postion 为fixed 把元素固定页面的某个地方
1、举例，（顶部导航固定、在滑动页面的情况下，不会进行收缩。）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.pg_header{ ???????????height: 48px ; ???????????background-color: cornflowerblue; ???????????color: black; ???????????position: fixed; ???????????top: 0; ???????????right: 0; ???????????left: 0; ???????????margin-top:0px; ???????????margin-left:10px; ???????????margin-right: 10px; ???????} ???????.pg_body{ ???????????height: 500px ; ???????????background-color: #dddddd; ???????????margin-top: 50px; ???????????margin-left:2px; ???????????margin-right: 2px; ???????} ???</style></head><body> ???<div class="pg_header">头部</div> ???<div class="pg_body">内容</div> ???<div class="pg_bottom">底部</div></body></html>效果，如下：
2、举例，（右下角，生成按钮，点击返回顶部。）
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.return_top_header{ ???????????width: 50px; ???????????height: 50px; ???????????background-color: #5655ff; ???????????color: white; ???????????position: fixed; ???????????right: 20px; ???????????bottom:20px; ???????} ???</style></head><body> ???<div onclick="TOP()" class="return_top_header">返回顶部</div> ???<div style="height: 5000px;background-color: #dddddd;">数据</div> ???<script> ???????function TOP() { ???????????document.body.scrollTop = 0; ???????} ???</script><!-- onclick="TOP()" 的名称定义要跟 script 标签中的function TOP() 名字对应 --></body></html>效果，如下:
验证：浏览器点击不了的话，注意清楚缓存。
3、第九周 - WEB框架应用 - HTML中CSS的应用
原文地址：https://www.cnblogs.com/chen170615/p/9575726.html