HTML&CSS

最新推荐文章于 2022-12-24 15:00:23 发布

空山最险

最新推荐文章于 2022-12-24 15:00:23 发布

阅读量238

点赞数 1

文章标签： HTML&CSS

本文链接：https://blog.csdn.net/yeling0/article/details/100823914

版权

导学

什么是HTML？

为什么要学习HTML？

HTML5和HTML有何区别？

HTML基础详解

基础标签

成对出现，可嵌套

Head、body

手册

W3School、菜鸟教程

标题

<h1>、...、<h6>等标签进行标识

段落

<p>标签定义段落，块元素

超链接

<a>标签

路径问题**

图像

<img>标签定义图像

HTML元素简介以及使用

HTML元素指的是从开始标签到结束标签的所有代码

开始标签元素内容结束标签

<h1> 这是一个h1标签 </h1>

<br />（空元素）

HTML元素语法

元素的内容是开始标签与结束标签之间的内容

空元素在开始标签中进行关闭

嵌套的HTML元素

大多数的HTML元素都是可以进行嵌套的

属性使用方法

1、标签可以拥有属性为元素提供更多的信息

2、属性以键值对的形式出现，如：href=”www.baidu.com”

3、常用的标签属性

<h1>:align对齐方式

<body>:bgcolor背景颜色

<a>:target规定在何处打开链接

通用属性

Class:规定元素的类名

Id:规定元素的唯一ID

Style:规定元素的样式

Title:规定元素的额外信息

文本格式化及使用

链接属性及使用

1、链接数据

文本链接

图片链接

2、属性

href属性:指向另一个文档的链接

name属性:创建文档内的链接

3、Img标签属性

alt:替换文本属性

Width:宽

Height:高

练习：

测试图片链接和文字链接，分别使用不同的打开方式。
测试文档内的链接

表格的使用

如何创建如下表格：

有边框的表格
空单元格
带有标题的表格。<caption>
表格内的标签
单元格边距 cellpadding
单元格间距cellspacing
表格内的背景色和图像 bgcolor background
单元格内容排列
跨行和跨列单元格colspan、rowspan

练习：

列表的使用

无序列表

使用标签：<ul>、<li>

属性：style="list-style-type: square" vulue:disc、circle、square

有序列表

使用标签：<ol>、<li>

属性：type="A" value:A、a、I、i、start

嵌套列表

使用标签：<ul>、<ol>、<li>

自定义列表

使用标签:<dl>、<dt>、<dd>

块元素标签的使用

HTML块元素

块元素在显示时，通常会以新行开始，如：<h1>、<p>、<ul>

内联元素

内联元素通常不会以新行开始，如：<b>、<a>、<img>

HTML <div>元素

<div>元素也被称为块元素，其主要是组合HTML元素的容器

HTML span元素

<span>元素是内联元素，可作为文本的容器

文档流

元素在文档流中的特点

块元素

块元素在文档流中独占一行，块元素会自上向下排列
块元素在文档流中默认宽度是父元素的100%
块元素在文档流中的高度默认被内容撑开

内联元素

内联元素在文档流中只占自身的大小，会默认从左向右排列。
在文档流中，内联元素的宽度和高度默认都被内容撑开。

HTML表单

完成以下练习：

HTML5介绍

HTML5是HTML最新的修订版本，2014年10月由万维网联盟（W3C）完成标准制定。

HTML5的设计目的是为了在移动设备上支持多媒体。

HTML5 简单易学。

HTML5 中的一些有趣的新特性

用于绘画的 canvas 元素

用于媒介回放的 video 和 audio 元素

对本地离线存储的更好的支持

新的特殊内容元素，比如 article、footer、header、nav、section

新的表单控件，比如 calendar、date、time、email、url、search

全局属性

contentEditable属性

hidden属性

spellcheck属性

Tabindex属性（通常用于表单元素和链接元素）

CSS选择器

标签选择器

直接以标签名作为索引的选择方式

Id选择器

Id选择器可以为标有id的HTML元素指定特定的样式

Id选择器以“#”来定义

目前比较常用的方式是id选择器常常用于建立派生选择器

类选择器

类选择器以一个点显示

Class也可以用作派生选择器

