admin管理员组文章数量:1530051
HTML+CSS学习——基础知识点
- HTML
- 基础
- 发展历史
- 网页组成
- 基本结构
- 标签结构
- 字符编码
- 标签
- 常用标签
- 1、文本标题 h1-h6
- 2、段落文本 p
- 3、换行 br
- 4、水平线 hr
- 5、加粗 strong
- 6、倾斜 em
- 7、删除线 del
- 8、下划线、上下标
- 9、div和span
- 10、列表
- 11、图片 img
- 12、超链接 a
- 13、表格 table
- 14、表单 form
- 15、音频 audio
- 16、视频video
- 其他
- 1、特殊符号
- 2、路径
- 3、长度单位
- CSS
- 基础
- CSS基本语法
- 内部样式
- 外部样式
- 行内样式
- 样式表的优先级
- 常用标签及属性
- 0、语义化标签
- 含义
- 语义化容器
- 块级元素和内联元素
- 1、选择器
- 各类选择器
- 选择器的权重
- 2、字体文本属性
- 常用属性
- 样式的优先级
- 3、列表样式
- 4、背景属性
- 5、浮动
- 6、Flex布局
- 7、盒子模型
- 内边距
- 边框
- 外边距
- 盒子内容溢出
- 垂直外边距合并问题
- 8、display
- 9、定位 position
- 10、垂直对齐 vertical-align
- 11、过渡 transition
- 12、透明度 opacity
- 13、光标类型 cursor
- 注意
- 清除默认样式
- 影响html元素位置的因素
- 定位元素重叠
- CSS精灵
- 字体图标
- 网页头部SEO三大标签
- Favicon图标
- 版心文件
- 项目目录结构
HTML
HTML是用来描述网页的一种语言
- HTML指的是超文本标记语言(Hyper Text Markup Language)
- HTML不是一种编程语言,而是一种标记语言(markup language)
- 标记语言是一套标记标签(markup tag)
基础
发展历史
发展初期,标记语言在各个浏览器上出现不兼容问题,需要一个标准.
查看不同标记语言标签在不同浏览器上是否兼容:caniuse
W3C(World Wide Web Consortium)万维网联盟
W3C制定了标记语言的标准,所以html在各个浏览器上都可以展示
网页组成
- HTML 结构:W3C制定了结构HTML的语法、标准
- CSS 表现:W3C制定了表现CSS的语法、标准
- JS 行为:W3C、ECMA制定了行为标准(W3C DOM,ECMAScript)
基本结构
<html>
<head>
<title>标题</title>
</head>
<body>
<P>
Hello World
</P>
</body>
</html>
标签结构
1、常规标记(双标记)
<标记> </标记>
<标记 属性 = “属性值” 属性=“属性值”> </标记>
例如:<head></head>
注意属性和属性值相同时,可以省略属性值
<hr noshade="noshade">等同于<hr noshade>
2、空标记(单标记)
<标记>
<标记 属性 = “属性值” 属性=“属性值” />
<br>
字符编码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE ***> 按照特定的HTML格式来解析代码
<html lang="**"> 告诉浏览器文本中的语言是英文
en 英文
zh-CN 中文
ja-jp 日文
<meta charset="**"> 字符编码集
ASCII 美国标准信息交换码
GB2312 汉字编码字符集
UTF-8 万国码字符编码
标签
常用标签
1、文本标题 h1-h6
<h1>一级标签</h1>
<h2>一级标签</h2>
<h3>一级标签</h3>
<h4>一级标签</h4>
<h5>一级标签</h5>
<h6>一级标签</h6>
文本标签自带加粗,默认一行,独占一行,有默认间距
2、段落文本 p
<p>段落文本内容</p>
标识一个段落(段落与段落之间有段间距)
3、换行 br
<br>
换行是一个空标记(强制换行)
4、水平线 hr
<hr>
水平分割线,空标记
<hr 属性 = "值">
<hr color="green"> //颜色
<hr width="500"> //宽度
<hr width="600" align="left"> //水平位置
<hr noshade="noshade"> //去掉默认的阴影
5、加粗 strong
<b>加粗内容</b>
<strong>强调的内容</strong>突出的文本 (推荐)
6、倾斜 em
<em>强调文本</em> (推荐)
<i>倾斜文本</i>
7、删除线 del
<s>文本</s>
<del>文本</del> (推荐)
8、下划线、上下标
<u>文本</u>下划线
<sub></sub>下标
<sup></sup>上标
9、div和span
div标签,没有具体的含义,用来划分页面的区域,独占一行
span标签,也没有具体意义,主要应用于对于文本独立修饰的时候,大小取决于文本内容
10、列表
无序列表
<ul>
<li></li>
<li></li>
<li></li>
</ul>
注意:
1、ul里面只能放li,li里面可以放其他标签
2、默认的是黑色的实心圆
属性:
type 类型
disc 实心(默认)
circle 空心
square 方形
none 去除
有序列表
<ol>
<li></li>
<li></li>
<li></li>
</ol>
注意:
1、ul里面只能放li,li里面可以放其他标签
2、数字自动生成
属性:
<ol type=""> 取值有1、a、Ⅰ等,表示排序号码,默认数字
<ol start=""> 取值是数字,表示从即开始计数
自定义列表
<dl>
<dt></dt> <!--图片-->
<dd></dd> <!--文字-->
</dl>
<dl>
<dt></dt> <!--图片-->
<dd></dd> <!--文字-->
</dl>
多用于图文混排
11、图片 img
<img src="" alt="">
标签:
src 图片路径
相对路径
绝对路径,不推荐,http请求访问本地的不显示
alt 图片未加载时显示的文本内容
title 鼠标悬停上去之后的提示信息
width px,宽度
height px,高度
若高宽单写任意一个,会等比缩放
12、超链接 a
<a href="">
href 路径
title 鼠标悬停上去之后的提示信息
target 跳转方式
_self 当前页面,默认
_blank 新窗口打开
链接到其他资源
1、链接到图片
<a href="xx.jpg">链接图片默认在浏览器中打开图片</a>
2、链接到图片下载,download属性指定下载文件名
<a href="xx.jpg" download="yy.jpg">添加download属性可以下载链接的资源</a>
3、链接到其他类型的文件
<a href="测试文件.txt">可以链接到其他类型文件</a>
<a href="测试文件.txt" download="其他文件">添加download属性可以下载链接到其他类型文件</a>
4、链接调用邮箱客户端发送邮件
<a href="mailto:iamshuren@yeah">发送邮件到iamshure@yeah</a>
5、链接到拨打电话
<a href="tel:18407850471">拨打电话</a>
5、链接到调用qq
<a href="http://wpa.qq/msgrd?v=3&uin=换成你自己的QQ号&site=qq&menu=yes">调用qq对话</a>
13、表格 table
<table> <!--创建表格-->
<th> <!-- 表示行 -->
<td></td> <!-- 表示单元格-->
<td></td>
</th>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
table只能放tr,tr里只能放td,td里可以放任意
表格 table 属性
宽度:width
高度:height
边框:border
边框颜色:bordercolor
背景颜色:bgcolor
水平对齐:align=“left / right / center”
cellspacing = “单元格与单元格之间的间距”
cellpadding = “单元格与内容之间的间隙”
行 tr 属性
高度:height
背景颜色:bgcolor
文字水平对齐:align=“left / center / righ”
文字垂直对齐:valign=“top / middle / bottom”
单元格 td 属性
宽度:width 如果一个单元格设置宽度,影响的是这一列的宽度
高度:height 同理给一个单元格设置高度,影响一行的高度
背景颜色:bgcolor
文字水平对齐:align=“left / center / righ”
文字垂直对齐:valign=“top / middle / bottom”
水平合并:colspan
垂直合并:rowspan 合并并不是取代,而是挤掉,挤出去
14、表单 form
表单的作用:收集用户信息
表单的应用:各种登录界面,个人信息提交
<form method="get/post" action="">
<input />
</form>
form属性
method 提交表单的方式
get
post
action 向何处发送表单数据
input属性
type:
text 文本框
password 密码框
number 数字
date 日期
datetime-local 时间
file 上传文件
hidden 隐藏
radio 单选框(同一组的name属性值必须相同)
checkbox 复选框(同一组的name属性值必须相同)
submit 提交框(等同于<button>提交</button>)
button 按钮框
reset 重置框(清空效果)
cheked 默认(可用于单选框默认勾选)
placeholder 描述输入字段预期值的简短的提示信息。兼容到E8以上
name 必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
value 描述 例如:<input type="submit" value="登录">
button按钮
type:
submit 提交
reset 清除重置
button 按钮
select下拉列表
<select>
<option>选项</option>
<option>选项</option>
<option selected>选项</option> /*默认值*/
...
...
</select>
textarea多行文本
<textarea cols="30" rows="5"></textarea>
rows属性用于设置行数
cols属性用于设置可见宽度,以平均字符宽度为单位
Form当中method的post和get的区别?
-
get是从服务器上获取数据,post是向服务器传送数据。
-
get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。
-
对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。
-
get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4(Internet Information Service 互联网信息服务)中最大量为80KB,IIS5中为100KB
-
get安全性非常低,post安全性较高。但是执行效率却比Post方法好。
15、音频 audio
<audio src=""></audio>
controls 显示音频面板
loop 循环播放
autoplay 禁用自动播放
16、视频video
<video src=""></video>
controls 显示控制面板
loop 循环播放
muted 静音
autoplay 自动播放
其他
1、特殊符号
特殊符号 | 解释 |
---|---|
尖角号 | < 左尖角号 < |
> 右尖角号 > | |
空格 | 该空格占据宽度受【字体】影响,明显而强烈 |
  占据的宽度正好是1个中文宽度,且不受字体影响 | |
