HTML+CSS实战入门这篇就够了
CSS+HTML
前言
大家好,
为了入门几能完成一个HTML+CSS的一个网页,所以我把CSS放在HTML的前面讲。因为一个网页的布局是起始关键是相当重要的,只有清楚的知道如何布置好的你网页框架,才能完成HTML内容的编写的清晰,否则便无从下手,或导致一个界面混乱的网页被你制作出来。下面让我们开始吧。
CSS
1.CSS 指层叠样式表 (Cascading Style Sheets)
样式: 完成网页各类样式,例如:字体大小,颜色;背景颜色;界面分层。
层: 这里需要引入CSS的重要盒模型 (CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。如图下图)
一个盒模型便能理解为一个层(HTML中用一对div标签来构建块,即代表这一个盒模型),理解清楚盒模型的层次概念对布局有着重要的作用。实例,
图中P”层“(块)是整个盒子,其他矩形在这便是element元素。
2.CSS选择器
使用语法:
两类重要的css选择器
-
id选择器
功能:在id选择器的 { } 中输入你需要的样式,便能使 标有此id 的HTML元素的样式改变。
语法:id 选择器以 # 来定义。例如,
css中代码为#red {color:red;}
html中代码为 <p id="red">这个段落是红色。</p>
便能实现含有id=“red”的标签的样子为红色。
注:#符号不可省略
- 类选择器(class)
功能:实现标有对应class类的html标签的样式。
语法:类选择器以一个点号显示。例如,
css中代码为 .center {text-align: center}
html中代码为<h1 class="center">This heading will be center-aligned</h1>
this heading will…便会居中显示
3.CSS定位
CSS的定位样式功能决定着多层(多个盒模型)的布局摆放。
- 浮动float
在选择器 {} 中使用float参数可以使可以决定着盒模型的位置,有时需要配合clear参数使用。
其他详细CSS和HTM内容请查寻此网站:W3SCHOOL.【希望大家把它当成字典来用,这样省时一点,当然把它然成书本来看也是可行的,这点自行抉择便好。】
HTML
1.HTML的框架结构
HTML: 说白了就是用标签管理内容,再结合CSS使样式变得漂亮美观。
其实仅仅有html和body也能完成一个简单的界面,如下图。
所以标签的使用按你网页要求设计所需选取即可,不必过多累赘。
2.html中的块元素
也参照上诉CSS盒模型
3.必须属性标签style
style应该被强调: 应为这个标签是用于引用CSS样式的,所以是必须的。
实战CSS+DIV布局(HTML内容可自行补充)
1.实现左边块和右边块
效果:
代码:
分界线——————————————再来看看没有float的效果吧
这正是我想强调”的: DIV块默认的生成是至上而下的,如不施加参数改变布局是达不到上面的效果的。
2.布局之clear参数
效果:
代码:
分割线—————————————————————再来看看没有clear是什么样的效果吧
3.关于图片路径问题
相对路径 和 绝对路径
举例,小明问大明:“你知道光头强在哪吗?”
大明回答一:他住在我们加隔壁小区。这便是相对路径
大明回答二:他住在北京XX小区XX楼XX号。这便是绝对路径
补充: 界面效果显示如遇见到卡顿可更换浏览器查看效果。
**结语:**欢迎大家补充和指正有错误的地方并且有什么建议都可私信联系我,谢谢。