首页 > 代码库 > HTML 与 css 的简单学习
HTML 与 css 的简单学习
第21课：
内联元素，又称为行内元素，主要来控制一行内的字：
如： span，不是独占一行，不能设置宽高，竖直方向上不能设置 margin与 pading的值，不过水平方向上可以设置哦。（因为它只在一行内起作用的）
块状元素： 常见的如：div。
第22课：内联与块状的转化
由内联变为块状;
span { background: bule; width: 200px; height: 200px; /* 下面这行就可以由 内联变为 块状；*/ display: block; ｝
由块状变为内联:
div { width: 200px; height: 200px; background: orange; display: inline; }
第23课：css控制段落文本：
p标签：表示一段话；
<style> #p1 { background: gray; text-indent: 20px; /*段落缩进*/ text-align: center; } </style> <body> <p id = "p1"> 我是殷大爷；</p> </body>
其它的，自己就可以参考css的手册了。
第24课：段落中的文字控制；
font-style, font-weight, font-size, line-eight, 等；
第25课：文字的精确控制；
字体的选择啦，如黑体啦，雅黑啦，新宋啊，New Times，用font-family 进行控制；
第26课 背景与图片；
<stype> body { background-image: url( 1,jpg); background-repeat: no-repeat; background-position: } </stype>
第27课:大图片作为背景;
第28课css选择器；
可以通过ID来说明 css的描述;也可以用class搂控制； 也可以用 div 来控制；
常见的有：ID选择器， class选择器， 标签选择器， 派生选择器；
第29课：css的优先级；
我总结的一个原则：控制的越精确，它的优先级就越高；
第30课： css的方式；
第一种： <style> </style>
第二种：专门写一个css的文件，用<link >引入；
第三种：可以import 其它的css文件；
第四种： 可以直接在标签里写入style；
每31课： css的初始化；
相同的元素，如li, 在不同的浏览器下，显示的效果稍有不同，是因为各浏览器对各元素的等默认的值略有不同；为了杜绝这样的情况，我们就通过css强制让所有的元素的属性值都一样，这个过程就是css的初始化；
第32课：HTML的学习思维导图；
第33课： h标签与p 标签；
h1-6系列表示 标题，字越来越小；
p 表示段落；
第34课：img 图片标签；
这样引入： <img src=http://www.mamicode.com/”表示图片的路径” alt=”表示它的对应的名字，差不多是这个意思“ title = “鼠标放下去就会显示的” /> ,它为单闭合标签；
第35课：图片是内联还是块状元素？
答案为：图片是一个特殊的内联元素，叫做替换元素，可以设置宽和高的；通常在css的初始化中都会把img这个元素转化为block.
第36课：有序列表与无序列表；
无序列表如：
<ul>
<li> 春 </li>
<li>夏</li>
</ul>有序列表:
<ol>
<li> 春 </li>
<li>夏</li>
</ol>
第37课: 整齐的表格;
它的标签为<table>； 用标签<tr>增加行，用<td>增加列；
另外，也可以合并行与列的，用关键字： colspan 与 rowspan；
其余的控制就交给css来实现吧；
第38课：超链接标签；
链接用的标签为：<a> ，可以这样表示：
<a href = http://www.mamicode.com/“网址“> 显示的内容
注意问题：如何让它可以蹦出来一个新网页呢？ <a href = http://www.mamicode.com/“网址“ target = “_blank(它表示默认的自己的网页”> 显示的内容
如果加入title,则鼠标放上以后就会显示的内容；
第39课：锚点；
如：<a name = p1> </a>, 它的作用就是给一个大一点的网页进行定位；
第40课： css的 a 标签的伪类
css允许我们针对 a 标签的4种状态设置各自的css的特性，即它的伪类；四种状态分别为： a:link, a:visited, a:hover, a:active, 注意：它们是有顺序的；
第41课：字符实体；
在HTML的开发当中，有一些字符不适合直接说出，就是怕与HTML的中的符号冲突啊，如：<, > , ”等；一般用 & + 实体名 + ；实体有很多的哦；
第42-47课：首页布局实战
第48课：利用行高，设置文字的竖直居中；
第49课：IE bug及兼容测试；解决一些小小的兼容性的小问题；
第50课：色彩有表示；
1，颜色用数字表示；2： 颜色由3原色组成的，RGB; 3： 3原色各在【0-255】之间变化；
综上：材质是组合3原色， 1，用16进制组合，从 [00 – FF]，如：#0F15D2；2, 用10进制来组合,如： rgb(102,45,201)；3,用HTML提供的常用颜色表示，如 organge, pink, purple, red;
第51课：尺寸的表示：
1：可以用像素表示；2，可以用百分比表示，占父元素的百分比；3，可以用em 表示，它是相对大小，指其父素的 font-size表示 一个 em 单位； 等；
第52课： CSS 画圆角；
用 css 的 border-radius 来控制圆角的半径；
第53课：查对定位与绝对定位；
相对定位指的是：相对正常的位置，偏移某些元素；position: relative; top: ** ; left: **;
绝对定位是相对于父元素的；用绝对定位时，要求父元素有：position的属性才行，否则将依据父的父，或再往上去找，直到有posiiton的属性为止；
第54课： overflow 溢出处理；
用 overflow 标签来处理；可以visible,可以 hidden, 可以 scroll ;等；
第55课； 表单；
在用户注册，在线报名等场合时，需要把用户的信息提交；
第56课： 框架集；
用fromset 来处理；
HTML 与 css 的简单学习