妙味云课堂(一) html和css基础

最新推荐文章于 2024-05-24 23:45:01 发布

iteye_17773

最新推荐文章于 2024-05-24 23:45:01 发布

阅读量338

点赞数

分类专栏：【妙味课堂笔记】文章标签： xhtml 前端 ViewUI

【妙味课堂笔记】专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一. background

复合属性：一个属性有多个属性值。

#bg{
    url(bg.jpg) center top no-repeat gray fixed;
}
                等同于
#bg{
    background-attachment: fixed;
    background-color: gray;
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    background-position: center top;
}

二. margin

margin外边距的问题:

1. 上下外边距会叠加:

<style type="text/css" >
#box1{
	height:200px;
	width:200px;
	border:1px solid #F00;
	margin-bottom:20px;
}
#box2{
	height:200px;
	width:200px;
	border:1px solid #00F;
	margin-top: 20px;
}
</style>
<div id="box1"></div>
<div id="box2"></div>

2. 父子级包含的时候子级的margin-top会传递给父级(内边距替代外边距)

<style type="text/css" >
#box1{
	height:380px;
	width:400px;
	background:#F00;
	padding-top:20px;
}
#box2{
	height:200px;
	width:200px;
	/* margin-top: 20px; */
	background:#FF0;
}
</style>
<div id="box1">
	<div id="box2"></div>
</div>

三. 盒子模型:

盒子大小 = border + padding + width / height

盒子宽度 = 左border + 左padding + width + 右padding + 右border

盒子高度 = 上border + 上padding + height + 下padding + 下border

四. 文本样式:

word-spacing 单词间距

text-indent 首行缩进

letter-spacing 字母间距

五. 锚点:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<body>
    <a href="#box1">百步飞剑</a>
    <a href="#box2">夜尽天明</a>
    <a href="#box3">诸子百家</a>
    <a href="#box4">万里长城</a>
    <a href="#box5">君临天下</a>
    <div id="box1" style="height:1000px">百步飞剑</div><br/>
    <div id="box2" style="height:1000px">夜尽天明</div><br/>
    <div id="box3" style="height:1000px">诸子百家</div><br/>
    <div id="box4" style="height:1000px">万里长城</div><br/>
    <div id="box5" style="height:1000px">君临天下</div><br/>
</body>
</html>

六. 选择符优先级

样式优先级:

类型选择器(1) < class(10) < id(100) < style行间样式(1000) < js

同级样式默认后者覆盖前者.

七. 伪类详解

伪类用于向被选中元素添加特殊的效果.(元素在特定情况下才具备)

link 未访问(默认)

hover 鼠标悬停(鼠标划过)

active 链接激活(鼠标按下)

visited 访问过后(点击过后)

a四个伪类的顺序: link visited hover active

记忆方法: love hate

a伪类的应用:

a. 四个伪类全用(搜索引擎,新闻门户, 小说网站)

b. 一般网站只用( a:hover{ } )

IE6不支持a以外其他任何标签的伪类;

IE6以上的浏览器支持所有标签的hover伪类;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css" >
	a:link{font-size:60px; text-decoration:none;color:black;}
	a:visited{color:green;}
	a:hover{color:yellow;text-decoration:underline;}
	a:active{color:red;} 
</style>
</head>
<body>
<a href="#">baidu</a>
</body>
</html>

八. 标签默认值样式重置

<style type="text/css" >
	/* 默认样式重置(css reset)*/
	body,p,h1,h2,h3,h4,h5,h6,dl,dd{
		margin:0; 
		font-size:12px;
		/* font-family: xx */
	}
	ol,ul{
		list-style:none; 
		padding:0; 
		margin:0;
	}
	a{
		text-decoration:none;
	}
	img{
		border:none;
	}
</style>

九. 内嵌元素和块元素

内嵌元素: a, span, strong, em

块元素: p, div, h1, h2, h3, h4, h5, h6, ol, li, ul, li, dl, dt

内联，内嵌，行内属性标签：

1、默认同行可以继续跟同类型标签；

2、内容撑开宽度

3、不支持宽高

4、不支持上下的margin和padding

5、代码换行被解析

块属性标签：

1、默认独占一行显示；

2、没有宽度时，默认撑满一排

3、支持所有css命令

display: block; 显示为块

display: inline; 显示为内嵌

display: inline-block; 一行内的块

特性：

1、块在一行显示；

