前端语言基础篇 之 【常见样式详解】

前端语言零基础——样式详解

前端开发语言介绍

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

样式表出现的位置

1. 行间样式表 ：<div style="....."></div>
2. 内部样式表  :  <style>.................</style>
3. 外部样式表  :  <link href="style.css"rel="stylesheet"/>

常见样式 —— background

• 属性：属性值；
• width 宽度
• height 高度
• background 背景

             background-attachment:fixed:fixed; 背景是否移动

             background-color:gray; 选择背景颜色

             background-image:url(bg.jpg); 配置背景图

             ackground-repeat:no-repeat; 背景是否移动

             background-position:center 0px; 背景图的位置

常见样式— border

border边框

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

边框样式：

•  solid 实线
• dashed 虚线
• dotted 点线

常见样式-padding和margin

padding 内边距

          内边距相当于给一个盒子在内部加了厚度会影响盒子的整体容积。

          padding-top       上边内边距

          padding-ringht    右边内边距

          padding-bottom 下边内边距

          padding-left         左边内边距 

margin 外边距

1、上下边距会叠压；

2、父子级包含子级的margin-top 会传递给父级；（内边距替代外边距）

文本设置常用格式

• font-size            文字大小
• font-family        字体
• font-weight      文字着重
• font-style          文字倾斜
• color                  文字颜色
• line-height         行高
• text-align           文本对齐方式
• text-indent        首行缩进
• text-decoration  文本修饰
• word-spacing     单词间距
• letter-spacing     字母间距