一.前端初识

一.前端开发语言介绍

html(Hypertext Markup Language)—— 结构                                超文本标记语言
css(Cascading Style Sheets)—— 样式    层叠样式表
js(javascript)—— 行为


二.html超文本标记语言

<  标记

<html> 标签

<html> </html> 标签对


<!DOCTYPE HTML> 声明文档类型

     <meta charset="utf-8"/>  代码编码格式

单标签:直接在后面斜杠结束的标签叫做单标签

三.样式表出现的位置

行间样式表

<div style="……"></div>

内部样式表

<style>…………</style>

外部样式表

<link href="style.css" rel="stylesheet"/>

四.常见样式 一 background

属性:属性值;
width 宽度
height 高度
background 背景
background-attachment: fixed; 背景是否滚动
background-color: gray; 背景颜色
background-image: url(bg.jpg);  背景图
background-repeat: no-repeat; 背景图是否重复
background-position: center 0px; 背景图位置

五.常见样式 一 border

border 边框

border-width 边框宽度
border-style   边框样式
border-color  边框颜色

边框样式:
solid      实线
dashed  虚线
dotted   点线(IE6不兼容)

六.常见样式 一 padding

padding 内边距
padding-top         上边内边距
padding-right         右边内边距
padding-bottom    下边内边距
padding-left            左边内边距
padding: top right bottom left;
注意:内边距相当于给一个盒子加了填充厚度会影响盒子大小。

七.常见样式 一margin

margin 外边距
外边距的问题:
1、上下外边距会叠压;
2、父子级包含的时候子级的margin-top会传递给父级;(内边距替代外边距)
外边距复合:margin: top right bottom left;

八.盒模型

 

盒子大小 = border + padding + width/height

盒子宽度 = border+padding+width+padding +border

盒子高度 = border+padding+height+padding+border

九.常见样式 一结构

结构样式:

width 宽度              

height 高度                 

background 背景          

border 边框             

padding 内边距          

margin 外边距

 

十.复合属性:一个属性多个属性值的命令,叫做复合属性。

常见样式 —文本设置

 

font-size                  文字大小(一般均为偶数)

font-family              字体(中文默认宋体)

color                        文字颜色(英文、rgb、十六位进制色彩值)

line-height              行高

text-align                文本对齐方式

text-indent             首行缩进(em缩进字符)

font-weight            文字着重

font-style                文字倾斜

text-decoration      文本修饰

letter-spacing         字母间距

word-spacing         单词间距(以空格为解析单位)

 

十一.常见复合属性

复合属性:

background

border

padding

margin

fontfont-style | font-weight | font-size/line-height | font-family

十二.常见样式(17)

width 宽度                                  height 高度

background 背景                       border 边框

padding 内边距                          margin 外边距

font-size  文字大小                   font-family 字体

color 文字颜色                   line-height 行高

text-align 文本对齐方式            text-indent 首行缩进

font-weight 文字着重                 font-style 文字样式

text-decoration 文本修饰           letter-spacing 字母间距

word-spacing 单词间


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值