1_ 前端基础——HTML/CSS笔记
1_ 1.骨架
2.标题标签
3.div/span
4.文本格式化标签
5.图像/链接
<img/>
src /title /alt /border
<a><a/>
href href="#"
target target="_blank" / target="_self"
<base target="_blank" /> /把所有的连接,都默认添加,写在<head>里
text-decoration: none;
6. 锚点连接
7. 列表
ul - li /无序列表
ol - li /顺序列表
dl - dt /标题列表
- dd
list-style:none;
2_
1.表格
<caption><caption/>
tr - th
tr - td
tr - td
colspan="2" /跨列
rowspan="3" /跨行
2.input
input -- type/value/style/src
select - option
textarea - cols rows style
3.label
<label> //点击label内的文字，光标可以定位到id的表单内部
4.表单
<form> --- name/value
3_ 1.类选择器
.header { } --- class="header"
2.多类名选择器
class="font20 red fontw
3.id选择器
#header{ } --- id="header"
4.通配符选择器
* { }
4.标签选择器
span{ }
5.后代选择器
div p { }
.header p { } /后代选择器 所有的后代的意思
6.子代选择器
ul > li > a /子代选择器 子指的是 亲儿子
7.交集选择器
div.current { } /既是 div 又叫current
8.并集选择器
div, p, span { }
9.伪类链接
a:link { } // 未访问过的连接状态*/
a:visited { } // 已访问过链接
a:hover { } // 鼠标经过连接时候的样子
a:active { } // 鼠标按下时候的样子
- 触发者 变化者
10.元素的显示模式
- block块级元素 <div> <h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>
- inline行内元素 <span> <a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>
- inline-block <img />、<input />、<td>
11.显示模式转换
display: inline; /*把块级元素转换为行内元素*/
display: block; /*把行内元素转换为块级元素*/
display: inline-block; /*把行内元素转换为行内块元素*/
12.
4_ 1.层叠性/继承性/优先级
- 优先级
- ！important ∞
- 行内样式表 1000
- #header{ } 0100
- .header{ } 0010
- div { } 0001
- *和继承 0000
2.字体样式
- font: font-style font-weight font-size/line-height font-family;
- font: 400 25px "宋体"
- font-style normal/italic
- font-weight normal/bold
- text-indent: 2em;
- text-align:center; //文字水平居中,可以让盒子内容（文字 行内元素 行内块元素）居中对齐
- text-decoration: none; //取消装饰
- text-decoration: underline; //下划线
- text-decoration: overline; //上划线
- text-decoration: line-through; //删除线
3.行高
height: 50px 行高等于盒子的高度，可以让 单行文本垂直居中
line-height: 50px; // 行高
4.背景
background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
:#000 url(images/sm.jpg) no-repeat fixed center top ;
-color -image -repeat -attachment -position
background: rgba(0, 0, 0, .3);
-background-color 背景颜色
-background-image 背景图片地址
-background-repeat 是否平铺
-background-position 背景位置
-background-attachment 背景固定还是滚动 背景的合写（复合属性）
-background:背景颜色 背景图片地址 背景平铺 背景滚动 背景位置
5.边框
border: 1px solid #ccc;
-- solid dashed dotted
-none：没有边框即忽略所有边框的宽度（默认值）
-solid：边框为单实线(最为常用的)
-dashed：边框为虚线
-dotted：边框为点线
-double：边框为双实线
border-collapse: collapse; /*合并相邻边框*/
6.内边距
padding: 10px; /*有一个上下左右10像素的边框*/
7.外边距
margin: 100px auto;
margin: top auto bottom;
border-radius: 50%; // 让一个正方形,变成圆圈
border-radius: 150px 0;
box-shadow: 0 15px 30px rgba(0,0,0,0.1); //盒子阴影
8.盒子 盒子内的元素依次添加样式
5_
1.浮动
float: left; -- 可以让元素默认转换为行内块元素特性
float: right;
2.通栏结构
3.左右型结构
4.清除浮动
5.定位 (子绝父相，子内浮动)
position: relative; / 相对定位
position: absolute; / 绝对定位，不占位置，跟浮动一样脱标
-- top: 0; /加了定位，浮动的的盒子 margin 0 auto 失效了
-- left: 0;
-- right: 0;
-- bottom: 0;
-- 子绝父相，子水平居中：
-- left: 50%;
-- margin-left: -480px(左走自己的一半);
7.固定定位
-- position: relative;
-- margin: 100px auto;
-- position: absolute fixed
- top: 0;
- bottom:0;
- left:0;
- right: 0;
8.定位模式转换
9.z-index叠放次序
- z-index: 1;
10.盒子 盒子内的元素依次添加样式
- height
- width
- margin
- paddig
- border
- border-radius
- color
- background
- font
- float
- position
-
6_ 1.显示与隐藏
- display: none;
- display: block; / 显示某个元素 不保留位置
- visibility: visible; / 显示某个元素
- visibility: hidden; / 隐藏某个元素，保留位置
2.溢出隐藏
- overflow: scroll // 滚动条
auto // 自动
hidden; // 溢出隐藏
- text-overflow: ellipsis; // 溢出的文字部分用省略号替代
- white-space: nowrap; // 强制在同一行内显示所有文本
3.鼠标样式
- cursor: default
pointer // 鼠标样式变成小手
text // 鼠标样式变成选择
move // 变成十字架
4.轮廓线
- outline: none; // 取消轮廓线的做法
- resize: none; // 防止拖拽
5.图片与文字对齐
vertical-align: middle;
vertical-align: bottom;
6.精灵图
- background: url(images/index.png) no-repeat 0 -350px;
- background: url(images/abcd.jpg) no-repeat;
- background-position: 0 -9px;
- background-position: -255px -276px;
7.字体图标的引用
- css 声明字体
- html 引用字体
- font-family: "icomoon";
8.绘圆圈
- width: 10px;
- height: 10px;
- border-radius: 5px;
7 Tips
. 先设置一个盒子撑开宽高，再在内部添加模块
. a 里边套 img ,用定位调任意位置
. 横排标签，ul>li 加浮动
任意位子和内部横排标签, 子绝父相，子内 ul>li 加浮动
. 选择器内内容项 高 绝对高/行高
宽
背景 图片/颜色
边框 值/虚实/颜色
字体 大小/颜色
外边距
内边距
浮动 左/右
定位
伪元素
8_ html5和CSS3
1. 新标签
-header
-nav
-aside
-article
-time
<header>头部</header>
<nav>导航</nav>
<main>
<article>左边</article>
<aside>右边</aside>
</main>
<footer>底部</footer>
2. 新增type属性
- type= text/password/email/tel/url/number/range/color/time/date/datetime-local/month/week
- placeholder / autofocus / multiple / required / accesskey
3. 新增的表单元素
<input type="text" list="subjects">
<datalist id="subjects">
<option value="前端与移动开发" label="javascript"/>
</datalist>
<output>总金额：￥100.00</output>
4. // oninput:监听当前指定元素内容的改变：只要内容改变(添加内容，删除内容)，就会触发这个事件*/
document.getElementById("userName").οninput=function(){
console.log("oninput:"+this.value);
}
4.1. 进度条
<progress max="100" value="100"></progress>
<meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>
4.2
<fieldset>
<legend>内嵌入边框线的文字</legend>
</fieldset>
5. <audio/video controls loop >
<source src type="video/mp4" >
-src:播放文件的路径
-controls:音频播放器的控制器面板
-autoplay:自动播放
-loop:循环播放
-poster:指定视频还没有完全下载完毕，或者用户没有点击播放前显示的封面
-width:视频的宽度
-height:视频的高度
6. 结构伪类选择器
li:first-child
li:last-child
li:nth-child(3)
li:nth-child(even)
li:nth-child(odd)
li:nth-child(2n)
li:nth-child(2n+1)
7. 属性选择器
div[class] { }
div[class=demo] { }
div[class^=test] { }
div[class$=test] { }
8. 伪元素选择器
p::first-letter { }
p::first-line { }
p::selection { }
span::before { }
span::after { }
div::before{ } /*是一个能插入元素的选择器*/
div::after { }
9. box-sizing:border-box; /*内减模式*/
10. 过渡
transition: all 0.5s; /过渡写到本身上 谁做过渡动画，写到谁身上
/ :hover 指定过度后样式
transition: width 0.5s ease 0s, height 0.3s; /多组属性用逗号分隔
11. 变形
transform:translate(100px,100px) /位移
- transform: translate(-50%, -50%); /让定位的盒子水平居中和垂直居中
transform: scale(0.8, 0.5); /缩放，宽度变为了原来的 80% 高度变为了原来的 50%
transform: rotate(360deg); /旋转
- transform-origin: right bottom; /*设置旋转中心点，写在旋转本体上*/
transform: skew(30deg); /变形-倾斜
transform: translate(100px, 100px) scale(0.3) rotate(45deg); /先 移动后缩放
box-shadow: 0 10px 20px rgba(0,0,0,0.5); / 鼠标经过显示阴影
transform: translateY(-20px);
transform: rotateX(360deg); / 旋转
transform: rotateY(360deg);
- backface-visibility: hidden; / 定义当图片不面向屏幕时是否可见
12. 动画
animation: move 2s ease 0s infinite alternate;
/animation:名称 花费时间 运动曲线 何时开始 播放次数 是否反方向;
@keyframes move { } /声明动画 关键帧
from -- to
0% -- 50% --100%
13. 伸缩布局
display: flex; /*父亲添加 伸缩布局*/
min-width: 500px; /*窗口缩放时section最小的宽度就是 500*/
flex-direction: column; /*垂直分布*/
flex: 1; /子添加，布局分数
14. 背景
background-size: w h /规定背景图像的尺寸;
background-size: contain/cover
background: -webkit-linear-gradient(top, red 0%, green 50%, blue 100%);
/background: -webkit-linear-gradient(渐变的起始位置， 颜色 位置， 颜色 位置....)
background: url(images/2.jpg) no-repeat top left , url(images/3.jpg) no-repeat bottom right; /多背景
opacity: 0.2; /*盒子半透明*/
![SVM学习笔记（一）[图]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)