HTML基础
<em>强调标签,<strong>加粗标签
<q>短文本引用,<blockquote>长文本引用,这两个标签会让文字带双引号。
空格
<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). 无已定位祖先元素,以浏览器窗口为基准定位。
设置偏移量:有无已定位祖先元元素,均以浏览器窗口为基准定位。