HTML CSS笔记

HTML CSS笔记

a标签

1.a标签跳转到页面的某个位置,点击a标签跳转到页面的id为idName元素的位置或者是name属性为idName的元素位置

<a href="#idName"></a>
<a href="#idName2"></a>
<div id="idName" ></div>
<div name="idName2" ></div>

2.a标签拨打电话,在href中的属性值中添加tel:电话号码

<a href="tel:10086"></a>

3.a标签发送电子邮件
(1)a标签给单个用户发送电子邮件

<a href="mailto:26984515@qq.com"></a>

(1)a标签给多个用户发送电子邮件,电子邮箱后面以;分号隔开

<a href="mailto:user1@qq.com;user2@qq.com"></a>

4.a标签点击不跳转

<a href="javascipt:viod(0)"></a>//点击效果失效
<a href="#"></a>//回到页面最顶部
<a href="###"></a>

background的简写

background :背景颜色 背景图片 背景重复 背景附着 背景定位 / 尺寸大小
background：color img_url repeat attachment position / size

垂直外边距的塌陷解决

1.给父元素添加上边框
2.给父元素添加overflow:hidden
3.用父元素的padding-top代替子元素的margin-top

box-shadow盒阴影

box-shadow:h-shadow v-shadow blur spread color inset;
h-shodow:必需 水平阴影的位置，允许负值
v-shadow:必需 垂直阴影的位置，允许负值
blur:可选，模糊距离
spread:可选,阴影尺寸
color:可选，阴影颜色
inset:可选，可以设置为外部阴影outset

text-shadow文字阴影

text-shadow:h-shadow v-shadow blur color;
h-shodow:必需 水平阴影的位置，允许负值
v-shadow:必需 垂直阴影的位置，允许负值
blur:可选，模糊距离
color:可选，阴影颜色

浮动清除的方法

1.额外标签法:在浮动 元素后天添加一个块元素并且在这个元素添加clear:both样式

<div><div style="float:left;">float1</div><div style="float:left;">float2</div><div style="clear:both"></div>
</div>

2.给浮动元素的父级添加高度
3.给浮动元素的父级添加overflow样式
4.after伪类清浮动:给浮动元素的父级添加clear中的样式

<style>
.clear:after{
    content:"";display:block;height:0;clear:both;visibility:hidden;
}
.clear{
    *zoom:1;
}
</style>
<div class="clear"><div style="float:left;">float1</div><div style="float:left;">float2</div>
</div>

5.双伪元素清楚浮动

<style>
.clear:before,.clear:after{
    content:"";display:table;
}
.clear:after{
    clear:both;
}
.clear{
    *zoom:1;
}
</style>
<div class="clear"><div style="float:left;">float1</div><div style="float:left;">float2</div>
</div>

单行文本超出部分隐藏

white-space:nowrap;//强制文本在一行显示
overflow:hidden;//超出部分隐藏
text-overflow:ellipsis;//文字省略号代替超出隐藏的部分

多行文本超出部分隐藏

overflow:hidden;//超出部分隐藏
text-overflow:ellipsis;//文字省略号代替超出隐藏的部分
display:-webkit-box;//弹性盒子模型
-webkit-line-clamp:2;//限制块元素显示文本的行数
-webkit-box-orient:vertical;//设置或检索伸缩盒子对象的子元素的排列方式

通过css设置三角形

原理就是利用border属性

 <style>.divWrap{
    clear: both;}div {
    float: left;}.center {
    width: 0px;border-color: red yellow transparent transparent;border-style: solid;border-width: 50px 25px 0px 0px;}.left{
    width: 100px;height: 50px;background-color: red;}.right{
    width: 100px;height: 50px;background-color: yellow;}</style><div class="divWrap"><div class="left"></div><div class="center"></div><div class="right"></div></div>

样式

css初始化代码

*{
    margin:0;padding:0;
}
/*list的样式初始化*/
ul,ol,li {
    list-style: none;
}
/*font-style的样式初始化*/
em,i{
    font-style:normal;
}
/*图片的样式初始化*/
img {
    border:none;vertical-align: top;
}
/*文本修饰的样式初始化*/
a {
    text-decoration: none;color: white;
}
/*table的样式初始化*/
table {
    border-collapse: collapse;
}
/*外边框*/
input,textarea {
    outline: none;
}
textarea {
    resize: none;
}
/*BFC*/
.clear:after {
    content: '';display: block;clear:both;
}.clear{
    zoom: 1;
}
.left{
    float: left;
}
.right{
    float: right;
}

HTML5新增标签(常用)

1.语义化标签（多用于搜索引擎优化）

<header>:头部标签
<nav>:导航标签
<article>:内容标签
<section>:定义文档某个区域
<aside>:侧边栏标签
<footer>:尾部标签

2.多媒体标签：谷歌浏览器把音频和视频的自动播放功能禁止了

<video>标签只支持三种视频格式：MP4,WebM,Ogg，尽量使用MP4格式

常见属性

<audio>音频标签

常见属性：

3.HTML5新增的input表单

过渡(经常和hover一起使用)

transition:要过渡的属性 花费的时长 运动曲线 延时时长
过渡属性：想要变化的CSS属性，宽,高,背景颜色等,如果所有的属性都变化过渡用all
花费的时长：单位时间是s(秒)
运动曲线：默认是ease 可以省略
延时时长：单位是s(秒)可以省略(表示没有延迟)