思考再三，萌芽决定把自己学生时代珍藏多年的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 >p

外部样式(外链样式)

建立一个css文件

层叠优先级：内链》内部》外部

第一个是一个目录下直接调用，第二个是选择地址调用/其他目录下的调用
<link href="style.css" type="text/css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="img/style.css">

/* 宽度和颜色 */

-webkit-text-stroke: 4px navy; 文字颜色样式等相关属性

/* 默认 */

-webkit-text-stroke: inherit;

-webkit-text-stroke: initial;

-webkit-text-stroke: unset;

字体相关属性

* 字体大小，字体样式（斜体），字体颜色，字体加粗，字体

    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;
}

萌芽子

发布了46 篇原创文章 · 获赞 43 · 访问量 2万+

私信关注

常用的CSS标签库

《 HTML 》篇（长期更新）

1 HTML基础

2 HTML基础标签

3 HTML基础标签

页面跳转

相对路径：

绝对路径：

4 HTML表单

超链接颜色设置

CSS 内部样式

字体相关属性

萌芽贼吉尔乱的属性标签！超常用！！！别嫌代码乱，好用哭了！

CSS 选择器

猜你喜欢