HTML+CSS基础知识内容

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.com

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、常规标记(双标记)

​ <标记>

​ <标记 属性 = “属性值” 属性=“属性值”>

例如:

​ 注意属性和属性值相同时,可以省略属性值


等同于

​ 2、空标记(单标记)

​ <标记>

​ <标记 属性 = “属性值” 属性=“属性值” />



字符编码

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>Documenttitle>
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:[email protected]">发送邮件到[email protected]a>
5、链接到拨打电话
<a href="tel:18407850471">拨打电话a>
5、链接到调用qq
<a href="http://wpa.qq.com/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		按钮框
	reset		重置框(清空效果)	
cheked			默认(可用于单选框默认勾选)
placeholder		描述输入字段预期值的简短的提示信息。兼容到E8以上
name			必须设置,否则在提交表单时,用户在其中输入的数据不会被发送给服务器
value			描述	例如:"submit" value="登录">

button按钮
type:
	submit		提交
	reset		清除重置
	button		按钮

select下拉列表
	

textarea多行文本
	
	rows属性用于设置行数
	cols属性用于设置可见宽度,以平均字符宽度为单位

​ Form当中method的post和get的区别?

  1. get是从服务器上获取数据,post是向服务器传送数据。

  2. get是把参数数据队列加到提交表单的ACTION属性所指的URL中,值和表单内各个字段一一对应,在URL中可以看到。post是通过HTTP post机制,将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

  3. 对于get方式,服务器端用Request.QueryString获取变量的值,对于post方式,服务器端用Request.Form获取提交的数据。

  4. get传送的数据量较小,不能大于2KB。post传送的数据量较大,一般被默认为不受限制。但理论上,IIS4(Internet Information Service 互联网信息服务)中最大量为80KB,IIS5中为100KB

  5. 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">	
		<title>title>
		<style type="text/css">
			h1{
				color: aqua;
			}
		style>
	head>
	<body>
		<h1>0000000h1>		
		<h2>1111111h1>
	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;">我是一个divdiv>
	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选择符的语法格式是:

​ .top{width:200px; height:300px}

用法:

​ class选择符更适合定义一组样式,class值相同

③ id选择器

语法:#id名{属性: 属性值}

说明:

​ a、使用id选择符时,应该为每个元素定义一个id属性

​ b、id选择符的语法格式时"#"加上自定义的id名

​ #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,子元素可以自动挤压或拉伸

组成部分:

  • 弹性容器
  • 弹性盒子
  • 主轴:默认在水平方向上,也就是即便是块级元素也会水平排列
  • 侧轴/交叉轴:默认在垂直方向
  • 主轴方向尺寸靠内容撑开,侧轴默认拉伸,前提是自己不设置尺寸。

常用样式

  1. 主轴对齐方式:justify-content
    1. flex-start:默认值,弹性盒子从起点依次排列
    2. flex-end:弹性盒子从终点开始依次排列
    3. center:弹性盒子沿主轴居中排列
    4. space-between:弹性盒子沿主轴均匀排列,空间间距均分在弹性盒子之间
    5. space-around:弹性盒子沿主轴均匀排列,空间间距均分在弹性盒子两侧
    6. space-evenly:弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等
  2. 侧轴对齐方式:align-items
    1. stretch:弹性盒子沿着侧轴线被拉伸至铺满容器(弹性盒子没有设置侧轴方向尺寸也是默认默认拉伸)
    2. center:弹性盒子沿侧轴居中排列
    3. flex-start:弹性盒子从起点开始依次排列
    4. flex-end:弹性盒子从终点开始依次排列
  3. 某个弹性盒子侧轴对齐方式:align-self
    1. 属性和align-items相同,一个用于弹性容器,一个用于弹性盒子
  4. 修改主轴方向:flex-direction
    1. row:水平方向,从左往右(默认)
    2. column:垂直方向:从上到下
    3. row-reverse:水平方向,从右到左
    4. column-reverse:垂直方向,从下到上
  5. 弹性伸缩比:flex(控制弹性盒子的主轴尺寸)
    1. 整数数字,表示占用父级剩余尺寸的份数
  6. 弹性盒子换行:flex-wrap
    1. wrap:换行
    2. nowrap:不换行(默认),内部盒子会自动压缩变形
  7. 行对齐方式:align-content(每一行,设为一个弹性盒子,注意:只有单行则该属性无效)
    1. flex-start:默认值,弹性盒子从起点依次排列
    2. flex-end:弹性盒子从终点开始依次排列
    3. center:弹性盒子沿主轴居中排列
    4. space-between:弹性盒子沿主轴均匀排列,空间间距均分在弹性盒子之间
    5. space-around:弹性盒子沿主轴均匀排列,空间间距均分在弹性盒子两侧
    6. 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精确的定位出背景图片的位置

我们常见网页上的很多图标都是整合到一张图片上

优点:减少服务器被请求的次数,减轻服务器的压力,提高页面加载速度


字体图标

字体图标:展示的是图片,本质是字体

作用:在网页中添加简单的、颜色单一的小图标

优点:

  1. 灵活性:灵活地修改样式,例如:尺寸、颜色等
  2. 轻量级:体积小、渲染块、降低服务器请求次数
  3. 兼容性:几乎兼容所有地主流浏览器
  4. 使用方便:先下载再使用

下载字体

iconfont图标库:https://www.iconfont.cn/

下载字体:

素材库-官方图标库-进入图标库-选图标

加入购物车-购物车

添加至项目,确定-下载至本地

使用字体

① 将下载地文件夹解压放入项目目录下

② 引入字体样式表(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,笔记,学习,前端)