【HTML+CSS】(1)基本语法

HTML基金会

<em>他强调标签，<strong>加粗标签

<q>短文本引用。<blockquote>长文本引用，这两个标签会让文字带双引號。

&nbsp; 空格

<br/>换行，<hr/>水平横线

<address>地址标签

<code>单行代码。<pre>多行代码，能够增加代码的标签。让显示更加好看

<ul>无序列表。<ol>有序列表： <li>列表子元素

<table>表格标签，caption标题标签，summary属性：用来描写叙述表格，不显示在页面上。

<a>连接标签，mailto属性能够发送至邮箱。假设mailto后面同一时候有多个參数的话。第一个參数必须以？开头，后面的參数每个都以&切割比如：

<a href="mailto:thrforever@126.com?

cc=xiaoming@imooc.com&bcc=xiaoyu@imooc.com&subject=主题&body=邮件内容">发送</a>

<input>输入框，type类型：text普通文本。password密码输入，radio/checkbox单选框/多选框：checked="checked"默认选中。

<textarea>文本域，能够指定列数cols和行数rows。

<select>下拉列表，每一项用<option>。设置multiple="moltiple"能够支持多选下拉列表。

<input>的type：sumbit用来提交数据，reset用来重置数据。

<lable for="控件id"名称>能够在点击lable时和点击所指向控件一个效果。

CSS基础

css凝视：/* 凝视内容 */

样式的优先级别：内联式 > 嵌入式 > 外部式，（内嵌式和嵌入式两者谁在html文件后面，谁起作用）

选择器：

(1). 标签选择器：p{}

(2). 类选择器：.class{}

(3). ID选择器：#id{}

(4). 子选择器，仅仅有子第一级别有效：.class>span{}

(5). 包括（后代）选择器。子全部级别都有效：.class span{}

(6). 通用选择器：*{}

(7). 伪类选择器：用来写移动、悬浮等样式：a:hover{}

(8). 分组选择器：a span{}

css某些样式是具有继承性的。比如颜色。定义一个样式颜色后，它的子元素也都具有这一属性。可是border没有继承性。

谁的权值高。就採用谁的样式：标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100，继承的权值非常低。比1还小。

当有同样权重的样式存在时，会依据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。

假设要自己定义最高权值，能够在样式后面使用!important来解决，注意important要写在分号的前面。比如：

p{color:red!important;}
p{color:green;}

就会採用red的颜色。

设置文字字体：

body{font-family:"Microsoft Yahei";}

font-weight:bold; 粗体

font-style:italic; 斜体

text-decoration:underline; 下划线

text-decoration:line-throught; 删除线

text:indent:2em: 给2个文字大小的空白

line-height:2em; 行高为2倍文字高度

letter-spacing:50px; 指定字母间距

word-spacing:50px; 指定单词间距

text-align:center; 使块状元素中的行内元素比如文本、图片等居中

css中。html中的标签元素大体被分为三种不同的类型：块状元素、内联元素（又叫行内元素）和内联块元素。

常见的块状元素：

<div><p><h1>~<h6><ol><ul><dl><table><address><blockquote><form>

常见的内联元素：

<a><span><br><i><em><strong><label><q><var><cite><code>

常见的内联块状元素：

<img><input>

display:block; 使某个元素成为块状元素

display:inline; 使元素成为内联元素

display:inline-block 使元素成为内联块状元素（同一时候具备内联元素、块状元素的特点）

块状元素特点：

(1). 每一个块状元素都从新的一行開始，而且其后的元素也另起一行

(2). 元素的高度、宽度、行高以及顶和底边距都能够设置。

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

内联元素特点：

(1). 和其他元素都在一行上。

(2). 元素的高度、宽度、行高及顶部和底布边距不可设置。

(3). 元素的宽度就是它包括的文字或图片的宽度，不可改变。

当内联元素之间出现间距问题的时候，能够删除掉html中不必要的空格、换行等就能够解决。

内联块状元素特点：

(1). 和其它元素都在一行上。

(2). 元素的高度、宽度、行高以及顶和底边距都能够设置。

盒子模型：

border:2px solid red; 2px的实心的红色的边框，拆开写就是 border-width:2px; border-style:solid; border-color:red;

border-style（边框样式）常见的有：dashed（虚线）、dotted（点线）、solid（实线）

border-width（边框宽度）能够设置：thin、medium、thick。最经常使用还是直接设置像素。

