html和css的总结,关于前端:html和css总结

HTML的组成

head:

meta[keywords,description,author],title,link,script.style

css-正文

css的正文/* */

html-正文

css的引入有四种

一、行间款式

写法：在标签中，写一个style的属性,例如：style="..."，在引号当中写css款式

劣势：优先级最高

劣势：不是人写的代码

二、外部样式表

写法：在head标签中，写一个style的标签，在style标签中通过选择器来管制款式

通过选择器进行对标签的款式操作

三、内部样式表

1.新建一个css的文件

2.在head标签中写一个link标签，

写法：

用来关联1个css文件，在css文件中，通过选择器来管制款式

长处：利于扩大，利于保护

毛病：须要申请服务器。

四、@import

css款式的优先级：引入行间款式 > id选择器 > class选择器 > 标签名选择器

css-background

背景色彩

background-color: 英文单词，十六进制，rgb()

背景图片

background-image:url("门路")

舒适小提示：门路不要写错了，否则不显示

背景平铺

background-repeat:

repeat-x x轴平铺

repeat-y y轴平铺

no-repeat 不平铺

背景定位

background-position:x轴地位 y轴地位;

第一值为X轴地位

能够承受含糊的值如：left center right

也能够承受具体的数值：如：100px

第二只为Y轴地位

能够承受含糊的值如：top center bottom

也能够承受具体的数值：如：100px

例子：

background-position:100px 35px;

或

background-position:right bottom;

复合写法

background:color image position repeat;

css-边框

border 边框，算标签页面的宽度

边框形态：solid(实线) dashed(虚线) datted(点线)

边框通明 border:10px solid transparent;

css-圆角

圆角 border-radius:具体数值

一个值代表4个角

两个值代表两条对角线，第一个值代表左上/右下，第二个值代表右上/左下

三个值，第一个值代表左上，第二个值代表右上/左下，第三个值代表右下

四个值，从左上开始，顺时针顺次安顿，第一个值左上，第二个值是右上，第三个值右下，第四个值是左下

css-内边距

padding 内边距，算标签在页面的宽度

css-外边距

margin 外边距，不算标签在页面的宽度

margin的小性子

1.父级的第一个子级的margin-top会穿透父级

解决办法：

1.给父级加边框

2.overflow:hidden

3.不要用margin-top,用父级的padding-top

2.兄弟之间的margin-top和margin-bottom会叠压

盒模型 标签在页面中具体的地位

页面的宽度:border-left + padding-left + width + padding-right + border-right

页面的高度:border-yop + padding-top + height + padding-bottom + border-bottom

标签类型

一、块标签

个性：

1 独占一行

2 默认宽度是父级的100%

3 反对所有的css款式

权重最大的标签是：title

在head标签中，权重最重的标签，为10.

1、div

史上最罕用的标签

写法

语义：无意义

权重：无

2、h1-h6

题目标签

写法：双标签

3、p标签

4、 ul ol li

二、内联标签

内联标签分为：

内联标签

内联块标签

个性：同类型的标签在同一排

内容撑开宽高

不反对宽高，不反对margin和padding

1、span

无意义

无权重

2、strong

强调

强调作用

默认款式：font-weight

3、em

链接

链接作用

舒适提醒

1.href="..." 中的网址肯定记得加http://

2.在新页面关上，要在标签中增加一个target属性，值为_blank；

例如：

三、内联块标签个性：

1.同类型的标签排在同一排

2.内容撑开宽高

3.反对所有的css款式

4.代码换行被解析,解析宽度和父级的字体大小无关

img

图片标签

写法:

语义：图片

权重：alt利于搜索引擎优化

标签类型的转化

display

block 转为块标签

inline 转为内联标签

inline-block 转为内联块标签

none 显示为无

字体大小

font-size:具体数值;

行高

line-height:具体的数值;

示意文字中一行的高度(高低居中)

测量方法，从一行文字的顶端，量到下一行文字的顶端

文字字体

font-family:

'simsun' 宋体

'simhei' 黑体

'Microsoft yahei' 微软雅黑

'kaiti' 楷体

字体歪斜

font-style:

italic 歪斜

normal 不歪斜

文本款式(字体的粗细)

font-weight:具体的数值(100 ~ 900)/ bold/bolder

例子:font-weight:100;

文本款式的复合写法

font:style weight size/line-height family ;

舒适小提示：

font的设置，必须蕴含 font-size、line-height和font-family，否则不失效

例如：

font:20px/40px "simhei";

文本对齐

text-align:;

left 默认值 左对齐

center 两头对齐

right 右对齐

首行缩进

text-indent:具体的数值/2em;

具体的数值就是偏移多少数值

2em,是指缩进两个字符

字符间隙

letter-spacing:具体的数值;

舒适提醒：数值能够是正数；

单词间隙

word-spacing:具体的数值;

舒适提醒：数值能够是正数；

文本款式的继承问题

父级设置的文本款式，子级会享受父级的文本款式，就是继承

只有a标签的文字色彩设置例外，a标签的文字色彩须要独自设立色彩。

浮动

float

飘起来 left right

浮动的个性

1.浮动元素排在同一排

2.浮动元素内容撑开宽高

3.浮动元素反对所有的css款式

4.脱离文档流

解决脱离文档流的形式为清浮动(4种清浮动的形式)

1.父级浮动

弊病：整个页面都会飘起来，margin居中会生效

2.给父级加高，子级有多高，父级就多高

弊病：不利于扩大

