HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
层叠样式表(英文全称：Cascading Style
Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进

网页基本结构

<!DOCTYPE html>
<html lang="en"><head><title>标题</title></head>
<body>
</body>
</html>

charset=utf-8 表示当前文档的字符集是采用utf-8的字符，也就是我们常说英文字符集; charset 字符集国内常用的有：
uft-8 是Unicode的其中一个使用方式。 UTF是 Unicode Translation Format，
即把Unicode转做某种格式的意思。 gbk gb2312 主要用于中文。 big5 用于繁体中文

html标签有：

img src=“链接目录” alt=“图片无法加载所显示的文字” title=“图片悬浮显示的文字”/
h1-h6为标题标签，h1到h6分别为一级标题到六级标题。结构为h1 /h1它是一对标签
a href=“链接” /a填写目录跳转到所填写的目录位置。
em /em让文字达到倾斜效果
br/为换行标签可以达到换行效果
hr/为水平线标签，可实现下面一条水平线。
p /p为段落标签，行内元素独占一行，可以实现段落效果，达成一段一段的段落。
header /header为顶部的意思，意思为头部，标头的标签。

初识CSS。
CSS基本语法结构：
css最后一条声明“;”可写可不写，但是，基于W3C标准规范考虑，建议最后一条生命结束"；"都要写上。
引用css样式为：行内样式、内部样式、外部样式。
就近原则：行内样式>内部样式>外部样式。
css的样式：

属性	解释
width	宽，设置标签的宽图片的宽等等
height	高，设置标签的高图片的高等等
margin	简写属性在一个声明中设置所有外边距属性。该属性可以有 1 到 4 个值
padding	简写属性在一个声明中设置所有内边距属性
font	属性可以用来作为 font-style, font-variant, font-weight, font-size, line-height 和 font-family 属性的简写，或将元素的字体设置为系统字体
background	简写属性在一个声明中设置所有的背景属性
border	简写属性在一个声明设置所有的边框属性
float	属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素
color	属性规定文本的颜色

<link href="目录" rel="stylesheet" type="text/css"/>注：英文输写，写入到html文件里面的head里面，别用中文输入法输入标点符号，否则无效。

选择器	解释
标签选择器	标签选择器直接应用于html标签上面
ID选择器	id选择器一个页面只能使用一次
类选择器	类选择器可以在页面中多次使用

优先级选择器：ID选择器>类选择器>标签选择器
标签选择器不遵循就近原则。
无论哪种方式引用css样式，一般都遵循：id选择器>class类选择器>标签选择器的优先级

高级选择器：

层次选择器
结构伪类选择器
属性选择器

层次选择器：

选择器	作用
E F	后代选择器(选择匹配的F元素，且匹配的F元素被包括在匹配的E元素内)
E>F	E>F子选择器（选择匹配的F元素，且匹配的F元素是匹配的E元素的子元素）
E+F	相邻兄弟选择器（选择匹配的F元素，且匹配的F元素仅位于匹配的）
E~F	通用选择器（选择匹配的F元素，且位于匹配的E元素后的所有匹配的F元素）

结构伪类选择器：

选择器	使用方法
E:first_child	(作为父元素的第一格子元素的元素E)
E:last-child	(作为父元素的最后一个子元素的元素E)
E F:nth-child(n)	(选择父级元素E的第n个子元素F,n可以是1、2、3.关键词为even、odd）
E：first-of-type	（选择符元素内具有指定类型的第一个E元素）
E:last-of-type	（选择父元素内具有指定类型的最后一个E元素）
E F:nth-of-type(n)	（选择父元素内具有指定类型的第n个F元素）

属性选择器：

选择器	如何用
E[attr]	选择匹配具有属性attr的E元素
E[attr*=val]	选择匹配元素E，且E元素定义了属性attr其属性值包含了“val”，换句话说，字符串val 与属性值中的任意位置相匹配
E[attr$=val]	选择匹配元素E，且E元素定义了属性attr其属性以val结尾的任意字符串
E[attr∧val]	选择匹配元素E，且E元素定义了属性attr其属性值是以val开头的任意字符串
E[attr=val]	选择匹配具有属性attr的E元素，并且属性为val（其中val区分大小写）

font属性与值：

font-size:14px;(个人理解这个是css里面设置字体的大小的样式)
font-family：微软雅黑;（设置所使用的字体）
font-wiight：900；（数字调整，与bold粗体、bolder更粗字体、lighter更细字体）

vertical-align：midde（图片垂直居中）

color属性

RGB：十六进制方法表示颜色：前两位表示红色分量，中间两位表示绿色分量，最后两位表示蓝色分量。
rgb（r，g，b）：正整数的取值为0~255.
RGBA：
在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道为0~1;
color:#FFF color:rgb{0,255,0)；

text属性：

属性	作用
text-justify	实现两端对齐文本效果
text-align	设置元素水平对齐方式常用：left、right、center
text-indent	设置首行文本的缩进。如：text-indent：2px。单位可以是em或px
text-decoration	文本装饰值：overline（上划线）underline（下划线）line-through（水平删除线） none（去除下划线）。
text-shadow	（文字阴影效果）值：color（颜色）x（X轴）Y（y轴）0（模糊半径）
排序	字体风格→字体粗细→字体大小→字体类型

伪类名称：

属性	作用
a：link	未单击访问时超链接显示的样式
a：visited	单机访问后超链接样式
a:hover	鼠标悬浮其上的超链接样式
a：active	鼠标单击未释放的超链接样式
伪类优先顺序	link>visited>hover>actire

列表样式
list-style-type：

属性	作用
none	无标记符号
disc	实心圆
circle	空心圆
square	实心正方形
decimal	数字

背景属性：

background：color（背景颜色）
background-image（背景图像） background：url（图片路径）。
background属性：background：#ccc url（背景图像目录）205px 10px no-repeat
分别为：背景颜色、背景图像、背景定位、背景不重复显示。

背景重复方式：

background-repeat属性：

no-repeat（不平铺，即只显示一次）
reoeat-x（只沿X轴水平平铺）
repeat-y（只沿Y轴垂直平铺）
epeat（沿水平和垂直两个方向平铺）

背景定位

值	含义
Ypos	单位：px； Xpos表示垂直位置
Xpos	单位：px； Xpos表示水平位置
X方向关键词	left、center、right
Y方向关键词	top、center、bottom

设计师如何对背景图片的大小进行控制呢？
背景尺寸：background-size

属性值	描述
auto	默认值，使用背景图片保持原样
percentage	当使用百分值时，不是相对于背景的尺寸大小来计算的，而是相对于元素宽度来计算的
cover	整个背景图片放大填充了整个元素
contain	让背景图片保持本身的宽高比例，将背景图片缩放到宽度或者高度正好适应所定义背景的区域

线性渐变：颜色沿着一条直线过渡：从左到右、从右到左、从上到下等
**径向渐变：**圆形或椭圆形渐变，颜色不再沿着一条直线变化，而是从一个起点朝所有方向混合

CSS3渐变兼容性

IE浏览器是Trident内核，加前缀：-ms-
谷歌浏览器是Webkit内核，加前缀：-Webkit
Safari浏览器是Webkit内核，加前缀：-Webkit-
Opera浏览器是Blink内核，加前缀：-o-
火狐浏览器是Mozilla内核，加前缀：-moz-

排版网页文本：

color
text-align
text-indent
line-height
text-decoration

css响应式布局

**/*媒体查询*/
/*当页面大于1200px 时，大屏幕，主要是PC 端*/
@media (min-width: 1200px) {}
/*在992 和1199 像素之间的屏幕里，中等屏幕，分辨率低的PC*/
@media (min-width: 992px) and (max-width: 1199px) {#adver .center {width: 50%;margin: -10px 0 0 -25%;}main .center h2 {font-size: 40px;}
}
/*在768 和991 像素之间的屏幕里，小屏幕，主要是PAD*/
@media (min-width: 768px) and (max-width: 991px) {#adver .center {width: 60%;margin: -10px 0 0 -30%;}#adver .search, #adver .button {font-size: 20px;}main .center h2 {font-size: 35px;}
}
/*在480 和767 像素之间的屏幕里，超小屏幕，主要是手机*/
@media (min-width: 480px) and (max-width: 767px) {header, header .center, header .link {height: 45px;}header .logo, .sm-hidden,.sidebar,.md-hidden {display: none;}header .link {width: 100%;line-height: 45px;}#adver {padding: 45px 0 0 0;}#adver .center {width: 70%;height: 53px;margin: -10px 0 0 -35%;}#adver .search, #adver .button {height: 45px;font-size: 18px;}.sm-visible {display: block;}main .center h2 {font-size: 30px;}main .center p {font-size: 15px;}main figure {width: 49.2%;}
}
/*在小于480 像素的屏幕，微小屏幕，更低分辨率的手机*/
@media (max-width: 479px) {header, header .center, header .link {height: 45px;}header .logo, .xs-hidden, .sm-hidden, .sidebar, .md-hidden  {display: none;}header .link {width: 100%;line-height: 45px;}header .link li {width: 25%;}#adver {padding: 45px 0 0 0;}#adver .center {width: 80%;height: 48px;margin: -10px 0 0 -40%;}#adver .search, #adver .button {height: 40px;font-size: 16px;}.sm-visible {display: block;}footer .bottom, footer .version {font-size: 13px;}main .center h2 {font-size: 26px;}main .center p {font-size: 14px;}main figure {width: 99%;}
}

CSS变形、过度与动画

目标：

会使用transform 2D变形设置网页元素样式
会使用transition制作过渡动画
会使用animation制作网页动画

那么如何在网页中实现动画效果呢？

动态图片
Flash
Javascript
CSS变形
CSS过度
CSS动画

CSS变形是一些效果的集合：

平移
旋转
缩放
倾斜等效
每个效果都可以称为变形（transform），它们可以分别操控元素发生平移、旋转、缩放、倾斜等变化。
语法：

transform：{transform-fimctopm}*；
{transform-function}设置变形函数，可以是一个，也可以是多个，中间以空格分开

变形函数：
translate():平移函数，基于X、Y坐标重新定位元素的位置
scale():缩放函数，可以使任意元素对象尺寸发生变化
rotate():旋转函数，取值是一个度数值
skew():倾斜函数，取值是一个度数值

浏览器支持：

属性	2Dtransform
IE	9+
Firefox	3.5+
Chrome	4.0+
Opera	10.5+
Safari	3.1+

2D位移

translate(te,ty)
te：（X轴（横坐标）移动的向量长度）
ty：(Y轴（横坐标）移动的向量长度)

translateX（tx）：表示只设置X轴的位移

translateY（ty）表示只设置X轴的位移

2D缩放

scale()函数可以只接受一个值，也可以接收两个值，只有一个值时，第二个值默认和第一个值相等

scaleX(sx):表示只设置X轴的缩放

scaleY(sy):表示只设置Y轴的缩放

2D倾斜

可以仅设置沿着X轴或Y轴方向倾斜：
skewX(ax):表示只设置X轴的倾斜
skewY(ay):表示只设置Y轴的倾斜

HTML与CSS的使用与总结相关推荐

ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
【css】基础学习总结
填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...
Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
前端之css基础学习（更正版）
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...
div css 常用技巧
div css 常用技巧 1.给图片加上alt属性: <img src="logo.gif" alt="我的公司logo,点击返回首页" /> 2 ...
CSS单位分析及CSS颜色表示法、颜色表（调色板）
CSS单位主要分析em.rem.fr这三个较难理解的单位吧,平常的px.%.cm那些就不谈了嘛. px在不同场景之下为同样的值,我们把它称作绝对单位,而em和rem受外部因素的影响下而改变,因此称作相 ...
前端之css引入方式/长度及颜色单位/常用样式
1.css三种引入方式 <!DOCTYPE html><html><head> <meta charset="UTF-8"> < ...

HTML与CSS的使用与总结