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(秒)可以省略(表示没有延迟)