CSS学习笔记总结和技巧
跟叶老师说项目,他叫我写一个静态首页,看起来挺简单的,但是下手才发现在真的不会怎么下手啊,什么模型啊模块啊都不懂,写毛线啊!!
如图:页面下拉还有侧栏,中间内容等。
可是答应跟老师做了,不能怂啊,于是硬着头皮,花两三天看在慕课网上学习Bootstrap(讲得挺好的,建议大白去看一下),其实我刚看完不久,里面很多东西其实作者都总结得很不错,还有演示。
收获很多,打算再看一下HTML的div+css布局,花一两天时间就可以写完那个界面。就是这么自信,哈哈哈~ 不逼自己一把,你永远不知道自己有多优秀。
CSS的盒子模型,这个必须懂
这个图片是我看书看到的,觉得比较容易理解就拍下来了
选择器
一、基本分类:
1,标签选择器
2,类选择器class
3,ID选择器id
二、优先级:id > class > 标签
三、伪选择器:其实就是元素的一种状态
a:link:超链接被点前状态 a:visited:超链接点击后的状态 a:hover:悬停在超链接上的状态 a:action:点击超链接时的状态
在定义这些状态时,有一个顺序:L V H A
id和class属性名称使用限制
无论是应用到div,还是其他对象的id中,同一名称的id在当前页面中只能使用一次,而class属性名称可以重复使用多次。
框架中百分比的关系
例如,container等外层div的宽度设置为80%,是相对浏览器窗口而言的比例。而后面content和side这两个内层div的比例是相对于外层div而言的,即在container宽度的基础上而言的。
visibility和display属性的区别
visibility和display都可以达到隐藏页面元素的目的,但是还是有区别的。
如果想隐藏某元素,但还想在页面上保留该元素的空间,则使用visibility:hidden。
如果想在隐藏某元素的同时,让其他内容填充空白空间,则使用display:none。
在HTML中导入CSS文件技巧
为了提高相同的样式的复用性以及可扩展性,可以将多个标签样式进行单独定义,并封装成css文件。
如:p.css div.css . . .
在一个总的css文件中使用css的import将多个标签样式文件导入到总的css文件中,
然后在HTML页面上,使用link标签导入这个总的css文件即可。
all.css @import url(“p.css”); @import url(“div.css”); 在HTML中导入:<link rel=”stylesheet” href=”all.css”>
CSS属性书写顺序
建议遵循:布局定位属性 –> 自身属性 –> 文本属性 –> 其他属性。 尽量保证同类属性写在一起。
属性列举:
布局属性:margin、padding、float(包括clear)、position(top,right,bottom,left即上右下左)、display、visibility、overflow等。 自身属性:width、height、background、border等。 文本属性:font、color、text-align、text-decoration、text-indent等。 其他属性:list-style(列表样式)、vertical-vlign、cursor、z-index(层叠顺序)、zoom等。
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:腾讯软件中心静态页面制作( ...
随机推荐
- 数据库和Doctrine(转载自http://www.111cn.net/phper/332/85987.htm)
对于任何应用程序来说最为普遍最具挑战性的任务,就是从数据库中 读取和持久化数据信息.尽管symfony完整的框架没有默认集成ORM,但是symfony标准版,集成了很多程序,还自带集成了Doctrin ...
- 用c#在Access数据库中创建新表
生成表NewTable,该表有文本字段Field1和整型字段Field2 private void CreateNewTable() { OleDbConnection conn = new ...
- Django新手图文教程
Django新手图文教程 本文面向:有python基础,刚接触web框架的初学者. 环境:windows7 python3.5.1 pycharm专业版 Django 1.10版 pip3 一 ...
- 转:支撑Github的开源技术
原文来自于:http://www.infoq.com/cn/news/2014/03/projects-power-github Github在3月19号开放了新的项目展示页面(Showcase),S ...
- 转:VC中UpdateData()函数的使用
VC中UpdateData()函数的使用 UpdateData(FALSE)与UpdateData(TRUE)是相反的过程 UpdateData(FALSE)是把程序中改变的值更新到控件中去 ...
- ECharts使用心得——矩阵树图
1. 缘起 最近实验室 boss 让用矩形树图做一下研究数据的展示,囧,矩形树图是什么鬼.问了问师兄,说用 R 语言可以实现,让我去研究一下. = =,那这周不是不用干别的了. 刚好最近在研究百度出的 ...
- cf D. Broken Monitor
http://codeforces.com/contest/370/problem/D 题意:输入一张图,上面只有两个字符'w'和‘.’ ,如果可以用一个正方形把所有的‘w’围起来,所有的‘w’都在正 ...
- 【HDOJ】2585 Hotel
字符串水题. #include <cstdio> #include <cstring> #include <cstdlib> #define MAXN 55 cha ...
- iOS 9之分屏多任务(Split View)
金田(github 示例源码) 多任务(multitasking)算是iOS9中最引人瞩目的核心新特性了,之前越狱版用户就用过类似的插件,微软的 苏菲 (Windows Surface)系列也有分屏多 ...
- delphi客户端调服务器端的java webservice如何在参数中传对象? 转
我试过java返回一个对象到delphi端没问题,可反过来,delphi通过参数传一个对象到java,java端得到的对象值变为空,不知道是不是delphi这边设置或者对象注册方面有问题,究竟该怎么解 ...