清除样式
<style>
*{
margin: 0px;
padding:0px;
list-style: none;
}
</style>html:主要负责页面结构，样式和html一点关系都没有
css：主要负责页面样式
常用标签：
- img 引入图片 scr 放置图片地址 alt 图片不能正常显示的时候，提示文字 title鼠标移入提示文字
- H系列标题文字
- h1 一般一个页面只有一个，用来引入logo
- h2 一般一个页面只有两个
- h3 一般一个页面只有三个 其余自定义
- p 段落文字 引入一段话或一段文字
- a 页面跳转超链接 href放置的是跳转的页面地址 加入target="_blank"此属性，在新页面打开，不加默认在当前页面打开
- ul li 无序列表
- ul 的子级只能是li
- li的父级只能是ul
- ol 有序列表
- div 实现布局
- textarea 文本域
- sup 上标
- span 、b 、u 、 i 引入小元素
- br 换行
-  ；空格
- input 可输入框 type 限制类型 （ text文本 number数值类型 password密码 radio单选框 checkbox复选框 ）placeholder="" 默认提示文字
- select 下拉选择框
- table 表格 tr书写每一行的内容 td书写每一列的内容
<body>
图片<img src="" alt="这是个例子"title="这是个例子" ><br>
标题文字<h1>例子</h1><h2>例子</h2><h3>例子</h3>
<h4>例子</h4><h5>例子</h5><h6>例子</h6>
段落<p>这是个例子这是个例子</p>
超链接<a href=""target="_blank">这是个例子</a>
无序列表<ul>
<li>这是个例子</li>
<li>这是个例子</li>
<li>这是个例子</li>
</ul>
有序列表<ol>
<li>这是个例子</li>
<li>这是个例子</li>
<li>这是个例子</li>
</ol>
布局<div>这是个例子</div>
文本域<textarea name="" id="" cols="30" rows="10">这是个例子这是个例子这是个例子这是个例子</textarea><br>
上标<sup>例子</sup><br>
小元素 <br>
<span>这是个例子这是个例子</span><br>
<b>这是个例子这是个例子</b><br>
<i>这是个例子这是个例子</i><br>
<u>这是个例子这是个例子</u><br>
空格与换行 <br>
这是个例子 这是个 例子这是个例子这是个例子<br>这是个例子这是个例子这是个例子这是个例子
<br>
文本<input type="text" placeholder="这是个例子"><br>
数字<input type="number" name="" id="" placeholder="123123456"><br>
密码<input type="password"><br>
单选<input type="radio" name="xxx" id="">"这是个例子" <input type="radio" name="xxx" id="">这是个例子<br>
复选<input type="checkbox" name="" id="">例子<input type="checkbox" name="" id="">例子<input type="checkbox" name="" id="">例子<br>
下拉选择框 <select name="" id="">
<option value="">例子</option>
<option value="">例子</option>
</select><br>
表格<table>
<tr>
<td>例子</td>
<td>例子</td>
</tr>
<tr>
<td>例子</td>
<td>例子</td>
</tr>
<tr>
<td>例子</td>
<td>例子</td>
</tr>
</table>
</body>常用CSS：
- color 文字颜色
- font-size 文字大小 不能小于12px ，默认文字大小16px
- font-family 字体
- line-height 行高
- text-decoration：line-through 中横线 none 去除下划线
- text-indent 首行缩进
- font-weight：bold 文字加粗
- font-weight：normal 文字不加粗
- font-style：italic 文字倾斜
- text-align：center 文本类元素水平居中 left 靠左 right 靠右
- cursor：pointer 鼠标移入增加小手效果
- :nth-of-type(n) 可以选择到具体的某一个标签
- z-index 调整图层顺序 默认值0 ，值越大越靠上，可以是不负值但不建议。
<style>
p{
color: rebeccapurple;
font-size: 24px;
font-family: "楷体";
line-height: 18px;;
text-decoration: line-through;
text-indent: 2em;
font-weight: bold;
font-style: italic;
text-align: center;
cursor:pointer;
}
input :nth-of-type(2){
width:200px;
height:300px;
/* 去除点击以后的蓝色的线 */
outline: none;
}
</style>盒子模型基本样式：
- width 内容的宽度
- height 内容的高度
- border 边框（border-top/left/right/botoom 可设置一个方向）
- 第一个值 线的粗细
- 第二个值 线的类型 solid 实线 dashed 虚线 dotted 点线
- 第三个值 线的颜色
- margin 外边距 （margin-top/left/right/bottom 可设置一个方向）
- 第一个值代表上下
- 第二个值代表左右
- padding 内边距 （padding-top/left/right/bottom 可设置一个方向）增加内边距，标签的占位也增加。
- 第一个值代表上下
- 第二个值代表左右
<style>
div{
width:400px;
height:400px;
border:20px dashed red;
border-radius:30%;
margin:20px 30px;
padding : 20px 20px;
}
</style>背景样式：
background 背景
- 直接书写色值
- 书写图片
- 第一个值 图片地址 url（地址）
- 第二个值 平铺方式 repeat（默认平铺） no-repeat（不平铺） repeat-x（x轴平铺） repeat-y （y轴平铺）
- 第三个值 水平方向坐标 可以写具体的值 也可以写left center right
- 第四个值 垂直方向坐标 可以写具体的值 也可以写 top center bottom
- 第五个值 写颜色 渐变色 liner-gradient（to 方向 top/left/right/bottom，颜色，颜色，颜色）
<style>
div{
background:lawngreen;
}
span{
width: 47px;
height: 47px;
display: inline-block;
background: url('icons_5859e57.png') no-repeat -217px -458px;
}
span:hover{
/* 背景图片的坐标 有背景图片才可以 */
background-position: -72px -458px;
}
</style>选择器：
选择所有的标签
- 标签选择器：直接通过标签名选择
- 类名选择器：直接通过类名选择标签，类名前面一定需要加点 . +class名字
- 后代选择器：被包裹的都称为后代，使用空格隔开，一般不能超过四级。
<style>
div{
width:200px;
height:300px;
}
.xxx{
width:200px;
height:300px;
}
.xxx .xxxx{
width:200px;
height:300px;
}
</style>选择器权重：
- *<标签名选择器 <类名选择器<id 名 选择器<行内样式<!important
- 选择器权重可以叠加
浮动：
- 靠左浮动：float：left；
- 靠右浮动：float：right;
<style>
div{
width:200px;
height:300px;
float:left;
}
.xxx{
width:200px;
height:300px;
float: right;
}
</style>浮动塌陷的解决方法：
- 给父级增加高度
- 给父级加 overflow：hidden
overflow:hidden 的三层意思：
- 溢出隐藏
- 消除浮动
- 消除外边距塌陷
CSS的层叠性和继承性：
- 层叠性：
- css同样的样式，权重一样的话后写的生效
- 权重不一样的，取决于权重高的
- 继承性：
- 与文字有关的样式，都可以继承
- 如果一个标签没有某一个与文字有关的样式（一定要考虑到内置的一些样式），会向上寻找，直到找到该样式。
CSS的书写方式
- 内联 <style></style>
- 外联（外部链接）link
- 行内样式（不推荐使用）style=" "
水平居中方式：
- 文本元素（行内标签）水平居中： text-align：center；
- 块级标签（display:block）水平居中：margin：0px auto；
- 定位的标签水平居中：left：50%；transform：translateX（-50%）
- 背景图片居中，调整背景图片位置：background-position：center center
垂直：
- 垂直对齐方式：vertical-align：top/middle/bottom；
- 文字垂直居中：设置行高等于当前标签的高度: line=height;
- 定位的标签垂直居中：top：50%；transform：translareY（-50%）；
定位：
- position：fixed；固定定位 脱离标准流 不占位
- position：relative； 相对定位 半脱离标准流（标签的性质没有改变，但是拥有四个坐标）占位:占的是原来的位置
- position：absolute； 绝对定位 脱离标准流 不占位 子级绝对定位，父级相对定位
<style>
img{
width:500px;
height:500px;
background:lawngreen;
position:fixed;
/* 固定定位居中的方式 */
left:50%;
margin-left: -250px;
top:50%;
margin-top: -250px;
}
div{
width:200px;
height:300px;
position:relative;
left:250px;
bottom:100px;
}
.xxx{
width:200px;
height:300px;
position:relative;
}
.xxx .xxxx{
width:200px;
height:300px;
position:absolute;
right: 100px;
top: 50px;
}
</style>H5常用标签：
- <header>头部</header>
- <nav>导航</nav>
- <main>主要内容</main>
- <section>大区域内容</section>
- <aside>侧边栏</aside>
- <footer>底部</footer>
- <article>文章</article>
CSS3 新特性
- border-radius 边角变圆
- transform 转换
- transition 过渡
- animantion 动画
转换模块 transform：
- rotate 旋转 旋转以后，整个坐标系也跟着改变
- scale 缩放 0-1缩小 大于1的时候放大
- translate 位移 第一个值代表水平方向，第二个值垂直方向
- transform-style：preserve-3d；进入三维坐标
- transform-origin：x（left/center/right/数值） y（top/center/bottom/数值） ； 旋转中心点
<style>
div,span{
width: 100px;
height: 100px;
background: red;
/* 转换模块，对于行内标签没有效果 占得是原来的位置 */
/* 同样的样式后写的生效 */
/* 旋转 */
transform: rotate(30deg);
/* 缩放 0-1缩小 大于1的时候放大*/
transform: scale(0.3);
/* 位移，第一个值代表水平方向，第二个值垂直方向 */
transform: translate(100px,100px);
/* 可以书写多个值，使用空格隔开 */
/* transform: scale(0.3) rotate(12deg) translate(100px ,100px); */
/* 旋转以后，整个坐标系也跟着改变 */
transform: translate(100px,100px) rotate(90deg);
transform: rotate(90deg) translate(100px,100px) ;
/* 旋转中心点 */
transform-origin: left center;
/* 进入三维坐标 */
transform-style: preserve-3d;
}
</style>标签分类：
- 单双标签
- 双标签：<标签></标签>
- 单标签:<标签>或<标签 />
- 行内标签和块级标签
- 行内标签：和其他标签并排排列 span b u i a
-
行内标签设置宽高无效
-
上下外边距无效，左右有效
-
上下内边距有效，不占位。左右有效且占位
-
- 块级标签：独占一行ul li h1-h6 p div
- 行内块：在一行排列，设置宽高有效 img input td tr table
- 行内标签：和其他标签并排排列 span b u i a
伪标签：
- ::before在内容之前
- ::after在内容之后
- content书写内容 必须存在，即使没有内容 如果没有content，就说明没有伪对象
<style>
/*::before和after是 伪对象相当于通过css增加了一个标签(行内标签) */
.con .wrap .bottom li::before{
/* content书写内容 必须存在，即使没有内容 如果没有content，就说明没有伪对象*/
content: '';
width:4px;
height: 4px;
/* 转化成行内块 只是为了工作方便，语义没有变化 */
display: inline-block;
background:red;
border-radius: 50%;
margin-right: 4px;
position: relative;
top: -2px;
}
/* ::before在内容之前 ::after在内容之后 */
.con .wrap .bottom li::after{
content: '';
width:4px;
height: 4px;
display: inline-block;
background:red;
border-radius: 50%;
margin-right: 4px;
position: relative;
top: -2px;
}
</style>disply：
- inline把标签转化为行内标签
- inline-block把标签转化为行内块
- block 把标签转化为块级标签
- none 隐藏标签
投影box-shadow：
- 第一个值水平方向 正值右边 负值左边
- 第二个值垂直方向
- 第三个值虚实程度
- 第四个值影子大小
- 第五个值影子颜色 可以书写成透明色
<style>
div{
width: 100px;
height: 100px;
box-shadow: 0px 0px 2px 2px red;
}
</style>过渡模块transition：
- 第一个值代表样式
- 第二个值动画持续时间
- 第三个值延迟时间(可选)
- all代表所有的，也可以专门设置一个样式
<style>
div{
width: 100px;
height: 100px;
background: red;
cursor: pointer;
transition: all 2s 2s;
transition: background 1s 0s,transform 1s 1s,border-radius 1s 2s,width 1s 2s;
}
/* 选择器:hover鼠标移入以后才生效 */
div:hover{
background: lime;
transform: rotate(360deg);
border-radius: 50%;
width:200px
}
</style>动画模块：
- animation：动画名字 动画持续时间 次数(可以书写具体的次数) infinite无穷 linear平缓过渡
- 定义动画：@keyframes 动画名字{ 书写各个状态的样式条，状态就是百分比来划分 }
<style>
div{
width: 100px;
height: 100px;
background: red;
animation:circle 2s infinite linear;
}
@keyframes circle {
0%{
transform: rotate(0deg)
}
100%{
transform: rotate(360deg);
}
}
</style>
236
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
