简单了解html和css
2024-03-07 09:27:22 0 举报AI智能生成
HTML（HyperText Markup Language）和CSS（Cascading Style Sheets）是构建网页的两种基本技术。HTML是一种标记语言，用于创建网页的结构，包括文本、图片、链接等元素。而CSS则是一种样式表语言，用于描述网页的外观和布局，如颜色、字体、间距等。通过HTML和CSS的结合使用，可以创建出具有丰富内容和吸引人的视觉效果的网页。
作者其他创作
大纲/内容
HTML
HTML简介
HTML概述
HTML全称：Hyper Text Markup Language(超文本标记语言)
简单一句话：HTML是一门用来创建网页的标记语言。
HTML特点
简易性：超文本标记语言版本升级采用超集方式，从而更加灵活方便。
可扩展性：超文本标记语言采取子类元素的方式，为系统扩展带来保证。
平台无关性：超文本标记语言可以使用在广泛的平台上，这也是万维网（www）盛行的另一个原因。
通用性：HTML是网络的通用语言,一种简单、通用的标记语言。
HTML的发展
超文本标记语言（第一版）--在1993年6月作为互联网工程工作小组（IETF）工作草案发布(并非标准)
HTML 2.0——1995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时
HTML 3.2——1997年1月14日，W3C推荐标准
HTML 4.0——1997年12月18日，W3C推荐标准
HTML 5——2014年10月29日，W3C推荐标准
HTML基本结构
<!--文档声明：告诉浏览器使用HTML5版本 -->
<!DOCTYPE html>
<html>
<!DOCTYPE html>
<html>
<!--网页的头部 -->
<head>
<head>
<!--设置页面的字符集编码 -->
<meta charset="utf-8" />
<meta charset="utf-8" />
<!--设置页面的标题 -->
<title>第一页面</title>
<title>第一页面</title>
</head>
<!--网页的主体 -->
<!--网页的主体 -->
<body>
<!--需要展示的信息-->
<!--需要展示的信息-->
页面内容
</body>
</html>
</body>
</html>
HTML基本标签
结构标签
<html></html>:根标签
<head>：头标签
<title></title>:页面的标题
</head>
<title></title>:页面的标题
</head>
<body></body>：主体标签：网页内容
属性：
color:文本的颜色 <font color="red">内容</font>
bgcolor:背景色 <body bgcolor="bisque"> </body>
background:背景图片
color:文本的颜色 <font color="red">内容</font>
bgcolor:背景色 <body bgcolor="bisque"> </body>
background:背景图片
颜色的表示方式：
第一种方式：使用颜色名称: red green blue
第二种方式：RGB模式 #000000 #ffffff #325687 #377405
第一种方式：使用颜色名称: red green blue
第二种方式：RGB模式 #000000 #ffffff #325687 #377405
排版标签
注释标签：<!--注释-->
换行标签：<br/>
段落标签：<p>文本文字</p>
特点：段与段之间有行高（行间距） 自带换行。
属性：align对齐方式 (left：左对齐 center：居中 right：右对齐)
特点：段与段之间有行高（行间距） 自带换行。
属性：align对齐方式 (left：左对齐 center：居中 right：右对齐)
水平线标签:<hr/>
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示) size: 水平线的粗细 (像素表示，例如：10px)
color:水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
属性:
width：水平线的长度(两种:第一种:像素表示；第二种，百分比表示) size: 水平线的粗细 (像素表示，例如：10px)
color:水平线的颜色
align:水平线的对齐方式(left：左对齐 center：居中 right：右对齐)
标题标签
<h1></h1>—-<h6></h6>
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行
随着数字增大文字逐渐变小，字体是加粗的，内置字号，默认占据一行
容器标签
<div></div>:块级标签，独占一行，换行
<span></span>:行级标签，所有内容都在同一行
作用： <div></div>:主要是结合css页面分块布局
<span></span>:进行友好提示信息
作用： <div></div>:主要是结合css页面分块布局
<span></span>:进行友好提示信息
列表标签
无序列表
ul （unorder list）
无序列表标签： <ul></ul>
属性：type :三个值，分别为circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
属性：type :三个值，分别为circle(空心圆) ,disc(默认,实心圆),square(黑色方块)
列表项：<li></li>
有序列表
ol（order list）
有序列表标签：<ol></ol>
属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>
属性：type：1、A、a、I、i（数字、字母、罗马数字）
列表项： <li></li>
定义列表
dl (defination list) 定义列表
dt (defination title) 定义标题
dd (defination description) 定义描述
列表嵌套
图片标签
<img/>独立标签
属性:
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度
height:高度
border:边框
align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明 当图片未能正确加载，才显示
title:图片的悬停显示
hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
src：图片地址： 相对路径 （同一个网站） 绝对路径 （不同网站）
width:宽度
height:高度
border:边框
align:对齐方式，代表图片与相邻的文本的相当位置（有三个属性值：top middle bottom）
alt:图片的文字说明 当图片未能正确加载，才显示
title:图片的悬停显示
hspace 和 vspace 设定图片边沿上下左右空白，以免文字或其它图片过于贴近
链接标签
超链接可以是文本，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。
<a>文本或图片</a>
属性：
href:跳转页面的地址(跳转到外网需要添加协议)
target:_self(自己) _blank(新页面，之前页面还存在) _parent _top 默认_self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
href:跳转页面的地址(跳转到外网需要添加协议)
target:_self(自己) _blank(新页面，之前页面还存在) _parent _top 默认_self_search相等于给页面起一个名字，如果再次打开时，如果页面存在，则不再打开新的页面。可以是任意名字。
name:名称，锚点(回到锚点: 顶部，底部，中间)，在访问锚点的书写格式:#name的值
每一个a标签有name属性，给定值 需要点击跳转的 href="#name"
每一个a标签有name属性，给定值 需要点击跳转的 href="#name"
表格标签
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
查询xxx表中所有信息
SELECT * FROM xxx;看起来便捷，效率低，可读性差
SELECT 所有列名 FROM xxx;
SELECT * FROM xxx;看起来便捷，效率低，可读性差
SELECT 所有列名 FROM xxx;
(table,tr,td)
(th)表格的表头
colspan 属性 表格的列合并
rowspan属性 表格的行合并
文本格式化标签
<b> 定义粗体文本。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
<big> 定义大号字。
<em> 定义着重文字。
<i> 定义斜体字。
<small> 定义小号字。
<strong> 定义加重语气。
<sub> 定义下标字。
<sup> 定义上标字。
<ins> 定义插入字。
<del> 定义删除字。
HTML表单标签
form标签
常用属性：action：表示动作，值为服务器的地址，把表单的数据提交到该地址上处理
method:请求方式：get 和post
enctype:表示是表单提交的类型
默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
text/plain 普通文本
method:请求方式：get 和post
enctype:表示是表单提交的类型
默认值：application/x-www-form-urlencoded 普通表单
multipart/form-data 多部分表单(一般用于文件上传)
text/plain 普通文本
get:
1.数据存在地址栏中,请求参数都在地址后拼接 path?name="张三"&password="123456"
2.不安全
3.效率高
4.get请求大小有限制，不同浏览器有不同，但是大约是2KB使用情况：一般情况用于查询数据。
1.数据存在地址栏中,请求参数都在地址后拼接 path?name="张三"&password="123456"
2.不安全
3.效率高
4.get请求大小有限制，不同浏览器有不同，但是大约是2KB使用情况：一般情况用于查询数据。
post：
1.地址栏没有数据：请求参数单独处理。
2.安全可靠
3.效率低
4.post请求大小理论上无限。使用情况：一般用于插入修改等操作
1.地址栏没有数据：请求参数单独处理。
2.安全可靠
3.效率低
4.post请求大小理论上无限。使用情况：一般用于插入修改等操作
input标签
type: 以下为type可能要取的值：
1.1 text 文本框 输入内容
1.2 password 密码框 密文或者掩码
1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据表示同一组中只能选中一个( checked ="checked" 表示选中)
1.4 checkbox 表示多选 ，name必须一致，表示同一组中可以选多个，返回值是个数组( checked ="checked" 表示选中)
1.5 file ：表示上传控件
以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取)
以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
1.6 submit 提交
1.7 reset 重置
1.8 image 图片提交按钮
1.9 button 普通按钮
1.10 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
1.11 email 表示邮箱格式的数据
1.1 text 文本框 输入内容
1.2 password 密码框 密文或者掩码
1.3 radio 表示是单选，name必须一致；value：提交给服务器的数据表示同一组中只能选中一个( checked ="checked" 表示选中)
1.4 checkbox 表示多选 ，name必须一致，表示同一组中可以选多个，返回值是个数组( checked ="checked" 表示选中)
1.5 file ：表示上传控件
以上具有输入性质的必须要有name属性,初始开始写value表示是默认值(以后获取输入框的内容要根据name来取)
以下按钮不具有输入性质，不需要name属性，但是按钮上的文字提示使用value属性
1.6 submit 提交
1.7 reset 重置
1.8 image 图片提交按钮
1.9 button 普通按钮
1.10 hidden 表示隐藏域，该框的内容服务器需要，但是不想让用户知道(不想清楚的显示在界面上)
1.11 email 表示邮箱格式的数据
name属性：表单元素名字，只有name属性才能提交给服务器。
value属性：提交给服务器的数据
placeholder：提示信息
select 元素
<!--select标签添加该属性multiple="multiple"表示多选 、size表示显示的个数-->
<!--option表示下拉列表项-->
<!--selected="selected"表示选中该项-->
textarea元素
需要指定输入的区域位置大小
<textarea cols="100" rows="5"> 表示5行100列的区域可以输入内容，该元素没有value属性
HTML框架标签
frameset
框架结构标签，把body删掉，使用framset代替body
框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/cols 的值规定了每行或每列占据屏幕的面积
每个 frameset 定义了一系列行或列
rows/cols 的值规定了每行或每列占据屏幕的面积
frame
frame 标签定义了放置在每个框架中的 HTML 文档。
基本的注意事项
1. 不能将 <body></body> 标签与 <frameset></frameset> 标签同时使用
2. 假如一个框架有可见边框，用户可以拖动边框来改变它的大小。为了避免这种情况发生，可以在 <frame> 标签中加入：noresize="noresize
3 frameset的属性 frameborder="1|0|yes|no" 表示是否有边框 border="1" 表示边框的粗细 bordercolor表示边框颜色
HTML的其它标签和特殊字符
其它标签
<!--该网页的关键字-->
<meta name="keywords" content="keyword1,keyword2,keyword3">
<meta name="keywords" content="keyword1,keyword2,keyword3">
查询xxx表中所有信息
SELECT * FROM xxx;看起来便捷，效率低，可读性差
SELECT 所有列名 FROM xxx;
SELECT * FROM xxx;看起来便捷，效率低，可读性差
SELECT 所有列名 FROM xxx;
<!--该网页的描述-->
<meta name="description" content="this is my page">
<meta name="description" content="this is my page">
<!--该网页的编码-->
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> html4.01
<!--页面自动跳转,2秒后跳转到百度-->
<meta http-equiv="refresh"content="2;URL=https://www.baidu.com">
<meta http-equiv="refresh"content="2;URL=https://www.baidu.com">
<!--该网页的编码-->
<meta charset="UTF-8"> html5
<meta charset="UTF-8"> html5
<!-- href：引入css文件的地址-->
<link rel="stylesheet" type="text/css" href="./styles.css">
<link rel="stylesheet" type="text/css" href="./styles.css">
<!--src：js的文件地址-->
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
特殊字符
< 小于号 <
> 大于号 >
& 与字符 &
" 引号 "
® 己注册 ®
© 版权 ©
™ 商标 ™
空格
> 大于号 >
& 与字符 &
" 引号 "
® 己注册 ®
© 版权 ©
™ 商标 ™
空格
CSS
CSS简介
CSS概念
层叠样式表(英文全称：Cascading Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。
CSS作用
1. 修饰美化html网页。
2. 外部样式表可以提高代码复用性从而提高工作效率。
3. html内容与样式表现分离，便于后期维护。
CSS特点
1 丰富的样式定义
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
CSS提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离，以及元素边框与元素内容间的距离；允许随意改变文本的大小写方式、修饰方式以及其他页面效果。
2 易于使用和修改
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文 件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
CSS可以将样式定义在HTML元素的style属性中，也可以将其定义在HTML文档的header部分，也可以将样式声明在一个专门的CSS文 件中，以供HTML页面引用。总之，CSS样式表可以将所有的样式声明统一存放，进行统一管理。
另外，可以将相同样式的元素进行归类，使用同一个样式进行定义，也可以将某个样式应用到所有同名的HTML标签中，也可以将一个CSS样式指定到某个页面元素中。如果要修改样式，我们只需要在样式列表中找到相应的样式声明进行修改。
3 多页面应用
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
CSS样式表可以单独存放在一个CSS文件中，这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件，在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。
4 层叠
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。例如对一个站点中的多个页面使用了同一套CSS样式表，而某些页面中的某些元素想使用其他样式，就可以针对这些样式单独定义一个样式表应用到页面中。这些后来定义的样式将对前面的样式设置进行重写，在浏览器中看到的将是最后面设置的样式效果。
5 页面压缩
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间
在使用HTML定义页面效果的网站中，往往需要大量或重复的表格和font元素形成各种规格的文字样式，这样做的后果就是会产生大量的HTML标签，从而使页面文件的大小增加。而将样式的声明单独放到CSS样式表中，可以大大的减小页面的体积，这样在加载页面时使用的时间也会大大的减少。另外，CSS样式表的复用更大程序的缩减了页面的体积，减少下载的时间
CSS语法规则
基础语法：选择器｛属性：值;属性:值….. ｝
CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明.
每条声明由一个属性和一个值组成。
CSS使用方式
内联方式
把CSS样式嵌入到html标签当中，类似属性的用法，示例如下：
<div style="color:blue;font-size:50px">This is my HTML page. </div>
<div style="color:blue;font-size:50px">This is my HTML page. </div>
好处:可以单独设置某个元素样式，缺点：不利于样式重用
内部方式
在head标签中使用style标签引入css,示例如下:
<style type=“text/css”> //告诉浏览器使用css解析器去解析
div{color:red;font-size:50px}
</style>
<style type=“text/css”> //告诉浏览器使用css解析器去解析
div{color:red;font-size:50px}
</style>
好处：可以控制页面中多个元素样式，缺点：只能一个页面使用
外部方式
将css样式抽成一个单独文件，谁用谁就引用，好处：多个页面可以同时使用。
示例如下：
单独文件div.css: 内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部，
示例如下：
单独文件div.css: 内容示例：div{color:green;font-size:50px}
引用语句写在head标签内部，
链接式：
<link rel="stylesheet" type="text/css" href=“div.css"></link>
rel:代表当前页面与href所指定文档的关系
type:文件类型，告诉浏览器使用css解析器去解析
href:css文件地址
<link rel="stylesheet" type="text/css" href=“div.css"></link>
rel:代表当前页面与href所指定文档的关系
type:文件类型，告诉浏览器使用css解析器去解析
href:css文件地址
导入式：
<style type="text/css">
@import url("div.css")
</style>
该内容放在head标签中
<style type="text/css">
@import url("div.css")
</style>
该内容放在head标签中
备注:link和@import区别：
1.link所有浏览器都支持，@import某些版本低的IE不支持
2.@import是等待html加载完成才加载，link解析到这个语句，就加载
3.@import不支持js动态修改
1.link所有浏览器都支持，@import某些版本低的IE不支持
2.@import是等待html加载完成才加载，link解析到这个语句，就加载
3.@import不支持js动态修改
优先级：内联样式>内部样式>外部样式，就近原则。
CSS选择器
基本选择器
标签选择器
在head中使用style标签引入在其中声明标签选择器:
html标签{属性:属性值}，
html标签{属性:属性值}，
<style type="text/css">
span{color: red;font-size: 100px}
</style>
span{color: red;font-size: 100px}
</style>
id选择器
给需要修改样式的html元素添加id属性标识，在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}
具体示例如下:
创建id选择器：
<div id="s1">hello,everyone!</div>
<div id="s2">hello,everyone!</div>
<div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰
<style type="text/css">
#s1{color: red;font-size: 100px}
#s2{color: green;font-size: 100px}
#s3{color: blue;font-size: 100px}
</style>
创建id选择器：
<div id="s1">hello,everyone!</div>
<div id="s2">hello,everyone!</div>
<div id="s3">hello,everyone!</div>
根据id选择器进行html文件修饰
<style type="text/css">
#s1{color: red;font-size: 100px}
#s2{color: green;font-size: 100px}
#s3{color: blue;font-size: 100px}
</style>
class选择器
给需要修改样式的html元素添加class属性标识，在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}
创建class选择器：
<div class="s1">hello,everyone!</div>
<div class="s2">hello,everyone!</div>
<div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰
<style type="text/css">
.s1{color: purple;font-size: 100px}
.s2{color: pink;font-size: 100px}
.s3{color: yellow;font-size: 100px}
</style>
<div class="s1">hello,everyone!</div>
<div class="s2">hello,everyone!</div>
<div class="s3">hello,everyone!</div>
根据id选择器进行html文件修饰
<style type="text/css">
.s1{color: purple;font-size: 100px}
.s2{color: pink;font-size: 100px}
.s3{color: yellow;font-size: 100px}
</style>
备注:以上基本选择器的优先级从高到低:id >class >标签
属性选择器
根据元素的属性及属性值来选择元素。在head中使用style标签引入其中声明,
格式为:html标签[属性='属性值']{css属性:css属性值;}
或者html标签[属性]{css属性:css属性值;}
或者html标签[属性]{css属性:css属性值;}
a[href^=‘www’]{
a标签href属性的值是由www开头的
}
a标签href属性的值是由www开头的
}
a[href$='com']{
a标签href属性的值是由com结尾的
}
a标签href属性的值是由com结尾的
}
/* 包含指定内容的 不在乎顺序 */
a[href*="du"]{
color: #008000;
}
a[href*="du"]{
color: #008000;
}
伪元素选择器
主要是针对a标签
语法：
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
层级选择器
后代选择器
div p{...} 表示div中的p标签，所有的p,后代
div span{....} 表示div中的span标签，包括所有的span，后代
div p{...} 表示div中的p标签，所有的p,后代
div span{....} 表示div中的span标签，包括所有的span，后代
子代选择器
div span{....} 表示 div中有一个span， span是子代
相邻兄弟 div+ p 表示div同级别后边的相邻的p标签
通用兄弟 div~p 表示div同级别后边的所有的p标签
div span{....} 表示 div中有一个span， span是子代
相邻兄弟 div+ p 表示div同级别后边的相邻的p标签
通用兄弟 div~p 表示div同级别后边的所有的p标签
CSS属性
文字和文本属性
文字属性
1>.font-size:设置字体大小
2>.font-family:设置文字的字体,常见的值为 :黑体，宋体，楷体等
3>.font-style:规定斜体字,常见的值：
normal - 文本正常显示
italic - 文本斜体显示 字体斜体
oblique - 文本倾斜显示 变形斜体
normal - 文本正常显示
italic - 文本斜体显示 字体斜体
oblique - 文本倾斜显示 变形斜体
4>.font-weight 属性设置文本的粗细。关键字 100 ~ 900 为字体指定了 9 级加粗度。
100 对应最细的字体变形，900 对应最粗的字体变形。
数字 400 等价于 normal，而 700 等价于 bold。
备注：
斜体（italic）是对每个字母的结构有一些小改动，来反映变化的外观。
倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
100 对应最细的字体变形，900 对应最粗的字体变形。
数字 400 等价于 normal，而 700 等价于 bold。
备注：
斜体（italic）是对每个字母的结构有一些小改动，来反映变化的外观。
倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
简写：
font: italic bold 30px "幼圆","黑体"; /*style weight size family swsf*/
font: italic bold 30px "幼圆","黑体"; /*style weight size family swsf*/
文本属性
1>.color:设置文本颜色
2>.text-indent:缩进元素中文本的首行,取值类型如下：
1》text-indent:5em;表示此段落第一行缩进5个字符的宽度
2》text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十
1》text-indent:5em;表示此段落第一行缩进5个字符的宽度
2》text-indent:20%:表示此段落第一行缩进父容器宽度的百分之二十
3>.text-decoration:
none:会关闭原本应用到一个元素上的所有装饰
underline: 添加下划线
overline:在文本的顶端画一个上划线
line-through:在文本中间画一个贯穿线
blink:让文本闪烁(无效果)
none:会关闭原本应用到一个元素上的所有装饰
underline: 添加下划线
overline:在文本的顶端画一个上划线
line-through:在文本中间画一个贯穿线
blink:让文本闪烁(无效果)
4>.text-align:一个元素中的文本行互相之间的对齐方式,值有left(左对齐)、right(右对齐) 和 center(居中)
5>.word-spacing: 字符之间的间隔
6>.letter-spacing: 单词或者字母之间的间隔
7>.line-height:设置行高 line-height:25px;
背景属性
1>.background-color：设置背景颜色，默认透明
2>.background-image:url("图片路径"):设置背景图片
3>.background-repeat:repeat-y:只在垂直方向都平铺
repeat-x:只在水平方向都平铺
repeat:在水平垂直方向都平铺
no-repeat:任何方向都不平铺
repeat-x:只在水平方向都平铺
repeat:在水平垂直方向都平铺
no-repeat:任何方向都不平铺
4>.background-position: 改变图像在背景中的位置。top、bottom、left、right 和 center
/*简写 没有顺序*/
background: red center no-repeat url(img/003.jpg);
background: red center no-repeat url(img/003.jpg);
列表属性
list-style-type:decimal;改变列表的标志类型
list-style-image: url("images/dog.gif");用图像表示标志
list-style-position: inside;确定标志出现在列表项内容之外还是内容内部
简写
list-style: decimal url(img/001.png) inside;
list-style: decimal url(img/001.png) inside;
去掉样式:
list-style:none;
list-style-type:none;
list-style:none;
list-style-type:none;
尺寸显示轮廓属性
width:设置元素的宽度
height:设置元素的高度
显示属性(display)
display: none 不显示
block:块级显示 默认
inline:行级显示
inline-block:行级块
display: none 不显示
block:块级显示 默认
inline:行级显示
inline-block:行级块
轮廓（outline）
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。
常用属性：
outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);
设置轮廓的样outline-color:red;
设置轮廓的颜色outline-width:10px设置轮廓的宽度
outline-style:solid(实线)/dotted(虚线)/dashed(虚线，虚线的每段较长)/double(框为空心);
设置轮廓的样outline-color:red;
设置轮廓的颜色outline-width:10px设置轮廓的宽度
浮动属性
浮动(float)的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在标准文档流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
clear 属性
规定元素的哪一侧不允许其他浮动元素。
规定元素的哪一侧不允许其他浮动元素。
left
在左侧不允许浮动元素。
在左侧不允许浮动元素。
right
在右侧不允许浮动元素。
在右侧不允许浮动元素。
both
在左右两侧均不允许浮动元素。
在左右两侧均不允许浮动元素。
none
默认值。允许浮动元素出现在两侧。
默认值。允许浮动元素出现在两侧。
inherit
规定应该从父元素继承 clear 属性的值。
规定应该从父元素继承 clear 属性的值。
定位属性
静态定位（默认定位方式）static
相对定位(relative)
相对于原来的位置偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留。
绝对定位(absolute)
元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是视窗本身。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于视窗本身。
固定定位(fixed)
元素框的表现类似于将 position 设置为 absolute，不过其位置相对于视窗本身。
CSS盒子模型
边框属性
border-style:边框样式，值有以下情况：
solid:实线
double:空心线
dashed:虚线组成的边框
dotted:圆点组成的边框
solid:实线
double:空心线
dashed:虚线组成的边框
dotted:圆点组成的边框
border-color:边框颜色
border-width:边框宽度
简写
border: 1px solid red;
border: 1px solid red;
外边距属性
margin:外间距,边框和边框外层的元素的距离
margin:四个方向的距离(top right bottom left)
margin-top:
margin-bottom:
margin-left:
margin-right:
margin-top:
margin-bottom:
margin-left:
margin-right:
内边距属性
padding:内间距,元素内容和边框之间的距离((top right bottom left))
padding-left:
padding-right:
padding-top:
padding-bottom:
padding-left:
padding-right:
padding-top:
padding-bottom:
盒子模型的实际的宽度：width+2*（padding+border+margin）
盒子模型的实际的高度：height+2*（padding+border+margin）
CSS3扩展属性
1.border-radius
圆角属性
示例： border-radius: 25px;
示例： border-radius: 25px;
2.box-shadow
用于向方框添加阴影
示例：box-shadow: 10px 10px 5px #888888;
示例：box-shadow: 10px 10px 5px #888888;
3.background-size
属性规定背景图片的尺寸
<body style="text-align: center;
background:url(img/1.png);
background-size: 200px 300px;
background-repeat: no-repeat;">
</body>
<body style="text-align: center;
background:url(img/1.png);
background-size: 200px 300px;
background-repeat: no-repeat;">
</body>
4.background-image
为指定元素使用多个背景图像
为指定元素使用多个背景图像
5.text-shadow
可向文本应用阴影
可向文本应用阴影
0 条评论
下一页
