思考再三,萌芽决定把自己学生时代珍藏多年的CSS笔记发出来,特别常用适合背不下来标签的新手小白哟!
《 HTML 》篇(长期更新)
1 HTML基础
1.1 什么是标记语言
Word文档就是标记语言的一种,而现在要学习的HTML(Hyper Text Markup Language)也是一种标记语言,叫做超文本标记语言。
超文本标记语言:不光可以保存文字信息,还可以保存音频、视频等内容。
在我们浏览网页时,其实是将储存在服务器上的HTML文件下载到本地,在通过浏览器进行解析,从而呈现了网页内容。
2 HTML基础标签
- HTML的基本结构
<html> <head> <meta charset="UTF-8"> //设置字符集 <title>Title</title> //设置标题 </head> <body> </body> </html>
HTML的基本构架包括三大部分:<html>标签:是整个目录的根节点,包括了两个子节点。
<head>标签:主要设置一些写代码时需要做的设置工作,比如字符集、标题。
<body>标签:文档的主体部分,页面中要呈现的内容都在这里。
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
// Ps. 乱码的话不如试试这个
3 HTML基础标签
3.1 标题标签
常用的标题标签有<h1>——<h6>;由于显示页面的标题,包含了标题的格式、语义信息等内容。
3.2 段落标签
<p>
快捷方式 p*4 按住tab键。
(tab代表页面补全)
3.3 链接标签
<a>标签,作用的就是页面跳转,包括页内跳转和页间跳转。
页面跳转
href属性:链接的目标地址
target属性:控制页面跳转方式,其取值有四个:
- Blank:在新的页面打开
- Self:在当且页面打开(默认的打开方式)
- Top:
- Parent:
<a href="//www.baidu.com/" target="_blank">跳转到百度</a>
要给“目的地”设置一个id,在<a>标签中的href属性里面使用“#……(id名)”这样就能实现页内跳转。id属性具有唯一性,是页面元素中的唯一标识,id名不能重复。
<a href="#p1">跳转到底部</a>
<p id="p1">页面底部</p>
3.4图片标签
<img>图片标签:在网页中插入图片:
<img src="img/图片1.png" alt=""> <!--src从哪儿来 alt到哪儿去-->
<img src="../图片2.png" alt="">
<img src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" alt="">
图片可以从本地载入,也可以从网页载入:本地载入时要找到图片的储存地址,在网页载入时要找到图片的网络地址。
相对路径:
调用上一级用“../图片1”
调用下一级用“/:图片1”
调用同级目录“.:图片1”这个.可以省略
绝对路径:
直接在起始目录 / 开始就是绝对路径。
3.4列表
无须列表在word中:<ul>标签来定义。(可在type属性里选择样式)
序列内容用<li>标签来填写:
显示输出结果为:
Type属性:指定了无序列表的符号,取值有:
Disc:实心圆(默认) circle:空心圆 square:实心正方形
有须列表在word中:<ol> 标签来定义。
显示输出结果为:
Type属性:指定了列表符号的种类包括:
1.2.3.4.5.……
a.b,c,d,e……
还有其他的种类比如罗马I或者大写字母A。
Start属性:指定了列表开始的位置,也就是从第几个开始,而不是从几开始。(也就是从下标开始往后推)
自定义列表在word中:<dl> 标签来定义。
自定义列表在html中:
显示输出结果为:
<dl>标签定义一个自定义列表。
<dt>标签列表的标题。
<dd>标签列表的描述。
4 HTML表单
什么是表单?表单就是收集填写信息后提交到后台服务器。
<form>标签定义一个表单
Get 提交和 post 提交 <br> 换行哟
- 普通按钮
<button></button>
- 文件选择框
<input type="file">选择文件
- 下拉列表
<select>
<option>奔驰</option>
<option>丰田</option>
<option>奥迪</option>
<option>宝马</option>
</select>
- 多文本框
<textarea rows="1" cols="2"></textarea>
超链接颜色设置
CSS 内部样式
ID选择器的命名是唯一的,只能用一次,但类选择器用只要调用就能一直用。
<!-- id选择器权限最高,其次是class、其他的伪类 -->
权限:id > class >p
- 外部样式(外链样式)
建立一个css文件
层叠优先级: 内链 》内部 》外部
第一个是一个目录下直接调用,第二个是选择地址调用/其他目录下的调用
<link href="style.css" type="text/css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="img/style.css">
1 2 3 4 5 6 |
|
字体相关属性
* 字体大小,字体样式(斜体),字体颜色,字体加粗,字体
font-size: 20px;
font-style: italic;
color: lightblue;
font-weight:bold ;
font-family:"黑体" ;
text-shadow:-1px 0 #ffffff; 文字雕刻?
* 行间距(行高),首行间距,首行缩进,对齐方式,文本修饰
line-height: 40px;
word-spacing:40px ;
text-indent: 50px; text-indent: 2em; 首行缩进俩字节
text-align: center;
line-height:40px; //字段上下间距
letter-spacing:10px //文字左右间距
text-decoration: line-through; /*打折的*/
text-decoration: none; /*去下划线*/
text-decoration: underline; /*下划线*/
//其他设置
max-width: 100px; /*宽度*/
min-height: 100px; /*min设置最小界限height高度*/
max-height: 100px; /*max最大的界限*/
background-color: beige ; //背景颜色
text-align: center; /* 这个是居中 */
vertical-align:text-top; //img 图片文字对其
//内容左右居中
h1 {text-align: center} * 居中
h2 {text-align: left} * 左对齐
h3 {text-align: right} * 右对齐
=================================================
超好看的h5字体,爱了!
-webkit-font-smoothing: antialiased;
font-family: -apple-system-font, Helvetica Neue, sans-serif;
=================================================
居中方式 : transform: translateY(-50%)
<input type="image" src="图片地址" /> 图片按钮
萌芽贼吉尔乱的属性标签!超常用!!!别嫌代码乱,好用哭了!
这么写背景图片能完全兼容你的浏览器,无论图片多大都能铺满而且好看!
:style="{background:'url('+item+')center center / cover no-repeat'}"
========================================================
CSS3赛高!!!发现了更好用的css3解决图片拉伸问题,爱了爱了
- object-position: 50% 50%;
- object-fit: cover;
<body background="你的图片地址"></body>
直接插入背景图片 ☆
background:url(../img/头像.png)no-repeat; 【背景图片不平铺】
background: url(../img/backgroundimg.jpg) no-repeat fixed center;【背景平铺】
background-size: cover; 【把背景图像扩展至足够大,以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中;
margin-bottom: 6rem;
background-image: url("../img/02.png");
background-repeat: no-repeat;
background-size: 100%;
关于渐变------
background: linear-gradient(red, blue);
background: linear-gradient(to right, red , blue); /* 标准的语法 */
background: linear-gradient(to bottom right, red , blue); /* 标准的语法 */
background: radial-gradient(red, green, blue);
============ 文字渐变
background: linear-gradient(45deg, black, transparent);
-webkit-background-clip: text;
color: transparent;
这个是刚学<div>的时候一直记不住位置代码直到后来用多了...也没背下来
width: 200px; //长度
height: 200px; //高度
background: red; //背景颜色
box-shadow: #666 0px 0px 10px;//阴影
box-shadow: 0px 0px 10px red inset //内发光
left: 200px; //(左)
right //(右)
top: 100px; //(上)
bottom: 0px 底部对其 (下)
text-align: center; //文本居中
position:absolute; //绝对定位
border: 1px solid black; //div边框厚度 颜色黑
border-radius: 10px; //div边框圆角
background-image: url(千库网c483c80acc965b9284559079ddeac1b0.png);
background-size:cover; ← 大概是全屏图片吧?
border: 1px black;
float: right; //浮动 右对齐
padding: 0; /*内边距*/
margin : 0; /*外边距*/
margin-top:30px; 上边距
margin: 0 auto; 【 居中 】
如果写四个参数的话就是顺时针【上右下左】
这些就不是特别实用了用的不是很多
cellspacing="0"; //经常用的tr td合并那个表格线啦。
overflow: hidden; //溢出后隐藏
opacity: 0.5; //透明度为5
text-shadow: 0 0 .125em transparent(透明); 为文字添加阴影
box-shadow: 0px 0px 10px red inset //内发光/内阴影
em是一个相对单位,意思是当前字体大小下字符的宽度,2em就是两个字符的宽度。不一定是两厘米
transition:width 2s; 两秒动画效果,详情可见萌芽芽的案例库
background: transparent; 背景颜色透明,实际上是默认的
background-color: rgba(133, 217,250,0.5); R红 G绿 B蓝 A透明(0~1之间)
style="display:none" //样式设置为不显示,所谓的隐藏啦
display:none; 设为隐藏 /* margin: 上右下左;*/
cursor: pointer; 鼠标爪爪
display : inline; 关闭换行哟
________________________________________ 这些就没上面的实用了
white-space:nowrap; P标签不换行
font-weight:normal 文本纤细体,可对B标签生效
<iframe src="Food.html" marginheight="50"width="400px" height="300px">
<p>您的浏览器不支持 iframes 。</p>
</iframe>
这个!HTML中的嵌套形式
文字发光样式:
text-shadow:0 0 0.2em #f87,
-0 -0 0.2em #f87;
=========================================================乱入一个JS,改变颜色的代码
$(function () {
$("tr").hover(function() {
$(this).css("background", "#ffd7cf");
},function () {
$(this).css("background","white");
})
});
============================= 加一些伪类选择器
a{
text-decoration:none; //没有下划线
color: #颜色
}
a:hover{ //鼠标悬停样式(鼠标滑过的样式)
color: #颜色
}
a:focus{
color: #颜色 //用于选取获得焦点的元素(鼠标点击后的样式)
}
a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */
以上就这些O(∩_∩)O希望对还是萌新的你能有些帮助哟~
//======================== 更改颜色placeholder
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
color: #C2C2C2;
font-size: 14px;
}
input:-moz-placeholder, textarea:-moz-placeholder {
color: #C2C2C2;
font-size: 14px;
}
input::-moz-placeholder, textarea::-moz-placeholder {
color: #C2C2C2;
font-size: 14px;
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
color: #C2C2C2;
font-size: 14px;
}
//======================== 清除input样式
input {
border: none;
outline: none;
-webkit-appearance: none;
}
//======================== 清除a样式
a,a:hover{ text-decoration:none; color:#333}
//======================== 清除button样式
margin: 0;
padding: 0;
border: none;
outline: none;
outline: none; //清除input/button选中样式
border-collapse: collapse; //为表格设置合并边框模型:
style="list-style-type:none;" // li不显点
a,a:hover{ text-decoration:none; color:#333} 。//清除a样式
给按钮加上这个吧//-----//按钮样式清空
button{ border: 0; background-color: transparent; outline: none; }
++++++++++++++++++++++++++++++++++++++++++++++++++2019-3-8 09:28:30 更新追加!
.header-search{
& /deep/ .ivu-input {
height: 36px;
font-size: 14px;}
}
/deep/深度作用域选择器,通过找到父元素深度的找到我们需要改变的子元素,然后改变它的样式即可
CSS 选择器
.item:nth-child(1){
height: 300px;
}
p:first-letter{
font-size:200%;
color:#8A2BE2;
}
每个 <p>元素的第一个字母选择的样式;
#fukuan div:nth-child(1){
width: 30%;
height: 100%;
background: red;
}
规定属于其父元素的第1个子元素的每个 div 的样式;
p:first-line{
background-color:yellow;
}
每个<p>元素的第一行选择的样式;
p:last-child{
background:#ff0000;
}
指定父元素中最后一个p元素的背景色;
//萌芽最喜欢的俩选择器!
p:before{
content:"Read this: ";
}
向选定的元素前插入内容!
p:after{
content:"- Remember this";
}
向选定的元素之后插入内容!
list-style: none; // li标签不显点(样式清空)
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;//内容溢出省略
英文换行
word-break: break-all
溢出隐藏
overflow: hidden;
省略号
text-overflow: ellipsis;
不换行
white-space: nowrap;
=======两行内溢出隐藏
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
==================================
letter-spacing 文字间距
vertical-align: middle; 垂直对齐
transform: scale(0.8); 利用动画缩小//浏览器默认最小为8px,用这个可以缩小到更小
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
画一个三角形
width: 0;
height: 0;
border-width: .15rem;
border-style: solid;
margin: .15rem 0;
border-color: #aaa transparent transparent transparent;
关于文字对其
萌芽最喜欢的less混合!
.i(@img) {
content: "";
display: inline-block;
top: 50%;
height: 1rem;
width: 1rem;
background: url(@img) no-repeat center;
background-size: cover;
}
.icon(@img, @h: 1rem, @w: 1rem) {
content: "";
display: inline-block;
height: @h;
width: @w;
background: url(@img) no-repeat center;
background-size: 100%;
}
.i-btn(@img, @h: 1rem, @w: 1rem) {
display: inline-block;
height: @h;
width: @w;
background: url(@img) no-repeat center;
background-size: cover;
vertical-align: middle;
}