HTML+CSS实战入门这篇就够了

CSS+HTML

  • 前言
    • CSS
      • HTML
        • 实战CSS+DIV布局(HTML内容可自行补充)

前言

大家好,
为了入门即能完成一个HTML+CSS的一个网页,所以我把CSS放在HTML的前面讲。因为一个网页的布局是起始关键是相当重要的,只有清楚的知道如何布置好的你网页框架,才能完成HTML内容的编写的清晰,否则便无从下手,或导致一个界面混乱的网页被你制作出来。下面让我们开始吧。

CSS

1.CSS 指层叠样式表 (Cascading Style Sheets)
样式: 完成网页各类样式,例如:字体大小,颜色;背景颜色;界面分层。

层: 这里需要引入CSS的重要盒模型 (CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框 和 外边距 的方式。如图下图)

HTML+CSS实战入门这篇就够了_第1张图片
HTML+CSS实战入门这篇就够了_第2张图片
一个盒模型便能理解为一个层(HTML中用一对div标签来构建块,即代表这一个盒模型),理解清楚盒模型的层次概念对布局有着重要的作用。实例,

HTML+CSS实战入门这篇就够了_第3张图片
图中P”层“(块)是整个盒子,其他矩形在这便是element元素。

2.CSS选择器

2.1基本样式选择器使用语法:
HTML+CSS实战入门这篇就够了_第4张图片
功能: 实现HTML标签样式。举例,选用HTML段落P标签

p {
  color: red; //设定

里面的字体颜色为红色 }

2.2两类重要的css特殊选择器

  • id选择器
    功能:在id选择器的 { } 中输入你需要的样式,便能使 标有此id 的HTML元素的样式改变。
    语法:id 选择器以 # 来定义。例如,

css中代码为#red {color:red;}
html中代码为

这个段落是红色。

便能实现含有id=“red”的标签的样子为红色。

注:#符号不可省略

  • 类选择器(class)
    功能:实现标有对应class类的html标签的样式。
    语法:类选择器以一个点号显示。例如,

css中代码为
.center {text-align: center}
html中代码为

This heading will be center-aligned

this heading will…便会居中显示。

2.3 属性选择器
功能:可以为拥有指定属性的 HTML 元素设置样式,而不仅限于 class 和 id 属性。
语法:[ ] 括号中自定义。例如,

“css中代码”
[title] { color:red; }
html中代码

Hello world

hello worl字体颜色将会以red红色显示。
3.CSS定位
CSS的定位样式功能决定着多层(多个盒模型)的布局摆放。

  • 浮动float
    在选择器 { } 中使用float参数可以使可以决定着盒模型的位置(这里要仔细考虑是相对定位还是绝对定位问题),有时需要配合clear参数使用。

详解请点击此处.

4.块 (一切皆为框,辨清块框行框行内框文档流

块框: div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。
(一个盒模型相当于一个块框)

行框: span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。

行内框: 行内框属于行框,它的存在是便于理解。

文档流: 介绍文档流主要是想说明在float参数下,中的文本内容会默认环绕着浮动目标,导致行框被自动缩进改变了宽度,这样我们便可以实现一些不同的布局。

HTML+CSS实战入门这篇就够了_第5张图片

其他详细CSS和HTM内容请查寻此网站:W3SCHOOL.【希望大家把它当成字典来用,这样省时一点,当然把它然成书本来看也是可行的,这点自行抉择便好。】

HTML

1.HTML的框架结构

HTML: 说白了就是用标签管理内容,再结合CSS使样式变得漂亮美观。
HTML+CSS实战入门这篇就够了_第6张图片
其实仅仅有html和body也能完成一个简单的界面,如下图。

HTML+CSS实战入门这篇就够了_第7张图片
所以标签的使用按你网页要求设计所需选取即可,不必过多累赘。

2.html中的块元素

也参照上诉CSS盒模型
HTML+CSS实战入门这篇就够了_第8张图片
3.必须属性标签style

HTML+CSS实战入门这篇就够了_第9张图片
style应该被强调: 应为这个标签是用于引用CSS样式的,所以是必须的。

实战CSS+DIV布局(HTML内容可自行补充)

1.实现左边块右边块
效果:
在这里插入图片描述
代码:

HTML+CSS实战入门这篇就够了_第10张图片
分界线——————————————再来看看没有float的效果吧

HTML+CSS实战入门这篇就够了_第11张图片
这正是我想强调”的: DIV块默认的生成是至上而下的,如不施加参数改变布局是达不到上面的效果的。

2.布局之clear参数

效果:
HTML+CSS实战入门这篇就够了_第12张图片

代码:

HTML+CSS实战入门这篇就够了_第13张图片
分割线—————————————————————再来看看没有clear是什么样的效果吧

在这里插入图片描述

3.关于图片路径问题

相对路径绝对路径

举例,小明问大明:“你知道光头强在哪吗?”
大明回答一:他住在我们加隔壁小区。这便是相对路径
大明回答二:他住在北京XX小区XX楼XX号。这便是绝对路径

补充: 界面效果显示如遇见到卡顿可更换浏览器查看效果。

结语: 欢迎大家补充和指正有错误的地方并且有什么建议都可私信联系我,谢谢。

你可能感兴趣的:(全栈网页倔强成长)