属性选择器

对带有指定属性的HTML元素设置样式

属性和值选择器

[title]{

Color:red;

}

[title=my]{

Color:blue;

}

选择器分组

h1,h2{color:blue}

*{color:red}

类选择器

CSS介绍及语法

CSS（Cascading Style Sheets）指层叠样式表。

CSS样式表极大的提高了工作效率。

三种样式表插入方法

内联样式表

内部样式表

body{background-color: brown}

p{margin-left: 100px}

</style>

外部样式表

CSS基础语法

h1{

Color:green;

}

如果属性大于1个，属性之间用分号隔开。

如果属性值大于1个单词，而需要用加上引号

CSS高级语法

选择器分组：

h1,h2,h3,h4,h5{color:red}

继承：

Body{

Color:green;

}

背景

CSS允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果

background-color 设置元素的背景颜色

background-image 把图片设置为背景

background-repeat 设置背景图片是否或者如何重复repeat、repeat-x、repeat-y、 no-repeat、inherit

background-attachment 背景图像是否固定scroll、fixed、inherit

background-position 设置背景图片的起始位置。结合上条属性的fixed值使用，Right center(两个值)

background-size 设置背景图片尺寸

简写：

body {background:#fff1f1 url('./static/home.ico') no-repeat fixed center center;}

文本

字体

Font-style值：

Font-variant值：

链接

a:link - 正常，未访问过的链接

a:visited - 用户已访问过的链接

a:hover - 当用户鼠标放在链接上时

a:active - 链接被点击的那一刻

如：a:link {color:#000000;}

注：也可以通过background-color设置背景颜色。

text-decoration 属性主要用于删除链接中的下划线：

列表

CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志

表格

CSS表格属性可以帮助我们极大的改善表格的外观

表格边框

折叠边框 border-collapse: collapse;

表格宽高

表格文本对齐

表格内边距

表格颜色

定位

改变元素在页面上的位置

CSS定位机制

普通流：元素按照其在HTML中的位置顺序决定排列的过程

浮动

绝对布局

CSS定位属性

Position：把元素放在一个静态的、相对的、绝对的、或固定的位置

Top：元素距离上方（向下）的偏移量

Left：元素距离左边（向右）的偏移量

Right：元素距离右边（相左）的偏移量

Bottom：元素距离下方（向上）的偏移量

Overflow：设置元素溢出其区域发生的事情

Clip：设置元素显示的形状

Vertical-align：设置元素垂直对齐方式

index：设置元素的堆叠方式

position 属性的五个值

Static

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。静态定位的元素不会受到 top, bottom, left, right影响。

Relative

当开启元素的相对位移以后，而不设置偏移量时，元素不会发生任何变化。
相对定位是相对于元素在文档流中原来的位置进行定位
相对定位的元素不会脱离文档流
相对定位会使我们的元素提升一个层级。
相对定位不会改变元素的性质，块元素还是块元素，内联元素还是内联元素。

Absolute

开启绝对定位，会使元素脱离文档流，因此不占据空间。
开启绝对定位后，如果不设置偏移量，则元素位置不会发生变化。

3、绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的父元素，那么它的位置相对于<html>

4、absolute 定位的元素会使元素提升一个层级，和其他元素重叠。

5、绝对定位会改变元素的性质。内联元素变为块元素，块元素的宽度和高度都被内容撑开。

Fixed

元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动。

注意： Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持。IE6不支持

Fixed定位使元素的位置与文档流无关，因此不占据空间。

Fixed定位的元素和其他元素重叠。

sticky

它的行为就像 position:relative; 而当页面滚动超出目标区域时，它的表现就像 position:fixed;，它会固定在目标位置。

元素定位表现为在跨越特定阈值前为相对定位，之后为固定定位。

这个特定阈值指的是 top, right, bottom 或 left 之一，换言之，指定 top, right, bottom 或 left 四个阈值其中之一，才可使粘性定位生效。否则其行为与相对定位相同。

练习：完成如下五种布局

CSS浮动

float属性可用的值

Left：元素向左浮动

Right：元素向右浮动

None：元素不浮动

Inherit：从父级继承浮动属性

浮动的一些特性

元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动。
元素浮动以后，会尽量向页面的左上或者右上漂浮。直到遇到父元素的边框或者其他的浮动元素。
如果浮动的元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素。
浮动的元素不会超过它上边的兄弟元素，最多一边齐。
浮动的元素不会盖住文字，可以通过浮动来设置文字环绕图片的效果。
块元素脱离文档流后，高度和宽度被内容撑开。内联元素脱离文档流以后会变成块元素（可以设置宽高）。

Clear属性（去掉浮动，包括继承来的浮动）

Clear属性值：left、right、both、inherit

浮动的应用

如何实现如下效果？

盒子模型

Margin(外边距) - 清除边框外的区域，外边距是透明的。

Border(边框) - 围绕在内边距和内容外的边框。

Padding(内边距) - 清除内容周围的区域，内边距是透明的。

Content(内容) - 盒子的内容，显示文本和图像。

内边距 Padding

边框 border

border:1px solid red; 3个属性分别对应边框宽度，类型，颜色。

类型属性有none solid dotted dashed double groove ridge inset outset

Border-radius 圆角边框 ex: border-radius:10px;

Box-shadow 边框阴影 ex: box-shadow:10px 10px 5px #00ff11;

Border-image 边框图片

外边距

练习：设计一个盒子模型

样式代码：iner{

.container{
margin: 0 auto;
width: 300px;
height: 300px;
border: 2px solid #ff6611
}
.bm{
margin: 14% auto;
/* vertical-align: middle; */
background-color: azure;
width: 200px;
height: 200px;
/* line-height: 200px; */
border: 3px double #11ee6d
}
.content{
margin: 13% auto;
/* vertical-align: middle; */
background-color: rgb(13, 236, 236);
width: 150px;
height: 150px;
/* line-height: 200px; */
border: 3px double #cdee11

}

高度塌陷

在文档流中，父元素的高度默认是被子元素撑开的。

但是，当子元素设置浮动以后，子元素脱离文档流，此时导致子元素无法撑起父元素，导致父元素的高度塌陷。

由于父元素的高度塌陷了，则父元素下的所有元素都会向上移动，这样导致页面布局混乱。

解决办法：

将父元素高度写死，以避免高度塌陷。

但是一旦父元素高度写死，父元素就无法自适应与子元素的高度变化。

将父元素也一并设置浮动。

虽然父元素被子元素撑开了，但是其后的元素同样会上浮。

绝对定位效果一样。

添加一个属性：overflow:hidden

Success

HTML布局

使用<div>元素布局

使用<table>元素布局

对齐

使用margin属性进行水平对齐（非居中）
使用position属性进行左右对齐（非居中）
使用float属性进行左右对齐（非居中）

Input和button或者说一些其他的表单控件对齐。

对齐之前

对齐之后

使用方法：

给button加上：vertical-align: middle;

分类

尺寸操作 p{max-height:200px}

P{cursor:alias;visibility:hidden}

display常用属性值：

CSS常用操作——导航栏

垂直导航栏

水平导航栏

导航栏效果

练习二样式代码：

<style>

ul {
width: 600px;
margin:0 auto;
overflow: hidden;
}
li{
float: left;
width: 25%;
list-style: none;
text-align: center;
}
a{
display: block;
width: 100%;
height: 40px;
line-height: 40px;
background-color: burlywood;
text-decoration: none;
}
a:hover{
background-color: chartreuse;
}
</style>

问题总结：

行内元素，如a标签，必须设置display:block；才能设置宽高
将li设置display:inline-block之后，如果无法与ul左对齐，则需要设置ul的padding-left：0；
如果每个li之间有间距，则设置float:left;

CSS常用操作——图片

Opacity 透明度，取值范围0~1

网页练习：天天生鲜

https://blog.csdn.net/xun527/article/details/77822274

空山最险

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML&CSS

目录导学HTML基础详解基础标签手册标题段落超链接图像HTML元素简介以及使用属性使用方法文本格式化及使用链接属性及使用表格的使用列表的使用块元素标签的使用文档流元素在文档流中的特点HTML表单HTML5介绍HTML5 中的一些有趣的新特性全局属性CSS选择器标签选择器Id选择器类选择器...
复制链接

扫一扫