2、行内属性标签支持宽高；

3、没有宽度的时候内容撑开宽度

问题：

1、代码换行被解析；

2、ie6 ie7 不支持块属性标签的inline-block;

十: 前端规范:

1、所有书写均在英文半角状态下的小写；
2、id，class必须以字母开头；
3、所有标签必须闭合；
4、html标签用tab键缩进；
5、属性值必须带引号；
6、<!-- html注释 -->
7、/* css注释 */
8、ul,li/ol,li/dl,dt,dd拥有父子级关系的标签；
9、p,dt,h标签  里面不能嵌套块属性标签；
10、a标签不能嵌套a；
11、内联元素不能嵌套块；

十一: 浮动:

/*
浮动: left/right/none    inline-block的加强版
	
	元素加了浮动，会脱离文档流 ，按照指定的一个方向移动直到碰到父级的边界或者另外一个浮动元素停止
	1.使块元素在一行显示
	2.使内嵌支持宽高
	3.不设置宽度的时候宽度由内容撑开
	4.脱离文档流(文档流是文档中可显示对象在排列时所占用的位置)
	5.提升层级半层

clear left/right/both/none 元素的某个方向不能有浮动元素
*/

十二. 清浮动

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{margin:0 auto;border:10px solid #000;}
.div{ width:200px;height:200px;background:red;float:left;}
.clear{zoom:1;}
.clear:after{content:""; display:block;clear:both;}
/*
	清浮动
	方法1.给父级也加浮动
	方法2.给父级加display:inline-block
	方法3.在浮动元素下加<div class="clear"></div>
	.clear{ height:0px;font-size:0;clear:both;}
	方法4.在浮动元素下加<br clear="all"/>
	方法5.给浮动元素的父级加{zoom:1;}    
	:after{content:""; display:block;clear:both;}
	
	**在IE6，7下浮动元素的父级有宽度就不用清浮动
	haslayout 根据元素内容的大小或者父级的父级的大小来重新的计算元素的宽高
        display: inline-block
        height: (任何值除了auto)
        float: (left 或 right)
        width: (任何值除了auto)
        zoom: (除 normal 外任意值) 
*/
</style>
</head>
<body>
<div class="box clear">
	<div class="div"></div>
</div>
</body>
</html>

十三. 关于浮动的一些兼容性问题

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
body{margin:0;}
.wrap{float:left;border:2px solid #000;}
.box{width:100px;height:100px;background:red;margin:0 100px;float:left;display:inline }
/*
	IE6下的双边距BUG
	在IE6下，块元素有浮动和横向margin的时候，横向的margin值会被放大成两倍
	解决办法: display:inline;
*/
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.list{ width:300px;margin:0;padding:0;}
.list li{ list-style:none;height:30px;border:1px solid #000; font-size:12px; line-height:30px;}
.list a{float:left;}
.list span{float:right;}
/*
	IE6,7下li的间隙: 在IE6,7下li本身没浮动,但是li内容有浮动的时候,li下边就会产生几px的间隙
	解决办法:  
	  方法1.给li加浮动
	  方法2.给li加vertical-align:top;
*/
</style>
</head>
<body>
<ul class="list">
	<li>
    	<a href="#">文字文字文字文字文字</a>
        <span>作者</span>
    </li>
    <li>
    	<a href="#">文字文字文字文字文字</a>
        <span>作者</span>
    </li>
    <li>
    	<a href="#">文字文字文字文字文字</a>
        <span>作者</span>
    </li>
    <li>
    	<a href="#">文字文字文字文字文字</a>
        <span>作者</span>
    </li>
</ul>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{border:10px solid #000;background:Red;}
img{ vertical-align:top;}
/*
	清理图片下的空隙
	解决办法: vertical-align:top;
*/
</style>
</head>
<body>
<div class="box">
	<img src="img/pic.jpg" /><img src="img/pic.jpg" /><img src="img/pic.jpg" />
</div>
</body>
</html>

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.box{height:1px;background:red;overflow:hidden;}

/*
在IE6下高度小于19px的像素,高度会被当做19px来处理
解决办法: overflow:hidden;
*/
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>

iteye_17773

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
妙味云课堂(一) html和css基础

一. background复合属性：一个属性有多个属性值。#bg{ url(bg.jpg) center top no-repeat gray fixed;} 等同于#bg{ background-attachment: fixed; background-color: gray; background-...
复制链接

扫一扫