html＋css基础

来源：互联网发布：hadoop和python 编辑：程序博客网时间：2024/06/08 02:20

慕课网html＋css基础课程 http://www.imooc.com/view/9

html常用标签

<q> 表示引用别人的话，自带双引号效果——用于单句引用

<blockquote> 左右两侧同距缩进——用于长段文字的引用

<br />xhtml1.0规范

<hr />水平横线

<address> 地址、联系方式（默认斜体强调）

<code> 一行内的代码格式

<pre> 多行的代码格式——预处理语句，保留源代码的空格和换行

<table> 表格——默认没有表格线

<th> 表头——默认粗体居中

<table summary> 表格的简要介绍——便于搜索引擎理解表格内容，便于阅读浏览器显示

<caption> 表格标题

<a href=链接地址 title＝鼠标划过时显示的文本> ——默认链接显示为蓝色，点击后为紫色

<a href=“mailto:yy@qq.com;xx@qq.com?subject&body&cc&bcc” > cc 抄送地址｜bcc 密件抄送地址｜subject 邮件主题｜body 邮件内容

<img src＝“” alt＝“” title＝“”> alt 图片加载不出时的替换文本｜title 鼠标滑过图片时的显示文本

<textarea cols＝“” rows＝“”> 文本域

<select multiple＝“多选个数”> multiple表示多选（windows 下ctrl➕单击｜mac 下command＋单击）

<input type＝“” id＝“” value＝“” placeholder＝“”> id 用于label标签和for属性对应｜name 提交表单时控件名｜placeholder 提示信息｜value 默认值

<label for=“”> 点击标签内容等同于对for’属性对应控件进行操作

css不同样式

css：内联式、嵌入式、外部式

<span style=“”> 内联式

相同权值下，按照“就近原则”显示 —— 标签选择器权值＝1；类选择器权值＝10；ID选择器权值＝100；继承选择器权值～0.

