这篇文章完全是一个个人总结，接受完大佬的教导之后，激动之下，按照指导新手入门的思路进行了下面的编码，页面很粗糙，没有任何的美化，只是为了看属性、样式、特殊标签的效果！本页入门思路的核心在于，第一步：分离样式和标签，在一个标签上设置样式，以此说明其他标签也可以进行此样式设置；第二步：进入页面排版阶段，边距问题，浮动问题，定位问题都在这个阶段学习；第三步：开始学习特殊标签，常用标签的使用，表单的使用，列表的使用，表格的使用，iframe框架的介绍，最后再引入一点点CSS伪类的内容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="">
</head>
<body>
<!-- 使用div讲解css样式
1、颜色（三种方式）
颜色的英文单词 style="color:gold"
颜色的十六进制 style="color:#FF0000"
rgb或rgba style="color:rgb(0,255,0);" style="color:rgba(0,255,0,0.5)"
rgb代表颜色的三原色，取值范围0~255 a代表不透明度，取值范围0 ~ 1 之间的浮点数，越大越不透明
2、边框设置
宽度 颜色 样式 border:5px solid red; border-top:5px,brown,dashed; 可以单独设置top right bottom left
solid 实体线 dashed 虚线 dotted 点状线
3、文本设置
对齐方式 style="text-align:center" 默认left对齐，可设置left right center
首行缩进 style="text-indent:2em" 首行缩进2字符 style="text-indent:25px" 首行缩进25像素
文本修饰 style="text-decoration:none" 无修饰 text-decoration:underline 下划线
text-decoration:overline 上划线 text-decoration:line-through 删除线
文本阴影 text-shadow: 10px 10px 8px blue 第一个参数：必须，横向偏移距离
第二个参数：必须，纵向偏移距离 第三个参数：可选，模糊程度 第四个参数，阴影颜色
字体大小 font-size:35px
字体加粗 font-weight:bold
字体样式 font-style:itatic itatic 斜体 normal默认 oblique倾斜 inherit 继承
字体 font-family: '楷体'
字体颜色 color:red;
字符间距 letter-space:5px
行高 line-height:30px line-height的值要大于font-size
单行文本行高与容器高度一直，可以实现垂直居中
多行文本行高是基线之间的距离，line-height与font-size计算值之差分为两半，分别加到一个文本行内容的顶部和底部
-->
<div style="color: gold; border-top: 5px solid red; text-align: right; text-decoration: underline; font-size: 30px;font-style: italic;letter-spacing: 5px;height:500px;line-height: 500px">
html+css最有效的学习方法
</div>
<div style="color: rgba(0,255,255,0.5); border-bottom: 2px dashed pink;text-align: center; text-decoration: overline;font-size: 20px;font-style: oblique;letter-spacing: 7px">
html+css最有效的学习方法
</div>
<div style="color: #ff00ee; border-right: 3px dotted grey; text-indent: 2em;text-decoration: line-through; text-shadow: 5px 8px 3px blue; font-size: 25px; font-weight: bold;letter-spacing: 3px;line-height: 35px">
html+css最有效的学习方法1
html+css最有效的学习方法2html+css最有效的学习方法2html+css最有效的学习方法2html+css最有效的学习方法2html+css最有效的学习方法2html+css最有效的学习方法2html+css最有效的学习方法2html+css最有效的学习方法2html+css最有效的学习方法2html+css最有效的学习方法2html+css最有效的学习方法2
</div>
<!-- css选择器
通配符选择器 *{css样式} 选取所有标签
标签选择器 标签名{css样式} 选取次类型的所有标签
id选择器 #id名称{css样式} 具有唯一性，可以使用多次，但是js写特性会出错
id命名 以数字、字母、下划线、$符号组成，且数字不能开头，见名知意
class类选择器 .类名 {css样式} class名可以在html文档中出现多次，且一个标签可以添加多个类名 多个类名之间以空格隔开
class命名 与id命名一致
后代选择器 选择器1 选择器2 ...{css样式} 选择满足此嵌套结构的所有标签，一组而且任意层级都可以找到
子代选择器 选择器 > 选择器2 {css样式} 只能匹配父子级关系的标签
样式选择器的优先级 （强制加权重使样式生效 color:blue !important;）
1、相同选择器选取到同一个标签，设置了同一样式后写的覆盖前写的
2、不同选择器选取到同一标签，设置了同一样式优先级高的先采用
!important > 行内样式 > ID选择器 > 类选择器 > 标签 > 通配符 > 继承 > 浏览器默认属性
内联样式表的权值为 1000
ID 选择器的权值为 100
Class 类选择器的权值为 10
HTML 标签选择器的权值为 1
小结：选择器选择的范围越大，权重反而越小。id>class>标签>*
-->
<!-- css引入方法
行间style 优点：优先级高
内部引入 缺点：没有从本质上讲样式与结构分离 在head标签内使用style标签引入css样式
<style type="text.css">样式</style>
外部引入 优点：真正实现了样式与结构的分离
在外界单独创建css文件，在html文件的head标签内部使用link标签引入外界的css文件
<link rel="stylesheet" type="text/css" href="css文件路径">
-->
<!-- 背景设置 背景不具有撑开父级元素的宽度和高度的特性
background-image:url('路径')
background-repeat:repeat-x 只有横向重复 background-repeat:repeat-y 只有纵向重复 background-repeat:no-repeat
background-position:100px 100px;
background-color:gold
background-size:100px 100px background-size:cover 先容纳短的彼边 bacjground-size:contain 先容纳长的边
background复合写法
background：url('图片地址',repeat,position,color) size单独设置
-->
<p style="background-color:pink">html背景设置</p>
<p style="background-image: url('project/images/1.jpg');">html背景设置</p>
<div style="width:800px; height:800px; background: url('project/images/1.jpg') no-repeat 10px 100px;background-size: 500px 500px ">html背景设置</div>
<!-- 盒模型 边距问题
margin 外边距
复合写法
margin：100px 上右下左
margin: 100px auto 上下 左右 水平居中 margin: 100px 200px 上下100px 左右200px
margin: 100px 200px 300px 400px 上右下左
单一方向：
margin-top:
margin-left:
margin-right:
margin-left:
margin-top的bug问题：父子级嵌套，父级没有边框，具有参照关系的子级设置了margin-top
解决margin-top的bug问题方案：为父级设置overfolw：hidden 或者为父级设置边框
margin的冲突问题
横向冲突：累加作为两者之间的距离
纵向冲突：取大作为两者之间的距离
padding 内边距
padding是一个元素相对于自身内容往内的距离
padding一定建立在父子级嵌套关系上
一个元素设置了内边距，则元素会变大，需要在狂傲上减去padding出来的距离
border 边框
一个元素设置了边框，则此元素的显示范围和作用范围都变大
-->
<!--浮动float
1、浮动元素会在父级容器中横向排列，空间不够自动换行
2、left 左浮动 right右浮动
3、浮动元素不区分行块级，可以设置宽度和高度，不设置宽度和高度则由内容撑开
4、浮动元素飘离文档，不再撑开父级的高度
清除浮动
1、为浮动元素父级手动设置高度 缺点：不灵活，不方便，没有从本质上清除浮动
2、为浮动元素负极设置overflow:hidden 优点：灵活，方便 缺点：没有从本质上清除浮动
3、在浮动元素统计以下设置空div，并为其设置clear属性 优点：从本质上清除了浮动效果
clear： both左右浮动都清除 left清除左浮动 right清除右浮动
-->
<!--定位position
定位元素也是脱离文档的
定位元素可以通过left、right、top、bottom来实现元素位置的移动
relative相对定位
一般最外层设置relative
偏移参照为自身原先的位置，偏移之后元素原有空间还存在
position：relative;
left:100px;
top:100px;
left +往右 right +往左 top +往下 bottom +往上
absolute绝对定位
偏移参照为定位父级的四条边
如果子级设置了absolute，而父级没有设置relative的话，子级的定位就会以body为基线
position:absolute;
left:30%
top:20%;
left +从定位父级左边往内偏移
top +从定位父级上边往内偏移
right +从定位父级右边往内偏移
bottom +从定位负极底边往内偏移
fixed固定定位
偏移参照为浏览器可视化窗口的四条边
position：fixed;
right:20px;
bottom:20px;
-->
<!--z-index
调整定位元素的层级关系，默认值为0，该属性设置一个定位元素沿z轴的位置，z轴定义为垂直延伸到显示区的轴，
如果为正数则离用户更近，为负数则表示离用户更远
使用前提： 必须使用定位才能生效，只有在同级元素下生效
#div1 {
width: 200px;
height: 200px;
background-color: green;
position: relative;
left: 100px;
top: 100px;
z-index: 0;
}
#div2 {
width: 200px;
height: 200px;
background-color: blue;
position: relative;
z-index: -1;
}
<div id="div1"></div>
<div id="div2"></div>
-->
<!--特殊标签 行级、块级、行块级 列表 表格 iframe 伪类 （link、visited、hover、active） -->
h1-h6 标题标签，h1最大
<br /> 换行标签
<hr /> 水平线标签
<p></p> 段落标签
<img alt="代替图片的文本" src="图片路径" title="图片提示" width="图片宽" height="图片高">
图片标签 alt：图片无法显示，显示文字 title：鼠标悬浮显示图片提示文字
<a href="" target="" title="" >超链接</a>
超链接标签 href：连接地址 target：_blank表示新窗口打开 _self:表示当前窗口打开 title：鼠标悬浮显示提示文字
锚链接：定义标记：<a href="marker">目标位置</a>
链接到标记位置：<a href="#marker">当前位置</a>
功能性链接：<a href="mailto:LANOU@jb-aptech.com.cn">蓝鸥课程邮箱</a>
脚本链接：<a href="JavaScript:alert(1)">安全学习流程图</a>
文件下载：<a href="1.doc">网络安全课程大纲下载</a>
<div></div> 块级标签代表
独占一行、可以设置宽度和高度，不设置宽度，则继承父级宽度，不设置高度，则由内容撑开
常见的块级标签：div p h1-h6 ul li dl dt dd
<span></span> 行级标签代表
一行显示多个，不可以设置宽度和高度，宽度和高度由内容撑开，
常见的行级标签：a span strong（加粗） u（下划线） em（强调） i斜体 sub（下标） sup（上标）
一个标签的行块级是由css属性display决定的，
display:block; 块级
display:inline; 行级
display:inline-block; 行块级
行块级：可以一行显示多个，可以设置宽度和高度，不设置宽度与高度，由内容撑开
特殊符号:
>(>) <(<) $quot;(") (空格) ©(©,版权号)
列表
无序列表 ul li
<ul>
<li>橘子</li>
<li>苹果</li>
</ul>
有序列表 ol li
<ol>
<li>安装游戏</li>
<li>注册账号</li>
</ol>
自定义列表 dl dt dd
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dt>蔬菜</dt>
<dd>菠菜</dd>
<dd>芹菜</dd>
</dl>
//表格table
<table cellpadding="5px" cellspacing="0" border="1" align="center">
<caption><H2>学生信息表</H2></caption>
<tr><th>姓名</th><th>班级</th><th>电话</th><th>备注</th></tr>
<tr><td>test</td><td colspan="3">3班</td></tr>
<tr><td>root</td><td rowspan="2">4班</td></tr>
<tr><td>admin</td></tr>
</table>
tr：行 td：列 th：表头 caption 表格标题 rowspan 行合并 colspan 列合并
table：border表格边框 align，表格位置 cellspacing单元格之间的间隙 cellpadding 单元格与内容之间的间隙
//form表单
<form action="提交地址" method="提交方式" >
<input type="text" name="" maxlength="最大长度">
<input type="password" name="" placeholder="请输入密码">
<input type="hidden" name="token" value="adsflasdlfk">
<input type="submit" name="">
<input type="button" name="">
<input type="checkbox" name="hoppy">打游戏
<input type="checkbox" name="hoppy">看漫画
<input type="checkbox" name="hoppy">做运动
<input type="radio" name="gen" value="man" >男
<input type="radio" name="gen" value="woman" checked="checked">女
<input type="reset" value="重置">
下拉选框
<select name="mon">
<option selected="selected">选择月份</option>
<option >一月</option>
<option>二月</option>
<option>三月</option>
</select>
文本域 resize:none 表示文本域不可拉伸 readonly表示只读模式
<textarea name="border_message" rows="10" cols="10" style="resize: none;" readonly="readonly">
欢迎阅读服务条款
</textarea>
</form>
<!-- multipart/form-data支持二进制文件 -->
<form action="" method="" enctype="multipart/form-data">
<input type="file" name="text" >
<input type="submit" name="" value="上传文件">
</form>
//iframe框架
<!-- src="在iframe中显示的文档url frameborder 是否显示框架周围的边框 1为显示边框 0为不显示边框 name框架标识名 scrolling 是否显示滚动条 no不显示 yes显示 auto根据内容自动却定是否需要显示-->
<iframe src="div_css.html" height="200px" width="200px" name="myifrmae" scrolling="yes" frameborder="1">
</iframe>
<iframe src="https://www.w3school.com.cn/tags/att_iframe_src.asp" height="200px" width="200px" name="myifrmae" scrolling="yes" frameborder="1">
</iframe>
实例
<h1>上方导航条</h1>
<p>
<a href="div_css.html" target="mainFrame">
下边显示第一页</a>
<br /><br />
<a href="div_html.html" target="mainFrame">
下边显示第二页</a>
<br /><br />
<a href="www.JD.com" target="mainFrame">
下边显示第三页</a>
<br />
</p>
<iframe name="mainFrame" width="800" height="150" scrolling="yes" src="subframe/the_second.html" ></iframe>
<iframe src="http://www.klxjyxxw.com/anshifengdeng.html"></iframe>
<!-- CSS伪类 -->
<style type="text/css">
/*这里应该在head中*/
a:link {color:black} /*未访问动作*/
a:visted {color:blue} /*已访问动作*/
a:hover {color:red} /*悬浮动作*/
a:active {color:yellow} /*点击动作*/
#div1 {
width: 200px;
height: 200px;
background-color: red;
}
#div1:hover{
width: 400px;
height: 400px;
background-color: pink;
}
</style>
<div id="div1"></div>
<a href="http://www.baidu.com">百度</a>
</body>
</html>
扫一扫
7388
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