版权 | © © |
商标 | ™ ™ |
® ® |
受语法印象,特殊符号无法在页面展示,需要用特殊字符
2、路径
相对路径
图片相较于当前文件夹下的位置
./ 表示当前文件夹
…/ 表示上一级文件夹
绝对路径
在硬盘上的位置
3、长度单位
默认是px,单位可写可不写
%,相当于父元素的百分比
CSS
Cascading Style Sheets 层叠样式表
用于渲染HTML元素标签的样式
WEB标准中的表现标准语言,表现标准语言在网页中主要对网页信息的显示进行控制,简单说就是如何修饰网页信息的显示样式。
目前推荐遵循的是W3C发布的CSS3.0.
用来表现XHTML或者XML等样式文件的计算机语言。
1998年5月21日由w3C正式推出的css2.0
基础
CSS基本语法
1、每个CSS样式由两部分组成,即选择符和声明,声明又分为属性和属性值;
2、属性必须放在花括号中,属性与属性值用冒号连接。
3、每条声明用分号结束。
4、当一个属性有多个属性值的时候,属性值与属性值不分先后顺序,用空格隔开。
5、在书写样式过程中,空格、换行等操作不影响属性显示。
语法定义:
选择器(选择符) {属性:属性值; 属性:属性值;}
内部样式
定义在标签里面
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> <!--在head中写style样式-->
<title></title>
<style type="text/css">
h1{
color: aqua;
}
</style>
</head>
<body>
<h1>0000000</h1> <!--结构创建对象-->
<h2>1111111</h1>
</body>
</html>
外部样式
html文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- 引入方式一 -->
<link rel="stylesheet" type="text/css" href="./css/index.css">
<!-- 引入方式二 -->
<style>
@import url(./css/index.css);
</style>
</head>
<body>
<h2>外部样式</h1>
</body>
</html>
css文件
h2{
color:red;
}
link和import两种引用的区别?
①差别1:本质的差别:link属于XHTML标签,而@import完全是CSS提供的一种方式。
②差别2:加载顺序的差别:当一个页面被加载的时候(就是被浏览者浏览的时候),link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再被加载。所以有时候浏览@import加载CSS的页面时开始会没有样式(就是闪烁),网速慢的时候还挺明显。
③差别3:兼容性的差别:@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题。
行内样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div style="height: 200px; width: 200px;">我是一个div</div>
</body>
</html>
样式表的优先级
根据html页面加载的顺序,后面加载的会覆盖前面的
一般情况下:行内>内部>外部
特殊情况可以选择优先级:!important 加载哪个样式上哪个优先级高
常用标签及属性
0、语义化标签
HTML 标签的一个重要作用,就是声明网页元素的性质,使得用户只看标签,就能了解这个元素的意义,阅读 HTML 源码就能了解网页的大致结构。这被称为 HTML 的语义原则。
含义
大部分html标签本身自带语义
选取合适的标签,编写语义化的网页,通过标签本身向使用者表达某种含义
例如:表示一篇文章标题就选用合适的标题标签,而不是选用段落标签
作用:
开发者-理解和维护代码
搜索引擎-收录网页、提取关键词、排序
屏幕阅读器-给盲人读取页面内容
语义化容器
html提供了一些自带语义的容器类标签,通过这些标签,我们可以非常快速的了解一个网页的结构。
<body>
<header>页眉</header>
<main>
<article>
<section>
<h1>标题一</h1>
<p>。。。</p>
</section>
<section>
<h1>标题二</h1>
<p>。。。</p>
</section>
....
....
</article>
</main>
<footer>页尾</footer>
</body>
header:<header>标签可以用在多个场景,既可以表示整个网页的头部,也可以表示一篇文章或者一个区块的头部。如果用在网页的头部,就称为“页眉”。网站导航和搜索栏通常会放在<header>里面
main:<main>标签表示页面的主体内容,一个页面只能有一个<main>,且直接嵌套于body中。功能性区块(比如搜索栏)不适合放入<main>中,除非当前页面就是搜索页面
footer:<footer>标签表示网页、文章或章节的尾部。如果用于整张网页的尾部,就称为“页尾”,通常包含版权信息或者其他相关信息
article:<article>标签表示页面里面一段完整的内容独立结构,即使页面的其他部分不存在,也具有独立使用的意义,通常用来表示一篇文章或者一个论坛帖子。它可以有自己的标题(<h1>到<h6>)
section:<section> 与 <article> 类似,但 <section> 更适用于组织页面使其按功能、按主题(比如迷你地图、一组文章标题和摘要、文章章节等)分块。比如<article>可以包含多个<section>
aside:<aside>标签通常用来呈现一些与主内容间接相关或者形成补充的信息(术语条目、作者简介、相关链接、标注等)。网页级别的<aside>,可以用来放置侧边栏,文章级别的<aside>通过用来放置标注
nav:nav是navigate的简写,<nav>标签用于放置主要导航信息,可以是网站级别的导航,也可以网页级别的文章导航
块级元素和内联元素
html标签可分为两类,块级元素和内联元素
块级元素(block)特性:
总是独占一行,表现为另起一行开始,而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;
内联元素(inline)特性:
和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变,就是里面文字或图片的大小;
块级元素主要有:
div , form , h1 , h2 , h3 , h4 , h5 , h6 ,address , blockquote , center , dir , dl , fieldset , hr , isindex ,menu , noframes , noscript , ol , p , pre , table , ul , li
内联元素主要有:
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
1、选择器
为什么要用选择器?
要使用CSS对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器
各类选择器
① 元素选择器/类型选择器 (element选择器)
语法:元素名称{属性: 属性值;}
如:div{width: 100px; height:200px}
说明
a、元素选择符就是以文档语言对象类型作为选择符,即使用结构中元素名称作为选择符,例如body、div、p、img、span…等
b、所有的页面元素都可以作为选择符
用法:
a、改变某个元素的默认样式时,可以使用类型选择符(比如改变一个div、p的样式等)
b、当统一文档某个元素的显示效果时,可以使用类型选择器(改变所有p段落样式)
② class选择器/类选择器
语法:.class{属性: 属性值}
说明:
a、当我们使用class选择符时,为每个元素定义一个class名称
b、class选择符的语法格式是:
<div class=“top”></div>
.top{width:200px; height:300px}
用法:
class选择符更适合定义一组样式,class值相同
③ id选择器
语法:#id名{属性: 属性值}
说明:
a、使用id选择符时,应该为每个元素定义一个id属性
b、id选择符的语法格式时"#"加上自定义的id名
<div id=“box”></div>
#box{background: green;}
用法:
一个id名称只能对应文档中单一的元素对象使用,id值唯一
④ * 通配符/通配选择器
语法:*{属性: 属性值;}
说明:
通配选择符的写法是 * ,其含义是所有元素
* {margin: 0; padding:0;} 表示清除所有元素的默认边距值和填充值
⑤ 属性选择器
标签[属性=“属性值”]{属性: 属性值;}
说明:
属性选择器会匹配存在指定属性或指定属性等于特定属性值的元素
用法:
<h2 title="第一章">第一章</h2>
<h2>第二章</h2>
<a href="home.html">首页</a>
<a href="about.html">关于</a>
<br>
<input type="text">
<input type="password">
[title] {
color: orange;
}
a[href="home.html"]{
color: red;
}
intput[type="password"]{
background-color: coral;
}
⑥ 子元素选择器
语法:父元素选择器 >子元素选择器{属性: 属性值;}
说明:
通过父类元素选择器找到父元素,再通过父元素的子元素选择器找到子元素
用法:
<ul class="menu">
<li>大虾</li>
<li>小鱼</li>
</ul>
.menu>li{color: red;}
⑦ 包含选择器/后代选择器
语法:选择符1 选择符2{属性: 属性值;}
说明:
操作外层元素内的里层元素属性,可以有多个层级
用法:
当某一元素存在父级元素时,在不想另加选择符的情况下操作元素属性,可用包含选择器
<ul class="list">
<li></li>
<li></li>
<li></li>
</ul>
.list li{background: red;}
⑧ 伪类选择器
语法:
a:link{属性: 属性值} 超链接的初始状态
a:visited{属性: 属性值} 超链接被访问后的状态
a:hover{属性: 属性值} 鼠标悬浮状态
a:active{属性: 属性值} 鼠标点击状态
说明:
当这4个超链接伪类选择符联合使用时,应注意顺序,link-visited-hover-active,错误的顺序有时会使超链接的样式失效
/* 初始状态 */
a:link{
color:yellow;
}
/* 访问之后 */
a:visited{
color: red;
}
/* 鼠标以上 */
a:hover{
color:orange;
}
/* 点击激活 */
a:active{
color:green;
}
⑨ 伪元素选择器
伪元素最常用的是 ::before伪元素和 ::after伪元素
说明:
在指定内容前面或后面添加内容,该内容不在页面源码上,仅在页面展示,在css的content标签里书写内容
用法:
<p>
火车车厢-火车车厢-火车车厢
</p>
p::before{
content: "火车头";
}
p::after{
content: "火车尾";
}
页面:
火车头 火车车厢-火车车厢-火车车厢 火车尾
⑩ 群组选择器
语法:选择符1, 选择符2, 选择符3…{属性: 属性值;}
说明:
当有多个选择符应用相同的声明时,可以将选择符用 逗号 分隔开,合并为一组
div, #box, .top{width:100px; height:200px;}
选择器的权重
当多个选择器,选中的是同一个元素,且都为他们定义了样式,如果属性发生冲突了,会选择权重高的来执行
个数 | 选择器 | 权重,CSS中用四位数字表示权重,权重的表达方式如:0,0,0,0 |
---|---|---|
1 | 类型(元素)选择器 | 0001 |
2 | Class选择器(类选择器 | 0010 |
3 | id选择器 | 0100 |
4 | 包含选择符 | 为包含选择符的权重之和 |
5 | 内联样式 | 1000 |
6 | !important | 10000 |
CSS选择器解析规则1: | 当不同选择符的样式设置有冲突的时候,高权重选择 符的样式会覆盖低权重选择符的样式 | |
CSS选择器解析规则2: | 相同权重的选择符,样式遵循就近原则:哪个选择符最后定义,就采用哪个选择符样式。 |
2、字体文本属性
常用属性
文本缩进
通过使用 text-indent 属性,所有元素的第一行都可以缩进一个给定的长度,缩进值值可以是正数、负数、百分数
text-indent:
32px;
2em;
10%;
文本对齐
通过text-align属性来设置html元素内容的对齐方式,常用的属性值包括left(靠左对齐)、right(靠右对齐) 和 center(居中对齐)
text-align:
center;
left;
right;
justify; 两端对齐
字体
由于在不同操作系统、不同游览器里面默认显示的字体是不一样的,不同计算机安装支持的字体也不一 定相同,所以一般定义字体样式会定义一系列的字体
字体名如果包含空格、#、$等特殊符号时,需要用引号包裹起来
font-family:
“黑体”;
“宋体”;
…
/*通用写法*/
p {
font-family: "Helvetica Neue", Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
}
/*
Helvetica Neue:一种用于苹果系统的西文字体,是Helvetica的改良版本
Helvetica: 一种用于苹果系统的西文字体
Arial: Win平台上默认的无衬线西文字体
PingFang SC: 苹果为中国用户打造了一款全新中文字体
Hiragino Sans GB: 冬青黑体
Heiti SC: 黑体-简 苹果简体中文系统界面默认字体 苹果生态最常用的字体之一,包括iPhone、
iPad等设备用的也是这款字体
Microsoft YaHei: 微软雅黑
WenQuanYi Micro Hei: 文泉驿微米黑 用于Linux操作系统
sans-serif: sans-serif表示一个字体族系列,当以上字体都匹配不到时,就从这个字体族里面找第一个匹配的
*/
字体样式
字体展示的样式,正常、倾斜等
font-style:
normal; 正常
italic; 倾斜
字体加粗
设置文本的粗细
font-weight:
normal; 标准
bold; 粗体
bolder; 比所继承值更粗的一个字体加粗
lighter; 比所继承值更细的一个字体加细
100-900; 必须是整百、值越大,字体越粗,400=normal、700=bold
字体尺寸
font-size 属性可设置字体的尺寸,我们可以通过small、medium、large等一些英文关键字来表示字体的尺寸大 小,但更常用的方法的是给font-size设置一个数值,数值可以是有不同的单位,也可以是百分数
font-size:
12px; 谷歌浏览器最小展示的大小
1.4em;
字体颜色
通过color来设置字体颜色
color:
red;
#0099ff;
#09f;
rgb(255,255,0); RGB表达式,0~255
rgba(255,0,255,0.5); RGBA,最后一个值0~1区间,为透明度
text-shadow
用于指定文本阴影效果,一般至少包括四个部分,分别表示
阴影水平偏移距离、
垂直偏移距离、
模糊半径、
阴景颜色
text-shadow:
5px 5px 5px #f00;
text-decoration
我们可以通过text-decoration 属性来给元素文本加一些装饰,包括:
none 无装饰
underline 下划线
overline 上划线
line-through 贯穿线
text-decoration:
none;
width和height
宽度和高度,用于设置块级元素
width: 300px;
height: 100px;
line-height行高
用于设定一行文本占据浏览器区域的高度,一般用来设置垂直居中
line-height: 14px; 要居中,值就默认和行高一致
样式的优先级
匹配到相同html元素的不同类型的选择器定义的css声明都会作用于被匹配的元素上
当匹配到相同html元素的不同类型选择器中存在相同css属性时,最终起作用的声明遵循以下原则:
a、选择器匹配范围越小越精确,优先级越高,常见选择器优先级如下:
!important>内联样式>id选择器> 类选择器>继承样式>浏览器默认
b、如果上一条原则无法比较出优先级,则就近原则,即代码书写位置越靠后,优先级越高
3、列表样式
list-style-type
定义列表符合样式
list-style-type:
disc; 实心圆
circle; 空心圆
square; 实心方块
none; 去除样式
list-style-image
将图片设置为列表符合样式,要使每个li的图片都不同,就要设置在li属性里
list-style-image:
url();
list-style-position
设置列表项标记的放置位置
list-style-position:
outside; 列表的外面 默认值
inside; 列表的里面
list-style
简写,复合写法
list-style:
none inside;
4、背景属性
background-color
背景颜色
background-color:
yellow;
background-image
背景图片
background-image:
url();
background-repeat
背景图片的平铺
background-repeat:
no-repeat; 不平铺
repeat; 默认,平铺
repeat-x; x轴平铺
repeat-y; y轴平铺
background-position
背景图片的定位,两个值,水平(距离左边) 垂直(距离上面);可以给负值
background-position:
30px -40px;
10% 10%;
left center;
center;
background-size
调试背景图片的大小,以适应父元素,两个值:水平和垂直
background-size:
100px 200px;
100% 100%;
auto; 以背景图片的比例缩放背景图片
cover; 缩放背景图片以完全覆盖背景区,可能背景图片部分看不见
contain; 缩放背景图片以完全装入背景区,可能背景区部分空白
background-attachment
背景图片的固定,固定在浏览器上,相对整个窗口,不在相对容器了
background-attachment :
scroll (滚动)
fixed(固定,固定在浏览器窗口里面,固定之后就相对于浏览器窗口了);
5、浮动
浮动:float
属性值:left 左浮
right 右浮
none 不浮动
注意:
1、先浮动的在里面,后浮动的靠在先浮动的后面
2、一行未满是不会进入下一行
3、容器内的文字不会上面浮动的元素覆盖,文字会被挤出来
清除浮动:clear
属性值:none 允许浮动
left 不允许前面有左浮动
right 不允许前面有右浮动
both 不允许前面有浮动
注意:
1、清除浮动只是相对后面容器不想被影响的容器而言,高度塌陷会影响页面布局。
2、前面的浮动依旧是漂浮的,后面的容器却不会再自动移入浮动的元素下方
注意:
可利用伪元素选择器实现为后面元素清除浮动
父元素选择器::after{
display:block;
content:“”;
clear:both
}
另一种清除浮动影响的方法
overflow: hidden;
引发bfc,使浮动元素也计算高度
在父元素中添加overflow属性后,不论该父元素中的子元素如何浮动,都不会影响后面元素
6、Flex布局
Flex布局也叫弹性布局,是浏览器提倡的布局模型,非常适合结构化布局,提供了强大的空间分布和对齐能力
Flex模型不会产生浮动布局中脱标现象,布局网页更简单、更灵活
设置方式:
给父元素设置display:flex,子元素可以自动挤压或拉伸
组成部分:
- 弹性容器
- 弹性盒子
- 主轴:默认在水平方向上,也就是即便是块级元素也会水平排列
- 侧轴/交叉轴:默认在垂直方向
- 主轴方向尺寸靠内容撑开,侧轴默认拉伸,前提是自己不设置尺寸。
常用样式
- 主轴对齐方式:justify-content
- flex-start:默认值,弹性盒子从起点依次排列
- flex-end:弹性盒子从终点开始依次排列
- center:弹性盒子沿主轴居中排列
- space-between:弹性盒子沿主轴均匀排列,空间间距均分在弹性盒子之间
- space-around:弹性盒子沿主轴均匀排列,空间间距均分在弹性盒子两侧
- space-evenly:弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等
- 侧轴对齐方式:align-items
- stretch:弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸也是默认默认拉伸)
- center:弹性盒子沿侧轴居中排列
- flex-start:弹性盒子从起点开始依次排列
- flex-end:弹性盒子从终点开始依次排列
- 某个弹性盒子侧轴对齐方式:align-self
- 属性和align-items相同,一个用于弹性容器,一个用于弹性盒子
- 修改主轴方向:flex-direction
- row:水平方向,从左往右(默认)
- column:垂直方向:从上到下
- row-reverse:水平方向,从右到左
- column-reverse:垂直方向,从下到上
- 弹性伸缩比:flex(控制弹性盒子的主轴尺寸)
- 整数数字,表示占用父级剩余尺寸的份数
- 弹性盒子换行:flex-wrap
- wrap:换行
- nowrap:不换行(默认),内部盒子会自动压缩变形
- 行对齐方式:align-content(每一行,设为一个弹性盒子,注意:只有单行则该属性无效)
- flex-start:默认值,弹性盒子从起点依次排列
- flex-end:弹性盒子从终点开始依次排列
- center:弹性盒子沿主轴居中排列
- space-between:弹性盒子沿主轴均匀排列,空间间距均分在弹性盒子之间
- space-around:弹性盒子沿主轴均匀排列,空间间距均分在弹性盒子两侧
- space-evenly:弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等
7、盒子模型
盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间,即都包含边框、边界、补白、内容区,这就是盒模型。
内边距
内边距也称作填充,和border不一样的是,内边距只能设置宽度值
padding的使用方法(内间距)当分析一个缝隙相对于当前容器来说是里面的时候,就用padding。
填充:padding,在设定页面中一个元素内容到元素的边缘(边框) 之间的距离。 也称补白。
用法:
1)用来调整内容在容器中的位置关系
2)padding值是额外加在元素原有大小之上的,如想保证元素大小不变,需从元素宽或高上减掉后添加的padding属性值
属性值的4种方式:
四个值:上 右 下 左 {padding:0px 0px 0px 40px;}
三个值:上 左右 下 {padding:10px 20px 30px ;}
二个值:上下 左右 {padding:10px 20px ;}
一个值:四个方向 padding:2px;/定义元素四周填充为2px/
说明:可单独设置一方向填充,如:上方向padding-top:10px; 右方向padding-right:10px; 下方向padding-bottom:10px; 左方向padding-left:10px;
边框
border:边框宽度 边框风格 边框颜色;
边框宽度:border-width:
边框颜色:border-color:
边框圆角:border-radius:
边框样式:border-style:solid(实线)/dashed(虚线)dotted(点划线)double(双线)
简写:border:30px solid blue; 参数的顺序可以随意调换
单边框设置:上边框 border-top:30px blue solid; 下 border-bottom 左 border-left 右 border-right
外边距
外边距是盒子周围一圈看不到的空间。它会把其他元素从盒子旁边推开。 外边距属性值可以为正也可以 为负。设置负值会导致和其他内容重叠。
margin的使用方法
边界:margin,在元素外边的空白区域,被称为边距。
margin-left:左边界 margin-right:右边界 margin-top:上边界 margin-bottom:下边界
属性值的4种方式:margin可以给负数
四个值:上 右 下 左 三个值:上 左右 下 二个值:上下 左右
一个值:四个方向 margin:2px;/定义元素四边边界为2px/
margin:0 auto; 一个有宽度的元素在浏览器中横向居中。
盒子内容溢出
利用overflow属性控制溢出元素的内容的显示方式
overflow:
hidden 溢出隐藏
scroll 溢出滚动(无论是否溢出,都显示滚动条)
auto 自动(溢出显示滚动条,没溢出则不显示)
垂直外边距合并问题
外边距合并指的是,当两个垂直外边距相遇时,它们将合并成一个外边距。合并后的外边距的高度等于两个发 生合并的外边距的高度中的较大者。
- 当一个元素出现在另一个元素上面时,第一个元素的下外边距与第二个元素的上外边距会发生合并
- 当一个元素包含在另一个元素中时(假设父元素没有内边距或边框把两者的外边距分隔开),它们的上 外边距也会发生合并、
- 假设有一个空元素,它有外边距,但是没有边框或填充。在这种情况下,上外边距与下外边距就碰到了 一起,它们会发生合并
- 上面这类,如果这个外边距遇到另一个元素的外边距,它还会发生合并
8、display
我们可以通过display属性来变更元素的显示类型,即把块级元素变更为内联元素,或者把内联元素变更为块级元素
display常用属性:
none 隐藏元素
inline 设置内联元素
block 设置为块级元素
inline-block 设置为行内块
内联元素默认display属性为inline ,块级元素默认display为block
9、定位 position
CSS position属性用于指定一个元素在文档中的定位方式。结合top,right,bottom 和 left属性一起决定了该元 素的最终位置。定位类型包括:
静态定位(static) 默认值
相对定位(relative)
绝对定位(absolute)
固定定位(fixed)
top、bottom、right、left分别表示元素与参照元素的上下左右之间的距离。
static 静态定位
静态定位为HTML 元素定位的默认值
即没有定位,遵循正常的文档流对象,一般不会去写
relative 相对定位,指的是元素本身定位
在使用相对定位时,无论是否进行移动,元素仍然占据原来的空间。移动元素会导致它覆盖其它框
1.元素不会脱离文档流;
2.可以给元素设置top、bottom、left、right值;
3.可以给元素提升一个层级;
4.设置了相对定位元素,原来是内联元素现在还是内联元素,原来是块状元素,现在还是块状元素。
absolute 绝对定位
绝对定位的元素的位置相对于最近的已定位祖先元素进行定位
如果元素没有已定位的祖先元素,那么它的位置相对于最初的包含块进行定位,最初包含块一般即为html元素
1.设置position:absolute的元素会脱离文档流
2.会提升一个层级,遮住其他元素
3.设置top、bottom、left、right时偏移量是相对于最近的一个父元素偏移
4.会将内联元素变成块状元素。
fixed 固定定位
相对于浏览器窗口固定定位
无论怎么滚动滚动条,设置了position:fixed的元素总是在距离浏览器窗口固定位置。
10、垂直对齐 vertical-align
由于浏览器会把行内块、行内标签当作文字处理,默认按基线对齐
用来调整内容垂直方向得对齐方式
vertical-align
baseline 基线对齐(默认)
top 顶部对齐
middle 居中对齐
bottom 底部对齐
11、过渡 transition
作用:可以为一个元素在不同状态之间切换得时候添加过渡效果
属性名:transition(复合属性)
属性值:过渡得属性 花费时间(s)
注意:
- 过渡的属性可以是具体得CSS属性
- 也可以为all(两个状态属性值不同的所有属性,都产生过渡效果)
- transition 设置给元素本身(谁做过渡给谁加)
12、透明度 opacity
作用:设置整个元素的透明度(包含背景和内容)
属性名:opacity
属性值:0-1 完全透明-不透明
13、光标类型 cursor
作用:鼠标悬停在元素上时指针显示样式
属性名:cursor
属性值:
default:默认,箭头
pointer:小手,提示用户点击
test:工字型,提示用户可以选择文字
move:十字光标,提示用户可以移动
注意
清除默认样式
许多标签都带有默认的缩进、换行之类的属性,当我们不需要时,统一删除
* {
margin: 0;
padding: 0;
}
影响html元素位置的因素
到目前为止,我们所学css相关知识中,会影响html元素位置的因素包括:
1. 文档流
1. 块级元素独占一行
2. 内联元素不换行
3. 元素总是根据编写顺序按照从上到下、从左往右的顺序排列
2. 浮动
1. 通过浮动设置元素靠一边显示
2. 通过浮动设置元素并排显示
3. 通过浮动设置更复杂布局
3. 元素之间的外边距 除了文档流、浮动、外边距外,还可以通过css定位相关属性来改变html元素的位置。
定位元素重叠
元素设置定位属性后,会覆盖正常的文档流元素
如果要修改定位元素的显示层级,我们可以通过z-index属性来设置
z-index属性指定了一个元素的显示优先级,值可以为正数或负数,值越大,显示优先级越高。
默认情况下,设置了定位属性的元素显示在普通文档流上层
可以设置了z-index为负数,使有定位属性的元素显示在普通文档流下层
只有设置了定位属性的元素设置z-index属性才起作用
CSS精灵
CSS精灵,也叫CSS Sprites,是一种网页图片应用处理方式。
把网页中一些背景图片整合到一张图片文件中,再用background-position精确的定位出背景图片的位置
我们常见网页上的很多图标都是整合到一张图片上
优点:减少服务器被请求的次数,减轻服务器的压力,提高页面加载速度
字体图标
字体图标:展示的是图片,本质是字体
作用:在网页中添加简单的、颜色单一的小图标
优点:
- 灵活性:灵活地修改样式,例如:尺寸、颜色等
- 轻量级:体积小、渲染块、降低服务器请求次数
- 兼容性:几乎兼容所有地主流浏览器
- 使用方便:先下载再使用
下载字体
iconfont图标库:https://www.iconfont/
下载字体:
素材库-官方图标库-进入图标库-选图标
加入购物车-购物车
添加至项目,确定-下载至本地
使用字体
① 将下载地文件夹解压放入项目目录下
② 引入字体样式表(iconfont.css)
③ 标签使用字体图标类名
Ⅰ iconfont:字体图标基本样式(字体名,字体大小等等)
Ⅱ icon-xxx:图标对应得类名(在下载目录下得html文件中,font class找自己要用的)
<html>
<head>
<title>使用字体图标</title>
<link rel="stylesheet" href="./iconfont/iconfont.css">
<style>
.iconfont {
font-size:200px;
color:red;
}
</style>
</head>
<body>
<span class="iconfont icon-icon-test3"></span>
</body>
</html>
上传字体
上传矢量图到网站
项目特有得图标上传到iconfont图标库,生成字体
网页头部SEO三大标签
SEO:搜索引擎优化,提升网站搜索排名
提升SEO的常见方法:
1、竞价排名
2、将网页制作成html后缀
3、标签语义化(在合适的地方使用合适的标签)
…
网页头部SEO标签:
1、title:网页标题标签
2、description:网页描述
3、keywords:网页关键词
<meta name="description" content="描述">
<meta name="keywords" content="关键词">
<title>标题</title>
Favicon图标
Favicon图标:网页图标,出现在浏览器标题栏,增加网站辨识度
图标:favicon.ico,一般存放在网站的根目录里面
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
版心文件
一般网页采用统一的规格版心样式
比如在common.css文件中加入以下:
/*头尾各个页面相同的样式*/
/*版心*/
.wrapper {
margin:0 auto;
width: 1240px;
}
项目目录结构
项目
——images文件夹:存放固定使用的图片素材,例如:logo、样式修饰图等等
——uploads文件夹:存放非固定使用的图片素材,例如:商品图、宣传图需要上传的图片
——iconfont文件夹:字体图标素材
——css文件夹:存放CSS文件(link标签引入)
————base.css:基础公共样式
————common.css:各个网页相同模块的重复样式,例如:头部、底部
————index.css:首页CSS样式
——index.html:首页文件
…
版权声明:本文标题:HTML+CSS基础知识内容 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dianzi/1726492773a1072793.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论