HTML/CSS基础篇

HTML/CSS基础篇

1.head头部介绍：

<head>标签的作用：文档的头部描述了文档的各种属性和信息，包括文档的标题等，head标签主要包括http-equiv,title,content,script,link等

概念：语义化：明白每个标签的用途（在什么情况下使用此标签合理）比如，网页上的文章的标题就可以用标题标签，

2.常见的body标签:

<em>需要强调的文本</em> --斜体表示

<strong>需要强调的文本</strong> -加粗

<span>标签是没有语义的，它的作用就是为了设置单独的样式用的。

<blockquote>的作用也是引用别人的文本，但它是对长文本的引用，如在文章中引入大段某知名作家的文字，这时需要这个标签。

<br/>空标签

&nbsp 空格

<hr>标签，添加水平横线

<address>标签，为网页加入地址信息<address>联系地址信息</address>斜体

<code>标签添加代码 <code>var i=i+300;</code>，多行代码<pre>标签

<pre> 标签的主要作用:预格式化的文本。被包围在pre 元素中的文本通常会保留空格和换行符。

列表可以使用ul-li标签来完成。ul-li是没有前后顺序的信息列表。

<ul> --新闻列表信息

......

</ul> --有序列表

<ol>有序列表

......

</ol>

<div>…</div>在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器;

<div id="版块名称">…</div>给独立的逻辑部分命名

<table summary="表格简介文本">…</table>：整个表格以<table>标记开始、</table>标记结束。

<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示

<tr>…</tr>：表格的一行，所以有几对tr表格就有几行。

<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。

<th>…</th>：表格的头部的一个单元格，表格表头。

表格中列的个数，取决于一行中数据单元格的个数。

总结：

1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的

2、表头，也就是th标签中的文本默认为粗体并且居中显示

为表格添加样式

table tr td,th{border:1px solid #000;}

</style>

<a href="目标网址" title="鼠标滑过显示的文本"target="_blank">链接显示的文本</a>

mailto在网页中链接Email地址,如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。

</form>

注意:

1、所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在<form></form>标签之间（否则用户输入的信息可提交不到服务器上哦！）。

2、method:post/get的区别这一部分内容属于后端程序员考虑的问题,当用户需要在表单中输入大段文字时，需要用到文本输入域

<textarea cols="50" rows="10" >在这里输入内容...</textarea>

</form>

单选框：

下拉列表:

<form action="save.php"method="post" multiple="multiple" > 多选

</select>

提交表单和数据

label标签

注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。

3.CSS样式：

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文件内

优先级：内联式 > 嵌入式 > 外部式

4.选择器：

标签选择器：其实就是html代码中的标签。如<html>、<body>、<h1>、<p>、<img>

p{font-size:12px;line-height:1.6em;}

类选择器：

.类选器名称{css样式代码;}

ID选择器：

# 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;}

特点：

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

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

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

常用的内联元素有：display:inline

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

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

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

常用的内联块状元素有：display:inline-block

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="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>

<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 了，且默认宽度不占满父元素。

posted @ 2016-11-06 22:32 小小强~ 阅读(165) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

小小强~

HTML/CSS基础篇

公告