标签选择器：标签{｝

类选择器：.自定义名称define（英文）{} ——<span class=自定义名称define>

id选择器；#自定义名称define（英文）｛｝——<span id=自定义名称define>

类选择器和id选择器的区别：1.id选择器在一个html文档中只能使用一次，而类选择器可以使用多次；2.类选择器可以实现词列表（为一个元素同时设置多重样式），而id选择器词列表不存在

子选择器：.自定义名称define>标签{} ——class为define名下的第一代子元素

包含(后代)选择器：.自定义名称define 标签{} ——class为define名下的所有子代元素

通用选择器： *{} ——对html中的任意标签都适用

伪类选择符：a:hover{} 鼠标滑过链接时，显示状态的改变

分组选择符：p,h1{} 为不同标签设置相同的属性

css样式中，有的具有继承性：颜色、字号；有的不具备继承性：边框

用户自己设置的浏览器样式>网页制作者设置的样式>浏览器默认设置的样式

［特殊］设置最高权值：p{color:red!important;} —— 覆盖用户自己设置的浏览器样式

文字排版－－字体：(font-family:”Microsoft Yahei”)—— 网页常用字体为“微软雅黑”|字号(font-size:18px)｜颜色(color:red)｜粗体(font-weight:bold)｜斜体(font-style:italic)｜下划线(text-decoration:underline)｜删除线(text-decoration:line-through)

段落排版－－缩进{text-indent}｜行高(line-height)｜字母间距(letter-spacing)｜单词间距(word-spacing)｜对齐(text-align)

块状与内联

常用的块状元素有：

常用的内联元素有：

常用的内联块状元素有：

xx{display:block;} 将元素显示为块级元素

块级元素特点：

1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

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

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

xx{display:inline;}

内联元素特点：

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

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

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

xx{display:inline-block;}

inline-block 元素特点：

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

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

盒模型－－<div>,<ul>,<ol>,<p>,<h>,<table>

边框：粗细、样式、颜色

div{ border:2px solid red}

div{

border-width:2px;

border-style:solid;

border-color:red;

}

border-width: thin | medium | thick（不常用，通常直接用px表示）

border-style: solid（实线）| dotted（点线）| dashed（虚线）

border-color: 十六进制颜色

允许为单一边框（border-top | border-bottom | border-left | border-right）设置粗细、样式及颜色

宽度和高度（内容范围）

div{ width:20px; height:20px}

填充

div{ padding:20px 10px 15px 30px}（上、右、下、左）

div{

padding-top:20px;

padding-right:10px;

padding-bottom:15px;

padding-left:30px;

}

上下左右都一样：div{ padding:10px; }

上下为10px，左右为20px：div{ padding:10px 20px; }

左右同为20px：div{ padding:10px 20px 30px; }

边界

div{ margin:20px 10px 15px 30px }（类似于填充）

布局模型

布局模型与盒模型一样都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基础之上，又不同于我们常说的 CSS 布局样式或 CSS 布局模板。如果说布局模型是本，那么 CSS 布局模板就是末了，是外在的表现形式。

CSS包含3种基本的布局模型，用英文概括为：Flow、Layer 和 Float。

在网页中，元素有三种布局模型：

1、流动模型（Flow）‘默认布局模型’

2、浮动模型 (Float)

3、层模型（Layer）

流动模型

第一点，块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。

第二点，在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

浮动模型

实现块状元素的并列显示

div{ float:left }

层模型

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作

层模型有三种形式：

1、绝对定位(position: absolute)

2、相对定位(position: relative)

3、固定定位(position: fixed)

绝对定位

position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。

相对定位

position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动。

偏移前的位置保留不动？

虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着，所以后面的span元素是显示在了div元素以前位置的后面。

固定定位

表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。不会受文档流动影响。

字体缩写

body{

font:italic small-caps bold 12px/1.5em “宋体”,sans-serif;

}

注意：

1、使用这一简写方式你至少要指定 font-size 和 font-family 属性，其他的属性(如 font-weight、font-style、font-varient、line-height)如未指定将自动使用默认值。

2、在缩写时 font-size 与 line-height 中间要加入“/”斜扛。

长度值

1.像素（css规范中假设’ 90像素＝1英寸 ’，实际情况是与显示器的像素值有关）

2.em（相对于字体的font－size值而言）

3.百分比（相比于字体的font－size值而言）

水平居中设置

如果被设置元素是行内元素，水平居中是通过给父元素设置text－align：center 来实现的
如果被设置元素是块状元素，且为定宽块状元素，水平居中可以通过设置左右margin值为“auto” 来实现居中
如果被设置元素是块状元素，且为不定宽块状元素

加入 table 标签
设置 display: inline 方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
设置 position:relative 和 left:50%：利用相对定位的方式，将元素向左偏移 50% ，即达到居中的目的

加入table标签（利用table标签的长度自适应性，既不定义其长度也不默认父元素body的长度，根据文本长度决定）

1）为需要设置的居中元素外面加入table标签（包括<tbody>、<tr>、<td>）

2）为table设置左右margin值为“auto” 来实现居中

设置display:inline方法（改变块状元素为行内元素）

1）将块状元素改为行内元素：ol{ display:inline; }

2）使用 text-align:center; 实现居中

设置position：relative方法

1）给父元素设置float，再设置position:relative和left:50%

2）子元素设置position:relative和left:-50%

我们可以这样理解：假想ul层的父层（即下面例子中的div层）中间有条平分线将ul层的父层（div层）平均分为两份，

ul层的css代码是将ul层的最左端与ul层的父层（div层）的平分线对齐；而li层的css代码则是将li层的平分线与ul层的最左端（也是div层的平分线）对齐，从而实现li层的居中。

垂直居中

父元素高度确定的单行文本

设置父元素的height和line－height一致（height为元素高度，line－height为行高［行间距］）行间距＝line-height － font-size ，分为两半，分别加到文本行的顶部和底部

弊端：若文本内容过多超过块状元素的宽度，则部分文本无法正常显示

父元素高度确定的多行文本

1.插入table标签（利用table标签下，用于设置垂直居中的vertical-align属性，默认值为middle）

css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用

2.设置块状元素的display为table－cell，激活vertical－align属性

这种方法的好处是不用添加多余的无意义的标签，但缺点也很明显，它的兼容性不是很好，不兼容 IE6、7而且这样修改display的block变成了table-cell，破坏了原有的块状元素的性质。

隐性改变display类型

当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. position : absolute

2. float : left 或 float:right

简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

0 0