html

<head> 头部元素有<title><script><style><link><meta>。

<body></body>标签之间如<h1><p><a><img src="">

em 标签表示强调

<link href="style.css" rel="stylesheet" type="text/css" />外部css

类选择器:<style type="text/css">
.stress{
    color:red;
}
</style>

id选择器:

<style type="text/css">
#stress{
    color:red;
}
</style>

<span id="setGreen">公开课</span>

与类选择器不同,ID选择器只能在文档中使用一次。

子选择器,是作用于子类第一个:.food>li{border:1px solid red;}/*添加边框样式(粗细为1px, 颜色为红色的实线)*/

添加一个空格,作用于后代。

.first  span{color:red;}

通用选择器:

* {color:red;}

划过显示红色:前面是标签

a:hover{
    color:red;
}

CSS的某些样式是具有继承性的,比如color

p{color:red;} /*权值为1*/ 

p span{color:green;} /*权值为1+1=2*/

 .warning{color:white;} /*权值为10*/ 

p span.warning{color:purple;} /*权值为1+1+10=12*/ 

#footer .note p{color:yellow;} /*权值为100+10+1=111*/

继承的权值最低。id的最高

字体设置:body{font-family:"宋体";font-size:12px;color:#666;font-weight:bold;font-style:italic;text-decoration:underline;text-decoration:line-through;}

text-decoration:line-through;删除线,例如价格的降价

段落排版:text-indent:2em;缩进

line-height:1.5em;行高

letter-spacing:50px;字母间隔

word-spacing:50px;单词间隔

text-align:center;对齐方式

常用的块状元素有:  <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

常用的内联元素有:  <a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>  

常用的内联块状元素有:  <img>、<input>

a{display:block;}转换为块状元素

display:inline;转换为内联元素

display:inline-block内联块状元素

块级元素特点:

  1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。(一个块级元素独占一行)

  2、元素的高度、宽度、行高以及顶和底边距都可设置。

  3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。

内联元素特点:  1、和其他元素都在一行上;

  2、元素的高度、宽度及顶部和底部边距不可设置;

  3、元素的宽度就是它包含的文字或图片的宽度,不可改变。

inline-block 元素特点:

  1、和其他元素都在一行上;

  2、元素的高度、宽度、行高以及顶和底边距都可设置。

盒子模型:

单独设置下边框:

div{border-bottom:1px solid red;}

div{     border:2px  solid  red; }

注意:  1、border-style(边框样式)常见样式有:  dashed(虚线)| dotted(点线)| solid(实线)。   

2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:  border-color:#888;//前面的井号不要忘掉。 

3、border-width(边框宽度)中的宽度也可以设置为:  thin | medium | thick(但不是很常用),最常还是用象素(px)。

一个元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。

填充:

上,右,下,左

div{padding:20px 10px 15px 30px;}

div{padding:10px 20px;}

上下为10px,左右为20px;

边界:

div{margin:20px 10px 15px 30px;}

阅读更多
上一篇svn
下一篇html的模型
想对作者说点什么? 我来说一句

配置文件配置文件

2017年12月21日 922KB 下载

HTML基础课件!!!

2010年10月29日 8.31MB 下载

HTML制作工具

2011年10月30日 664KB 下载

动态HTML动态HTML

2009年08月27日 8.6MB 下载

HTML语言HTML语言HTML语言

2008年12月24日 65KB 下载

html原型 html原型

2009年07月31日 121KB 下载

html 语言教程(html)

2008年12月03日 66KB 下载

html基础html基础html基础html基础

2008年11月14日 1.96MB 下载

HTML基本语法.doc

2008年10月25日 175KB 下载

@Html的用法

2018年04月16日 288KB 下载

没有更多推荐了,返回首页

关闭
关闭