html+css学习笔记 [基础1]
-------------------------------------------------------------------------------------------------------------
PSD (源文件)
JPG/GIF/PNG (导出图) //网页大图高清图 体积大
JPG:不支持透明半透明,所有空白区域填充白色
GIF:支持透明,不支持半透明 //小图标、动画图片
png8:支持透明,不支持半透明 //小图标
png24:支持透明,也支持半透明 //半透明图片
文字右方和下方会有1像素的默认间隙;
------------------------------------------------------------------------------------------------------
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
marginfont:font-style | font-weight | font-size/line-height | font-family;
常见样式
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 单词间距开发环境
Photoshop(切图、修图、测量)
Dreamweaver浏览器(两大类):
IE浏览器: IETester(IE6、IE7、IE8)、IE9、IE10……
标准浏览器:firefox(fireBug)、chrome、safari、oprea…
html+css学习笔记 [基础1]的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- jQuery学习笔记 - 基础知识扫盲入门篇
jQuery学习笔记 - 基础知识扫盲入门篇 2013-06-16 18:42 by 全新时代, 11 阅读, 0 评论, 收藏, 编辑 1.为什么要使用jQuery? 提供了强大的功能函数解决浏览器 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记08 浮动
从CSS学习笔记05 display属性一文中,我们知道div是块元素,会独占一行,即使div的宽度很小,像下面这样 应用display属性的inline属性可以让div与div共享一行,除了这种方法 ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
- HTML+CSS学习笔记(5)- 与浏览者交互,表单标签
HTML+CSS学习笔记(5)- 与浏览者交互,表单标签 1.使用表单标签,与用户交互 网站怎样与用户进行交互?答案是使用HTML表单(form).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
随机推荐
- ViewPager 可左右滑动和缩放的图片浏览
最近因为要做一个项目,需要使用到图片的浏览.我就自己在网上找了些资料,然后加以修改整理后出来一个demo,希望可以帮助到需要的人.同时这也是我第一个技术博客. 在做之前首先需要了解一下什么是ViewP ...
- hive操作语句使用详解
#创建表人信息表 person(String name,int age) hive> create table person(name STRING,age INT)ROW FORMAT DE ...
- Zend studio 12.5.1安装aptana
aptana是zend studio的一个插件.解决zend对于前台html支持,加亮的问题. 安装方法其实很简单 ,直接给出aptana的地址了. http://download.aptana.co ...
- 20150410---GridView分页(备忘)
GridView自带分页功能,但是模板单一,试用较少数据. AllowPaging="true" PageSize="10" 启用分页设置.默认每页数量为10 ...
- XForms标准介绍
XForms标准是真正实现展现与模型分离的.与客户端无关的展现服务标准. 1.XForms标准 XForms是W3C组织所推荐的下一代在线展现服务标准(早在2003年10月14日就被W3C推荐),它吸 ...
- HDU1064 第一道JAVA
简单的不能再简单的题目, 不过倒是可以来练练新学的JAVA.. import java.util.Scanner; public class Hello{ public static void mai ...
- Qt学习总结-ui篇
控件设置透明度: QGraphicsOpacityEffect *effect = new QGraphicsOpacityEffect(this); effect->setOpacity(0. ...
- Arduino CNC Shiled 和 DRV8825驱动板的注意事项
首先说明硬件:1) Arduino CNC Shiled V2.6 2)DRV8825驱动板 3)光驱步进电机 4)Arduino uno R3 下图是本次主角是Arduino CNC Shile ...
- 微信小程序视频地址
微信小程序视频系列教程完整版,课程中用到的源码附在帖子最后. [url=http://bbs.larkapp.com/forum.php?mod=viewthread&tid=5673][b] ...
- Windows下关于Composer使用时出现的问题及解决办法
问题一: Fatal error: Call to undefined method Composer\Package\CompletePackage::getTrans portOptions() ...