- 慕课网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=“”> 内联式
<style type=“text/css”> 嵌入式
<link href=“css文件地址” rel=“stylesheet” type=“text/css”> 外部式
相同权值下,按照“就近原则”显示 —— 标签选择器权值=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)
- 块状与内联
常用的块状元素有:
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
常用的内联元素有:
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
常用的内联块状元素有:
<img>、<input>
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 个句之一:
2. float : left 或
float:right
简单来说,只要html代码中出现以上两句之一,元素的display显示类型就会自动变为以
display:inline-block
(
块状元素
)
的方式显示,当然就可以设置元素的 width 和 height 了,且默认宽度不占满父元素。