border-bottom:1px solid red: 仅仅为下边框设置样式

padding:20px 10px 15px 30px; 和 padding-top:20px; padding-right:10px; padding-bottom:15px; padding-left:30px 效果一致。顺序是上、右、下、左。

padding:10px 20px; 上下10px，左右20px

padding:10px; 上右下左全是10px

margin、border和padding用法同理。

(1). 包括（后代）选择器

(1). 包括（后代）选择器

Flow、浮动模型、层模型css包括3中主要的布局模型，用英文概括为：Flow、Layer和Float。在网页中三种布局模型：流动模型(Flow)、浮动模型(Float)、层模型(Layer)。

默认的布局模式就是流动布局模型，特征：

(1). 块状元素都会在所处的包括元素内自上而下按顺序垂直延伸分布，由于在默认状态下。块状元素的宽度都是100%。实际上，块状元素都会以行的形式占领位置。

(2). 内联元素都会在所处的包括元素内从左到右水平分布显示。

浮动模型：

float:left; 设置左浮动，能够使不论什么元素都从左到右一行显示。

层模型有3种形式：绝对定位(position:absolute)、相对定位(position:relative)、固定定位(position:fixed)

(1). 绝对定位：设置position:absolute后使用left、right、top、bottom属性（类似间距的设置）相对于其最接近的一个具有定位属性的父包括块进行绝对定位，假设不存在这种包括块，则相对于body元素。

(2). 相对定位：设置position:relative后通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完毕的过程首先按static(float)方式生成一个元素（而且元素像层一样浮动起来）。然后相对于曾经的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动（即原来所占的空间还在那）。

(3). 固定定位：设置position:fixed;类似绝对定位，可是它是相对于浏览器视图的，当拖动滚动栏时，它的位置不会改变。

要想使用position:absolute实现相对于某个元素定位，要满足这几个条件：

(1). 參照定位的元素必须是相对定位元素的前辈元素

(2). 參照定位的元素必须增加position:relative;

(3). 定位元素增加position:absolute;

css简写：

body{
        font-style:italic;
        font-variant:small-caps;
        font-weight:bold;
        font-size:12px;
        line-height:1.5em;
        font-family:"宋体",sans-serif;
}

能够简写成：

body{
        font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}

使用这样简写至少要指定font-size和font-family属性，其它的属性假设未指定将使用默认值，在缩写时。font-size与line-height中间要增加"/"。

普通情况下由于对于中文站点，英文还是比較少的，所以以下的缩写比較常见：

body{
	font:12px/1.5em "宋体",sans-serif;
}

颜色值：

p{color:red;}

p{color:rgb(133,45,200);}

p{color:rgb(20%,33%,25%);}

p{color:#ff00ff;}

长度值：

css规范中如果 90像素=1英寸

假设font-size是14px，那么1em=14px，计算的标准以父元素的font-size为基础。

line-height:130%; 设置行高为字体的130%。

怎样设置块状元素水平居中

width:500px;

margin:20px auto; 就可以



不定宽块状元素居中方法：

(1). 增加table标签。设置margin:0 auto;

(2). 设置快级元素的display:inline; 然后再父容器中用text-align:center; 实现居中

(3). 给父元素设置float，然后设置position:relative; 和 left:50%; 子元素设置position:relative 和 left:-50%; 来实现

设置 height:100px; 和 line-height:100px; 的高度一致，能够让文本垂直方向居中。

多行文本的垂直居中：

方法1：

css中有一个用于数值居中的属性vertical-align，但这个属性仅仅有在父元素为td或者th时，才会生效，所以要给外面套table标签，并设置vertical-align:middle;

方法2：

设置块级元素的display:table-cell; 和 vertical-align:middle;

隐性改变display类型：

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

(1). position:absolute;

(2). float:left; 或者 float:right;

后，元素会自己主动以display:inline-block的方式显示。当然就能够设置width和height的值了，比如给a元素设置后也能够给a指定宽高了。

text-decoration:none; 去除链接下划线

text-indent:20px; 文字偏移20px

Fixed定位：

定为形式：绝对定位；

特点：位置固定，兄弟元素会从其下穿过；

未设置偏移量：(1). 有已定位祖先元素。以祖先元素为基准定位。

(2). 无已定位祖先元素。以浏览器窗体为基准定位。

设置偏移量：有无已定位祖先元元素。均以浏览器窗体为基准定位。

版权声明：本文博主原创文章。博客，未经同意不得转载。