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…
转载于:https://www.cnblogs.com/aix1314/p/3868203.html
html+css学习笔记 [基础1]相关推荐
- html css学习笔记~ 基础知识和页面显示的四个区域内容及display:flex 等常用的一些命令(手画)
一般 在html文件中输入<link href=".../xxx.css" rel="stylesheet"/> 通过这样的外部样式联系 css & ...
- CSS学习笔记(详细)- 基础
CSS学习笔记从零开始 代码风格 样式书写格式 CSS基础选择器 css选择器的作用:(选择标签用的) 选择器分类:基础选择器和复合选择器 基础选择器 标签选择器 类选择器 - 开发最常用 多类名 i ...
- HTML/CSS学习笔记03【CSS概述、CSS选择器、CSS属性、CSS案例-注册页面】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- HTML/CSS学习笔记01【概念介绍、基本标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
- Spring Boot学习笔记-基础(2)
Spring Boot学习笔记-基础(2) Spring Boot 优点: – 快速创建独立运行的Spring项目以及与主流框架集成 – 使用嵌入式的Servlet容器,应用无需打成WAR包 – st ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- CSS 学习笔记 - 网格布局(栅格系统)
CSS 学习笔记 - 网格布局(栅格系统) 开启网格模式 基本概念 属性说明 容器属性 内容属性 效果展示 grid-template-rows.grid-template-columns 基本用法 ...
- css中怎么加入立体模型,CSS学习笔记二:css 画立体图形
继上一次学了如何去运用css画平面图形,这一次学如何去画正方体,从2D向着3D学习,虽然有点满,但总是一个过程,一点一点积累,然后记录起来. Transfrom3D 在这一次中运用到了一下几种属性: ...
- CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法
CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 参考文章: (1)CSS学习笔记--浮动元素由于浏览器页面缩小而被挤到下面的解决方法 (2)https://www.cnblogs. ...
最新文章
- 卷积神经网络(CNN)原理
- C++、C#控制台应用程序暂停下来的方法
- 植物大战僵尸食人花无cd逆向分析
- flutter中分割线效果实现(三种方法)
- cast函数 oracle 日期_从Oracle到PG 该做的改造工作一个都不能少!
- 刚刚开源的Python静态类型检查器:Pyright
- seaborn常用的10种数据分析图表
- ASP.NET MVC中在Action获取提交的表单数据方法总结 (4种方法,转载备忘)
- 阿里 BladeDISC 深度学习编译器正式开源
- Leetcode | Implement strStr()
- 你必须知道的.NET
- Windows 8 系统安装
- 淘宝违规考试软件第一课
- 思科1242 AP无法连接到无线控制器
- python引入视频_django 实现简单的插入视频
- MATLAB 画正态分布和对数正态分布的概率密度函数
- 荣耀智慧屏x1和小米4a哪个好?
- Cannot use import statement outside a module
- Java内存结构模型
- 如何在Win10登录画面默认开启小键盘数字锁定?
热门文章
- 使用Nagios监控网页
- Hi35xx GPIO在ko中设置
- qq音乐 android pad版,QQ音乐HD(com.tencent.qqmusicpad) - 4.12.1.4 - 应用 - 酷安
- python推介系统方法_基于AutoRec 的推荐系统介绍与python实现
- 自学Python从哪学方面入手?
- 5行Python实现验证码识别,太稳了
- 某天没有数据能查出来0数量_用Excel对纽约市出租车费数据探索性分析
- js之浅拷贝和深拷贝
- wtl中显示html,用WTL构建HTML界面应用程序(1)
- 【图论专题】最小生成树及其简单应用