HTML/CSS基础篇
1.head头部介绍:
<head>标签的作用:文档的头部描述了文档的各种属性和信息,包括文档的标题等,head标签主要包括http-equiv,title,content,script,link等
概念:语义化:明白每个标签的用途(在什么情况下使用此标签合理)比如,网页上的文章的标题就可以用标题标签,
2.常见的body标签:
<!--注释-->
<em>需要强调的文本</em> --斜体表示
<strong>需要强调的文本</strong> -加粗
<span>标签是没有语义的,它的作用就是为了设置单独的样式用的。
<q>引用文本</q>
<blockquote>的作用也是引用别人的文本,但它是对长文本的引用,如在文章中引入大段某知名作家的文字,这时需要这个标签。
<br/>空标签
  空格
<hr>标签,添加水平横线
<address>标签,为网页加入地址信息<address>联系地址信息</address>斜体
<code>标签添加代码 <code>var i=i+300;</code>,多行代码<pre>标签
<pre> 标签的主要作用:预格式化的文本。被包围在pre 元素中的文本通常会保留空格和换行符。
列表可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。
<ul> --新闻列表信息
<li>信息</li>
<li>信息</li>
......
</ul> --有序列表
<ol>有序列表
<li>信息</li>
<li>信息</li>
......
</ol>
<div>…</div>在网页制作过程过中,可以把一些独立的逻辑部分划分出来,放在一个<div>标签中,这个<div>标签的作用就相当于一个容器;
<div id="版块名称">…</div>给独立的逻辑部分命名
<table summary="表格简介文本">…</table>:整个表格以<table>标记开始、</table>标记结束。
<caption>标题文本</caption>
<tbody>…</tbody>:当表格内容非常多时,表格会下载一点显示一点,但如果加上<tbody>标签后,这个表格就要等表格内容全部下载完才会显示
<tr>…</tr>:表格的一行,所以有几对tr表格就有几行。
<td>…</td>:表格的一个单元格,一行中包含几对<td>...</td>,说明一行中就有几列。
<th>…</th>:表格的头部的一个单元格,表格表头。
表格中列的个数,取决于一行中数据单元格的个数。
总结:
1、table表格在没有添加css样式之前,在浏览器中显示是没有表格线的
2、表头,也就是th标签中的文本默认为粗体并且居中显示
为表格添加样式
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
<a href="目标网址" title="鼠标滑过显示的文本"target="_blank">链接显示的文本</a>
mailto在网页中链接Email地址,如果mailto后面同时有多个参数的话,第一个参数必须以“?”开头,后面的参数每一个都以“&”分隔。
<img src="图片地址"alt="下载失败时的替换文本" title = "提示文本">
<form method="post" action="save.php">
<label for="username">用户名:</label>
<input type="text" name="username"value=""/>
<label for="pass">密码:</label>
<input type="password" name="pass" value="">
</form>
注意:
1、所有表单控件(文本框、文本域、按钮、单选框、复选框等)都必须放在<form></form>标签之间(否则用户输入的信息可提交不到服务器上哦!)。
2、method:post/get的区别这一部分内容属于后端程序员考虑的问题,当用户需要在表单中输入大段文字时,需要用到文本输入域
<textarea rows="行数" cols="列数">文本</textarea>
<form method="post" action="save.php">
<label>联系我们</label>
<textarea cols="50" rows="10" >在这里输入内容...</textarea>
<input type="submit" value="确定" name="submit" />
<input type="reset" value="重置" name="reset" />
</form>
单选框:
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
下拉列表:
<form action="save.php"method="post" multiple="multiple" > 多选
<label>爱好:</label>
<select>
<option value="看书" >看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物"selected="selected">购物</option>
</select>
提交表单和数据
<input type="submit" value="提交">
<input type="reset" value="重置">
label标签
<label for="控件id名称">
注意:标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
3.CSS样式:
p{
font-size:12px;
color:red;
font-weight:bold;
}
span{
color:red;
}
CSS注释:用/*注释语句*/
1.内联式css样式
eg:<p style="color:red;font-size:12px"">这里文字是红色。</p>
2.嵌入式css样式,写在当前的文件中
3.外部式css样式,写在单独的一个文件中
外部式css样式(也可称为外联式)就是把css代码写一个单独的外部文件中,这个css样式文件以“.css”为扩展名,在<head>内(不是在<style>标签内)使用<link>标签将css样式文件链接到HTML文件内
<link href="base.css"rel="stylesheet" type="text/css" />
优先级:内联式 > 嵌入式 > 外部式
4.选择器:
标签选择器:其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>
p{font-size:12px;line-height:1.6em;}
类选择器:
.类选器名称{css样式代码;}
ID选择器:
<span id="setGreen">公开课</span>
# setGreen{css样式代码}
在很多方面,ID选择器都类似于类选择符,但也有一些重要的区别:
1、为标签设置id="ID名称",而不是class="类名称"。
2、ID选择符的前面是井号(#)号,而不是英文圆点(.)
类和ID选择器的区别
相同点:可以应用于任何元素
不同点:
1、ID选择器只能在文档中使用一次,与类选择器不同,在一个HTML文档中,ID选择器只能使用一次,而且仅一次,而类选择器可以使用多次
2.可以使用类选择器词列表方法为一个元素同时设置多个样式。我们可以为一个元素同时设多个样式,但只可以用类选择器的方法实现,ID选择器是不可以的(不能使用 ID 词列表)
子选择器:
.food>li{border:1px solid red;} 使class名为food下的子元素li(水果、蔬菜)加入红色实线边框。
包含(后代)选择器:加入空格,用于选择指定标签元素下的后辈元素。如右侧代码编辑器中的代码.first span{color:red;}
子选择器(child selector)仅是指它的直接后代,或者你可以理解为作用于子元素的第一代后代。而后代选择器是作用于所有子后代元素,后代选择器通过空格来进行选择,而子选择器是通过“>”进行选择。
>作用于元素的第一代后代,空格作用于元素的所有后代
通用选择器
* {color:red;}匹配Html中的所有标签元素;
伪类选择符:
它允许给html不存在的标签(标签的某种状态)设置样式,比如说我们给html中一个标签元素的鼠标滑过的状态来设置字体颜色
a:hover{color:red;}
分组选择符:
当你想为html中多个标签元素设置同一个样式时,可以使用分组选择符(,)
h1,span{color:red;}
特殊性:
标签的权值为1,类选择符的权值为10,ID选择符的权值最高为100,继承权值最低;
层叠:层叠就是在html文件中对于同一个元素可以有多个css样式存在,当有相同权重的样式存在时,会根据这些css样式的前后顺序来决定,处于最后面的css样式会被应用
内联样式表(标签内部)> 嵌入样式表(当前文件中)> 外部样式表(外部文件中
重要性:设置样式不是
eg:p{color:red!important;}
浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式,但记住!important优先级样式是个例外,权值高于用户自己设置的样式。
文字排版:
body{font-family:"宋体";}
body{font-family:"MicrosoftYahei";}orbody{font-family:"微软雅黑";}
body{font-size:12px;color:#666}
-粗体:pspan{font-weight:bold;}
斜体:p a{font-style:italic;}
下划线:p a{text-decoration:underline;}
删除线: .oldPrice{text-decoration:line-through;}
缩进: p{text-indent:2em;} 2em的意思就是文字的2倍大小。
行间距(行高): p{line-height:1.5em;}
中文字间距、字母间距:
字母间距:
h1{
letter-spacing:50px;
}
中文字符间距:
h1{
word-spacing:50px;
}
对齐:
text-align:center/left/right
5.元素分类:
常用的块状元素有:a{display:block;}
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote>、<form>
特点:
1、每个块级元素都从新的一行开始,并且其后的元素也另起一行。
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下,是它本身父容器的100%(和父元素的宽度一致),除非设定一个宽度。
常用的内联元素有:display:inline
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
1、和其他元素都在一行上;
2、元素的高度、宽度及顶部和底部边距不可设置;
3、元素的宽度就是它包含的文字或图片的宽度,不可改变
常用的内联块状元素有:display:inline-block
<img>、<input>
1、和其他元素都在一行上;
2、元素的高度、宽度、行高以及顶和底边距都可设置。
6.盒模型简介
盒模型--边框:粗细、样式和颜色
盒子模型的边框就是围绕着内容及补白的线
div{
border:2px solid red;
}
1、border-style(边框样式)常见样式有:
dashed(虚线)| dotted(点线)| solid(实线)。
2、border-color(边框颜色)中的颜色可设置为十六进制颜色,如:
border-color:#888;//前面的井号不要忘掉。
3、border-width(边框宽度)中的宽度也可以设置为:
thin | medium | thick(但不是很常用),最常还是用象素(px)。
css 样式中允许只为一个方向的边框设置样式:
div{border-bottom:1px solid red;}
盒模型--宽度和高度(height和width):
padding:填充;边框:border;边界:margin
元素实际宽度(盒子的宽度)=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界
eg:div{
width:200px;
padding:20px;
border:1px solid red;
margin:10px;
}
盒模型--填充:上右 下 左
div{padding:20px 10px 15px 30px;}
div{padding:10px;} 上 右 下 左 都是10px
div{padding:10px 20px;}上 右是10px, 下 左是20px;
盒模型--边界
元素与其它元素之间的距离可以使用边界(margin)来设置
div{margin:20px 10px 15px 30px;}
padding在边框里,margin在边框外
7.CSS布局模型:
1、流动模型(Flow)
2、浮动模型 (Float)
3、层模型(Layer)
流动(Flow)是默认的网页布局模式,也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。
第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%。实际上,块状元素都会以行的形式占据位置
第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平分布显示
浮动模型
如果现在我们想让两个块状元素并排显示
div{
width:200px;
height:200px;
border:2px red solid;
}
#div1{float:left;}
#div2{float:right;}
层模型
层模型有三种形式:
1、绝对定位(position:absolute)
position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块,则相对于body元素,即相对于浏览器窗口
div{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:100px;
top:50px;
}
2、相对定位(position:relative)
position:relative(表示相对定位),它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left、right、top、bottom属性确定,偏移前的位置保留不动。
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
3、固定定位(position:fixed)
fixed:表示固定定位,与absolute定位类型类似,但它的相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会受文档流动影响,这与background-attachment:fixed;属性功能相同。以下代码可以实现相对于浏览器视图向右移动100px,向下移动50px。并且拖动滚动条时位置固定不变
#div1{
width:200px;
height:200px;
border:2px red solid;
position:fixed;
left:100px;
top:50px;
}
Relative与Absolute组合使用
<div id="box1"><!--参照定位的元素-->
<div id="box2">相对参照元素进行定位</div><!--相对定位元素-->
</div>
1、参照定位的元素必须是相对定位元素的前辈元素
2、参照定位的元素必须加入position:relative;
#box1{
width:200px;
height:200px;
position:relative;
}
3、定位元素加入position:absolute,便可以使用top、bottom、left、right来进行偏移定位了
#box2{
position:absolute;
top:20px;
left:30px;
}
盒模型代码简写
颜色值缩写:关于颜色的css样式也是可以缩写的,当你设置的颜色是16进制的色彩值时,如果每两位的值相同,可以缩写一半
p{color: #336699;}
缩写:p{color:3369}
字体缩写:
1、使用这一简写方式你至少要指定font-size 和 font-family 属性,其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。
2、在缩写时 font-size 与 line-height中间要加入“/”斜扛。
一般情况下因为对于中文网站,英文还是比较少的,所以下面缩写代码比较常用
body{
font:12px/1.5em "宋体",sans-serif;
}
颜色值:
1、英文命令颜色
2.RGB颜色
p{color:rgb(133,45,200);}p{color:rgb(20%,33%,25%);}
3、十六进制颜色
p{color:#00ffff;}
长度值 CSS规范中假设“90像素=1英寸
1、 像素 2、em 3、百分比p{font-size:12px;line-height:130%}
8.水平居中设置
定宽块状元素:块状元素的宽度width为固定值
<style>
div{
border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/
width:200px;/*定宽*/
margin:20px auto;/* margin-left 与 margin-right 设置为 auto */
}
</style>
不定宽块状元素:块状元素的宽度width不固定
1.加入 table 标签
2.设置 display: inline 方法:与第一种类似,显示类型设为 行内元素,进行不定宽元素的属性设置
3.设置 position:relative 和 left:50%:利用 相对定位 的方式,将元素向左偏移 50% ,即达到居中的目的
垂直居中-父元素高度确定的单行文本
父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和 line-height 高度一致来实现的。(height: 该元素的高度,line-height: 顾名思义,行高(行间距),指在文本中,行与行之间的基线间的距离 )
垂直居中-父元素高度确定的多行文本(方法一)
html代码:
<body>
<table><tbody><tr><tdclass="wrap">
<div>
<p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>
css代码:
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle,所以我们不需要显式地设置了。
垂直居中-父元素高度确定的多行文本(方法二)
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell(设置为表格单元显示),激活 vertical-align 属性,但注意 IE6、7 并不支持这个样式, 兼容性比较差
隐性改变display类型
当为元素(不论之前是什么类型元素,display:none 除外)设置以下 2 个句之一:
1.position : absolute
2.float : left 或 float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以 display:inline-block(块状元素)的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。