html/css学习笔记(一)
- =============================================================================================
- 盒子模型
- 1.background
- 1.1
- background-color
- background-image: url("");
- background-repeat
- background-size: (x轴的比例 y轴的比例)
- background-position
- background-attachment:fixed;(背景图固定不滚动)
- 1.2 复合写法
- background: color iamge position repeat;
- 2.border
- 2.1复合写法
- border: border-width border-style border-color;
- 2.2边框圆角
- border-radius
- 3.padding
- padding:20px 10px; 上下边距:20px 左右边距:10px
- padding: 20px 30px 4px; 上 左右 下
- padding:10px 20px 30px 40px; 上 右 下 左
- 4.margin
- 4.1写法和padding类似
- 4.2注意
- a.子级margin-top特定情况下会穿透父级
- 规避方法: 1.给父级加边框
- 2.给父级加voerflow:hidden;
- 3.将margin-top用父级padding-top替代。
- b.兄弟关系的margin-top和margin-bottom会叠压
- 5.文本设置
- font-size 文字大小
- font-family 字体
- color 文字颜色
- line-height 文字行高
- text-align 文本对齐方式
- text-indent:(像素/em);首行缩进
- font-weight 文字着重 (normal bold bolder)
- font-style 文字倾斜(normal italic oblique(斜体) )
- font-decoration 文本修饰 (none underline line-through)
- letter-spacing 字母间距(px)
- word-space 单词间距(以空格为解析单位)
- 小结
- A.盒子模型 url("./img/盒子模型.jpg");
- B.常见复合属性
- background: background-color background-iamge background-position background-repeat
- border: border-width border-style border-color
- padding: 上 右 下 左
- margin: 上右 下 左
- font: font-style font-weight font-size/line-height font-family;
- =============================================================================================
- 标签
- 1.常见的标签
- title标签
- 双标签
- 语义:网页标题 权重最大
- div标签
- 双标签
- 语义:无意义
- h标签
- 双标签
- 语义:标题
- 默认样式:font-size font-weight margin
- h1权重最大 h2次之
- p标签
- 双标签
- 语义:段落
- 默认样式: margin
- p标签再嵌套不要包含块元素的标签
- ul标签
- 语义:无序列表
- 默认样式:margin padding-left list-style-type
- li标签
- 语义:列表项
- 默认样式:list-style-type;
- ol标签
- 语义:有序列表
- 默认样式:同ul
- dl标签
- 字典标签
- 语义:自定义列表
- 默认样式:无
- dt标签
- 语义:列表标题
- 默认样式:无
- dd标签
- 语义:列表说明
- 默认样式:margin-left
- 小结
- 快属性标签的特性:
- 1.默认父级100%的宽
- 2.支持所有css样式
- 3.独占一行
- =============================================================================================
- 内联属性的标签
- 内链属性标签特性:
- 1.同属性的标签排在一排
- 2.内容撑开宽度
- 3.不支持宽高,不支持上下的padding和margin
- 4.代码换行被解析 间距的大小取决于父级的font-size的大小
- span标签
- 语义:无意义
- strong标签
- 语义:强调(加粗)
- 默认样式:font-weight 权重比较高
- em标签
- 语义:强调(斜体)
- 默认样式:font-style 权重比较高
- a标签
- 语义:超链接
- 默认样式:color text-decoration cursor;
- 注:
- target="_self"(默认)当前页打开 target="_blank"新窗口打开
- herf属性:
- 1.如果要连接网址,一定要加http://
- 2.#代表连接到当前页面
- 内联块属性标签
- 特性:
- 1.同属性的标签排在一排
- 2.内容撑开宽度
- 3.支持所有css的样式
- 4.代码换行被解析 间距大小取决于父级的font-size大小
- img标签
- 单标签
- 语义:图片
- 默认样式:低版本浏览器中有默认边框
- 小结
- 标签类型的转换
- 显示为无:display:none;
- 块属性: display:block;
- 内链属性
- 内联:display:inline;
- 内联块:display:inline-block;
- =============================================================================================
- 浮动的样式和特性
- 浮动的特性
- 1.浮动的元素排在同一排
- 2.浮动的元素内容撑开宽度
- 3.浮动的元素支持所有css样式
- 4.浮动的元素脱离文档流
- 5.浮动的元素提升层级半级(属性盖住内容溢出,可做文字环绕div的效果)
- (未完待续......)
html/css学习笔记(一)的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- 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).表单是可以把浏览者输入的数据传送到服务器端,这样服务 ...
- HTML+CSS学习笔记(4) - 认识标签(3)
HTML+CSS学习笔记(4) - 认识标签(3) 1.使用<a>标签,链接到另一个页面 使用<a>标签可实现超链接,它在网页制作中可以说是无处不在,只要有链接的地方,就会有这 ...
- HTML+CSS学习笔记(3)- 认识标签(2)
HTML+CSS学习笔记(3)- 认识标签(2) 1.使用ul,添加新闻信息列表 在浏览网页时,你会发现网页上有很多信息的列表,如新闻列表.图片列表, 这些列表就可以使用ul-li标签来完成.ul-l ...
- HTML+CSS学习笔记(2) - 认识标签(1)
HTML+CSS学习笔记(2) - 认识标签(1) 1.语义化,让你的网页更好的被搜索引擎理解 标签的用途: 我们学习网页制作时,常常会听到一个词,语义化.那么什么叫做语义化呢,说的通俗点就是:明白每 ...
- HTML+CSS学习笔记(1) - Html介绍
HTML+CSS学习笔记(1) - Html介绍 1.代码初体验,制作我的第一个网页 <!DOCTYPE HTML> <html> <head> <meta ...
- css学习笔记四
广州天气变冷了,css学习笔记还是要总结. 总结: 1:几米页面静态页面主要是一列结构头部banner图,mainbody部分放文字内容和图书图片,底部是页面的版权信息 2:腾讯软件中心静态页面制作( ...
- CSS学习笔记:溢出文本省略(text-overflow)
原文:CSS学习笔记:溢出文本省略(text-overflow) 在CSS3中,text-overflow属性的基本语法如下: clip:表示不显示省略文本,简单的裁切. ellipsis:表示对象文 ...
随机推荐
- javascript知识整理之this
js中的this是一个头疼的问题,尤其对于笔者这种初级的菜鸟来讲,下面梳理下this的知识,可以当做是初级进阶也好入门也罢,总归输出的才是自己掌握的: Js中this不是由词法作用域决定的 而是调用时 ...
- webpack中使用typescript
概述 这是我学习webpack中使用typescript的记录,供以后开发时参考,相信对其他人也有用. 学习typescript建议直接看中文文档或英文文档,休闲之余可以看这篇TypeScript 总 ...
- HashMap的源码分析
hashMap的底层实现是 数组+链表 的数据结构,数组是一个Entry<K,V>[] 的键值对对象数组,在数组的每个索引上存储的是包含Entry的节点对象,每个Entry对象是一个单链表 ...
- 设置select,option文本居中
设置select,option文本居中 可以通过 padding 属性设置内边距,使它看上去居中: select{ # 从左到右依次表示上内边距,右内边距,下内边距,左内边距: padding :0 ...
- Python模块——logging模块
logging模块简介 logging模块定义的函数和类为应用程序和库的开发实现了一个灵活的事件日志系统.logging模块是Python的一个标准库模块, 由标准库模块提供日志记录API的关键好处是 ...
- null、undefined、typeof、instanceof
目录 概述 null undefined typeof instanceof 概述 JavaScript(ECMAScript标准)里共有5种基本类型: undefined, null, Boolea ...
- 配置redis
配置Redis 配置相关redis.conf bind 127.0.0.1 注释掉 否则其它远程计算机无 ...
- epel安装第三方扩展源后,运行yum报错的解决方案
yum安装报错:Cannot retrieve metalink for repository: epel. Please verify its path and try again 解决方法: 一句 ...
- tcp 三次握手 四次挥手
TCP协议中的三次握手和四次挥手 建立TCP需要三次握手才能建立,而断开连接则需要四次挥手. 三次握手,建立连接 首先Client发送连接请求报文,Server端接收连接后回复ACK报文,并为这次连接 ...
- Android 爬坑之路
java.lang.ClassCastException: android.app.Application cannot be cast to com.example.lbsdemo.TrackApp ...