3.给父级加overflow:hidden;(hidden【暗藏】；scroll【呈现滚动条】)

弊病：裁刀，子级超出的内容全副干掉

4.标签清浮动

clear

left ：标签左侧不容许呈现浮动元素

right：标签右侧不容许呈现浮动元素

both：标签两侧不容许呈现浮动元素

5.晋升层级半级

定位

position:relative 绝对于原地位的左上角，不会让出原来的空间

个别状况下会作为，脱离规范文档流父级来应用

position:absolute 相对定位【页面的左上角定位，脱离规范文档流父级】

position:fixed 固定定位【个别用来定广告位】

z-index 只能用在脱离了规范流的元素中【position】

float:文字围绕图片

table 内部表格构造

thead 表格头部

tr行

th头部单元格【默认状况下，文本程度，垂直对齐，文本加粗】

tr

td内容单元格

tbody

tfoot

鼠标悬浮 ：hover

：first-child第一个子元素

：last-child最初一个子元素

：nth-child(n)第几个子元素

：nth-child(2n)偶数个元素

：nth-child(2n-1)奇数个元素

空格 后辈选择器

>子元素选择器

+第一个相邻兄弟

~所有兄弟

ftp:文件的上传下载

服务器/空间：阿里，景安【文件夹】

域名 www一级域名 二级域名

SEM:百度竞价，花钱的

SEO：优化，不花钱，代码，文件，服务器，内部文字【外链】

品牌的关键词，行业的关键词

keywords:

description:

h1：题目

单标签：

---

双标签：html body head h1~h6 p a i ul li ol strong

em span div dt dd dl b u sup sub

form表单，用来做数据的提交，跟后盾交互

mathod: get【地址栏传输数据；电商网站；字符串】

post【暗藏的模式传递；传输明码；file，能够传输大文件】

action 属性，定义连贯的门路；如果不写，跳转到以后门路；

input 输出元素

type 类型辨别

text 单行文本

placeholder 提醒文本，输出文本之后会主动隐没

maxlenth 最大长度

name 传输数据的键【重要的，必须增加】

password 明码框【cols列[宽]，row行[高]】

textarea 多行文本

radio 单选按钮【所有的按钮的name值必须统一[性别]】

checkbox 多选按钮【name值必须统一】

select option 下拉菜单

file浏览框

reset 重置按钮

button一般按钮

submit 提交按钮

value 提醒文本

按钮的readonly和disabled

readonly 只读，能够提交数据

disabled 不容许，禁止 不能够提交数据

border-radius ：%或者px圆角

box-shadow 背景暗影

box-shadow: 程度暗影的地位 垂直暗影的地位 含糊度 暗影的尺寸，内外部暗影【默认为outside】，内暗影inside

分类：单层暗影，多层暗影，内暗影，外暗影

图片设置暗影：外暗影，不能设置内暗影

text-shadow 文本暗影

语法 text-shadow：x,y,blur,color

背景突变 指定两个以上的色彩进行适度

分类：

线性突变：linear-gradient

径向突变：radial-gradient

反复线性突变：repeating-linear-gradient

反复径向突变：repeating-radial-gradient

线性突变语法：background：linear-gradient(方向，color1，color2)

径向突变语法：background：-webkit-radial-gradient(center,shape【circla圆形，ellipse椭圆】,size,color1,color2)

shape示意径向突变的形态，默认状况下是椭圆的

浏览器的兼容性：

-o- Opear欧朋

-webkit- Safari Chrome

-moz- Firefox火狐

-ms- IE浏览器

默认状况下：方向为从上到下

before和after 伪元素选择器

iframe 内联框架

varify 验证码

opacity 图片，文本通明

overflow 溢出

background-Origin 背景图片地位

background-clip 背景剪切

伪类： ：hover ：focus ：active

伪元素：

first-letter：第一个文本

first-line：第一行

before 在元素后面插入元素

after 在元素的前面插入元素

伪类：

a:link 【未拜访的链接】蓝色

a:visited【已拜访过的链接】紫色

a:hover【鼠标滑过链接】没有色彩

a:active【已选中的链接】红色

iframe 在一个html页面中增加另一个html(内联框架)

name:规定iframe的名称

src：规定iframe 中显示文档的URL

scrolling:规定是否在iframe 中显示滚动条

white-space: nowrap;【不让文本换行】

overflow：hidden【溢出暗藏】

text-overflow：ellipsis;【增加省略号】

雪碧图 借助工具

transition:过渡过程(不兼容的，须要加上浏览器前缀)

transition：属性，破费的工夫，速度，提早

transition-property: 规定利用过渡的css属性的名称

(width height background transform)

transition-duration:定义过渡成果。默认是0(2 ，3)

transition-timing-function：规定过渡成果的工夫曲线。默认是ease(ease由慢到快 再由快到慢，linear匀速，ease-in由慢到快，ease-out先快后慢，ease-in-out中间慢)

transition-delay：规定过渡成果何时开始。默认是0s。

transform：rotate(0deg)；旋转0度

deg为正值时，顺时针

负值，逆时针

缩放：scale(x，y)[x,y别离代表x轴y轴]

x是倍数，1为不缩放；大于1 放大；小于1放大

能够为负值，如果x为负值，沿着x轴翻转

如果y轴为负值，沿着y轴翻转

如果都为负值则沿着中心点翻转

x,y的值为倍数，不能用px

歪斜：skew(x,y)

100.本期的教程到了这里就完结了啦,让咱们一起致力走向巅峰!