CSS学习笔记
CSS学习笔记
2016年12月15日整理
CSS基础
Chapter1
在console输入escape("宋体") ENTER
就会出现unicode编码
显示"%u5B8B%u4F53" 就是\5B8B\4F53
font-family: 中文,英文,最好的是unicode编码
eg. font-family: "SimSun","SimHei",sans-serif;
字体名称 英文名称 Unicode 编码
宋体 SimSun \5B8B\4F53
新宋体 NSimSun \65B0\5B8B\4F53
黑体 SimHei \9ED1\4F53
微软雅黑 microsoft yahei \5FAE\8F6F\96C5\9ED1
楷体 _GB2312 KaiTi_GB2312 \6977\4F53_GB2312
隶书 LiSu \96B6\4E66
幼园 YouYuan \5E7C\5706
华文细黑 STXihei \534E\6587\7EC6\9ED1
细明体 MingLiU \7EC6\660E\4F53
新细明体 PMingLiU \65B0\7EC6\660E\4F53
CSS(cascading style sheet) 层叠样式表
CSS书写位置:
1. 行内式:基本不用。代码可维护性极差,css代码和html结构没有实现分离,影响的范围只有当前标签
<p style="color:red">...</p>
2. 内嵌式:少用。代码可维护性较差,没有实现css代码与html结构的完全分离,影响的范围只有当前页面
<head>
<style type="text/css">
...
</style>
</head>
3. 外联式:多用。代码可维护性高,css与html结构完全分离,影响范围广,当前整个网页站点
<link rel="stylesheet" href="CSS/main.css">
4. 导入式:和外联式一样都是导入某一个文件夹的CSS样式,不过写法不同,并且@import必须写在所有CSS样式的前面(不推荐使用)
@import url(CSS/main.css)
选择器
- 基础选择器:
标签选择器
p { }
类选择器
.classname { }
1. 不能以纯数字或者以数字开头定义类名
2. 不推荐使用汉字定义类名
3. 不能以特殊符号或者以特殊符号开头("_"除外)定义类名
4. 不建议使用标签名或者属性名定义类名
5. 一个标签可以同时调用多个类样式,多个标签可以同时调用一个类样式
6. 不要去试图用一个类名,把某个标签的所有样式写完。这个标签要多携带几个类,共同造成这个标签的样式。
7. 每一个类要尽可能小,有“公共”的概念,能够让更多的标签使用。
id选择器
#idname { }
1. id的命名要以字母开头,可以有数字、下划线,大小写严格区别
2. id名是唯一的,可以说id是js专用
3. 一个标签只能调用一个id样式
通配符选择器
* { }
(基本不用,因为会选中所有标签,效率低下)
- 复合选择器
p.classname { }
- 标签指定式选择器/交集选择器
p.classname { }
&
p#idname { }
(一般写成#idname { }
) - 后代选择器
div p { }
标签之间必须属于嵌套关系 - 并集选择器/分组选择器
div, p { }
- 标签指定式选择器/交集选择器
- 选择器IE兼容问题
- IE6能够兼容: 标签选择器、id选择器、类选择器、后代、交集选择器、并集选择器、通配符
- IE7能够兼容: 儿子选择器
div>p
、下一个兄弟选择器h3+p
- IE8能够兼容:
ul li:first-child
ul li:last-child
等
- 基础选择器:
Chapter2
标签的分类:
HTML将标签分为容器级和文本级
- 文本级:p、span、a、b、i、u、em
- 容器级:div、h系列、li、dt、dd
CSS将标签分为块级元素、行内元素和行内块元素
1. 块级元素 `<div>`, `<p>`, `<li>`, `<h1>`...
1. 元素自己独占一行显示(默认有宽度);
2. 可以设置宽度和高度;
3. 当嵌套一个块级元素,子元素如果不设置宽度,那么该子元素的宽度为父元素的宽度。
2. 行内元素 `span`, `a`, `font`, `strong`...
1. 元素在一行上显示
2. 不能直接设置宽度和高度
3. 行内块元素 `image`, `input`
1. 元素在一行上显示
2. 可以设置宽度和高度
所有的文本级标签,都是行内元素,除了p是个文本级,但是是个块级元素。
所有的容器级标签都是块级元素。
元素之间的转换
- display: inline
- display: block
- display: inline-block
CSS特性
层叠性:层叠性是一种能力,就是处理冲突的能力。
1. 样式覆盖。与样式的**调用顺序**没关,与样式的**定义顺序**有关;
2. 层叠性发生的前提: 样式冲突。
继承性
1. 继承性发生的前提:标签之间属于嵌套关系;
**与文字有关的属性都可以实现继承**
2. 文字颜色color可以实现继承
3. 文字font-xxx 可以实现继承
4. 行高line-hight 可以实现继承
5. text-indent, text-align 可以实现继承
6. 特殊:
1. `<a href="#"></a>` 不能继承父元素中的文字颜色(层叠掉了)
2. `<h1></h1>` 标题标签不能继承父元素中的文字大小
优先级(特定性、权重)
数值越大,特定性远大,规则就越特定
选择上了,数权重,(id的数量,类的数量,标签的数量)。
如果权重一样,谁写在后面听谁的。没有选择上,通过继承影响的,就近原则,谁描述的近听谁的。
如果描述的一样近,比如选择器权重,如果权重再一样重,谁写在后面听谁的。!important > 行内式 > id > 类/伪类 > 元素名 > 认样式
先按作者、读者、浏览器的顺序排列,然后如果作者跟读者出现同分数的,最后出现的规则越优先
!important
使用注意事项!important
提升的是一个属性,而不是一个选择器!important
无法提升继承的权重,该是0还是0!important
不影响就近原则
如果大家都是继承来的,!importan
不能影响就近原则呢,应该按照“就近原则”来计算权重!important
做网站的时候,不允许使用。因为会让css写的很乱
继承的权重为0,权重会叠加
Chapter3
1. 行高
行高 = 文字大小 + 上间距 + 下间距
行高、字号,一般都是偶数
行高的作用:
当行高值为父容器的高度时,可以让父容器中的文字垂直显示行高的单位:
- 单独给一个元素设置行高
当给一个独立的元素设置行高值的时候,除了以px为单位的行高值与文字大小无关,其他都与文字大小有关(与文字大小的积)
- 盒子嵌套,给父元素设置行高值,子元素的行高问题
行高可以实现继承
当父元素设置的行高值除不带单位情况下,都是先与父元素的文字大小相乘最后的结果,被子元素继承。
当父元素设置的行高值不带单位时,行高 = 子元素文字大小 * 行高值- 单独给一个元素设置行高
表单优化写法:
<!-- for里面写input的id -->
<label for="username"></label>
用户名:
<input type="text" class="username" id="username" />
什么表单元素都有label
继承的盒子在父盒子宽度范围内,padding值不会影响该盒子大小。(
box-sizing: content-box
时)外边距合并问题:
- 当两个盒子垂直显示的时候,外边距以设置的最大值为准
- 盒子嵌套(外边距塌陷):
1. 给父盒子设置边框
2. 给父盒子设置overflow:hidden;
,但会触发BFC(Block formatting contexts)
行内元素不要给上下的margin和padding
- 上下的margin和padding会被忽略
- 左右margin和padding会起作用
margin最好用于兄弟关系之间,padding最好用于父子关系之间
a:link
、a:visited
都是可以省略的,a标签涵盖了link、visited的状态
Chapter4
标准流(文档流)
元素默认的显示方式就是标准流。1. 空白折叠现象:比如,如果我们想让img标签之间没有空隙,必须紧密连接
2. 高矮不齐,底边对齐
3. 自动换行,一行写不满,换行写
三种脱标方法
- 浮动
- 绝对定位
- 固定定位
浮动
float:left/right;
特点: 脱标,贴边,字围,收缩
收缩:一个浮动的元素,如果没有设置width,那么将自动收缩为文字的宽度(这点非常像行内元素)1. 设置了浮动的元素不占原来的位置(脱标)
2. 一旦浮动,所有标签就不区分行内元素、块级元素,将能够并排,并且能够设置宽高
3. 可以让块级元素在一行上显示
4. 浮动可以行内元素转化为行内块元素
5. 设置了浮动的元素,影响其后面的元素
6. 模式转换的过程中,能用display就用display
作用:
1. 浮动用来解决文字图片环绕问题
2. 制作导航栏
3. 网页布局
清除浮动
1. 清除浮动不是删除浮动,清除浮动指的是清除浮动的影响
2. 当子元素设置了浮动,父元素没有高度的时候,造成页面布局混乱。
这种情况下进行清除浮动。
清除浮动带来的影响的七种方式
给浮动元素的父盒子添加
height
工作中用的很少,因为父盒子的高度能被内容撑高
加高度很麻烦,还要手动,并且不能适应页面的快速变化给浮动元素的父盒子设置
overflow: hidden
(该盒子BFC了)
如果父盒子中有定位的元素,一般不推荐使用该种方式清除浮动,会把超出父盒子的定位的元素隐藏掉。使用
clear: both;
- 外墙法:在浮动元素的父盒子后面添加一个
<div>
并设置.clearfix { clear: both; }
缺点:白白添加一个div
,对网页结构不好。并且浮动元素的父盒子没高度,不能设置背景颜色跟背景图片等。 - 内墙法:在浮动元素后面直接添加一个
<div>
并设置.clearfix { clear: both; }
缺点:白白添加一个div
,对网页结构不好。浮动元素的父盒子有高度,可以设置背景颜色跟背景图片等 - 直接在浮动元素的父盒子后面的盒子添加一个
.clearfix { clear: both; }
属性
缺点:有一个非常大的、致命的问题,margin失效,两个div之间,没有任何的间隙
- 外墙法:在浮动元素的父盒子后面添加一个
使用伪元素清除浮动①
给父盒子添加class="clearfix"
.clearfix:after{
content:"";
display: block;
height:0;
line-height:0;
clear: both;
visibility: hidden;
}
.clearfix{
zoom: 1; /* 为了兼容IE浏览器 */
}
推荐:使用伪元素清除浮动②
.clearfix:before,.clearfix:after {
content: "";
display: table;
}
.clearfix:after { clear: both; }
.clearfix{
*zoom:1;/*IE/7/6*/
}
overflow
的使用
overflow: visible/hidden/scroll/auto
定位(position)
静态定位(static): 元素标准流的显示方式
绝对定位(absolute)
1. 当给一个单独的元素设置绝对定位,以浏览器左上角(body)为基准设置定位的。
2. 如果父盒子没有设置定位,子盒子设置定位以浏览器左上角为基准设置定位。
3. 如果父盒子设置定位,子盒子设置定位父盒子左上角为基准设置定位。
4. 给盒子设置了绝对定位,该盒子不占位置(脱标)
5. 行内元素转化为行内块元素
6. 绝对定位的儿子,无视参考的那个盒子的padding
相对定位(relative):微调元素。做绝对定位的参考,子绝父相
1. 元素设置了相对定位后占原来的位置(没有脱标)
2. 设置相对定位以自己的位置为参照设置位置
3. 相对定位不能进行元素的模式转换
4. 子绝父相(子元素设置绝对定位,父元素设置相对定位)(子绝父绝的其他情况也是可以的)
固定定位(fixed): 将元素定在浏览器窗口,屏幕滚动也不会移动
1. 固定定位不占位置(脱标)
2. 将行内元素转化为行内块元素
3. IE6不兼容。
IE浏览器兼容问题
IE6,不支持小于12px的盒子,任何小于12px的盒子,在IE6中看都大
解决办法:将盒子的字号,设置小(小于盒子的高),比如0pxheight: 4px;
_font-size: 0px;
IE6留了一个后门,就是只要给css属性之前,加上下划线,这个属性就是IE6认识的专有属性
IE6不支持用
overflow:hidden;
来清除浮动,但支持使用overflow:hidden;
来将溢出盒子的border的东西隐藏
解决办法:在后面追加一条_zoom:1;
,_zoom:1;能够触发IE6浏览器专有的hasLayout机制。overflow: hidden;
_zoom:1;
IE6双倍
margin
的bug当出现连续浮动的元素,margin和浮动方向相同时,队首的元素,会双倍
marign
解决办法
1. 使浮动的方向和margin的方向相反
2. 使用hack(没必要,不能惯着这个IE6)
单独给队首的元素,写一个一半的_margin
IE6的3px的bug
- 当子盒子使用
margin-right
踢了父盒子时,margin-right
会多出3px - 当出现这个问题,说明你的代码不标准,因为不允许子盒子使用
margin-right
踢父盒子
- 当子盒子使用
Chapter5
标准流下的盒子(必须有明确的width)居中显示:
margin: 0 auto;
定位的盒子居中显示(重要):
.father {
position: relative;
}
.child {
width: (xxx)px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -(xxx)px;
}
标签包含规范
1. div可以包含任何标准流下的元素
2. p标签中不能包含div 和 标题标签 及列表标签。
3. 标题标签可以包含其他标签。
4. 行内元素最好不要包含其他标签。
规避脱标流
1. 网页布局过程中,能用标准流布局就用流布局。
2. 标准流不能解决用浮动
3. 浮动不能解决用定位
4. margin-left: auto; 子盒子会被挤到右边
margin-right: auto; 子盒子会被挤到左边
可以将盒子自动冲到另一边。
图片与文字垂直对齐
- 每一种inlne-block元素,都有一个默认的
vertical-align: baseline
<img>
属于行内元素,但在表现上更倾向于 inline-block - 使用
vertical-align: middle;
可以将图片与文字垂直对齐 vertical-align
与inline-block
更搭配
- 每一种inlne-block元素,都有一个默认的
CSS可见性(隐藏的三种方式):
overflow: hidden
将超出部分进行隐藏display: none;
将元素隐藏后不占位置visibility: hidden;
将元素隐藏后占原来的位置
logo优化(内容移除文字)
1. <div>
文字
</div>
设置div样式
div {
height: 0;
width: 200px;
padding-top: 100px;
overflow: hidden;
}
2. <a href="#">文字</a>
a {
display: inline-block;
width: 200px;
height: 200px;
text-indent:-9999em;
}
精灵图/雪碧图(spirit.png):减少了http请求
是一种处理网页背景图像的方式。精灵图也是一种背景图片
精灵图的使用
1. 使用fw一定要用打开的方式打开精灵图
2. 使用精灵图作为背景图片的时候,常与background-position配合使用
制作精灵图步骤:
- 新建,选择透明文档
- 右下角,样式,选择塑料样式
- 制作,另存为png格式即可
CSS进阶
Chapter1
- 鼠标样式
- cursor: pointer 鼠标变成小手
- cursor: default; 小白
- cursor : move; 移动
- cursor : text ; 文本输入
a
无所不能,里面什么都可以放- 透明
opacity会继承父元素的 opacity 属性,而RGBA设置的元素的后代元素不会继承不透明属性- opacity: 0.5; (默认值为1)
- 让盒子半透明,里面的内容也半透明
- 指定不透明度。从0.0(完全透明)到1.0(完全不透明)
- IE不兼容,使用滤镜
filter: alpha(opacity=50);
- background: rgba(0,0,0,0.5);
- 让盒子背景半透明,里面的内容不透明
- 指定不透明度。从0.0(完全透明)到1.0(完全不透明)
- opacity: 0.5; (默认值为1)
CSS学习笔记的更多相关文章
- 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:表示对象文 ...
随机推荐
- word-wrap ,word-break 和white-space 的联系
在工作中我遇到一个问题,其实功能也不复杂,就是上面有个textarea标签 ,里面输入内容,下面有个显示效果 ,有个条件就是 上面输入的什么格式(比如换行等等),下面显示的也是 什么格式.如下图: 这 ...
- static,你还敢用吗?(二)
为了压系统,昨天小组在测试环境模拟了一大批订单数据.今天上午查看记录的账单计息日志,发现了一大堆的MySqlException MySql.Data.MySqlClient.MySqlExceptio ...
- SQL Server-聚焦使用视图若干限制/建议、视图查询性能问题,你懵逼了?(二十五)
前言 上一节我们简单讲述了表表达式的4种类型,这一系列我们来讲讲使用视图的限制,简短的内容,深入的理解,Always to review the basics. 避免在视图中使用ORDER BY 上一 ...
- 微信小程序中利用时间选择器和js无计算实现定时器(将字符串或秒数转换成倒计时)
转载注明出处 改成了一个单独的js文件,并修改代码增加了通用性,点击这里查看 今天写小程序,有一个需求就是用户选择时间,然后我这边就要开始倒计时. 因为小程序的限制,所以直接选用时间选择器作为选择定时 ...
- JDBC简介
jdbc连接数据库的四个对象 DriverManager 驱动类 DriverManager.registerDriver(new com.mysql.jdbc.Driver());不建议使用 ...
- Linux实战教学笔记07:Linux系统目录结构介绍
第七节 Linux系统目录结构介绍 标签(空格分隔):Linux实战教学笔记 第1章 前言 windows目录结构 C:\windows D:\Program Files E:\你懂的\精品 F:\你 ...
- VIM教程
vim 的环境设定参数 :set nu :set nonu 就是设定与取消行号啊! :set hlsearch :set nohlsearch hlsearch 就是 ...
- 简约而不简单的Django新手图文教程
本文面向:有python基础,刚接触web框架的初学者. 环境:windows7 python3.5.1 pycharm专业版 Django 1.10版 pip3 一.Django简介 百度百 ...
- CSharpGL(13)用GLSL实现点光源(point light)和平行光源(directional light)的漫反射(diffuse reflection)
CSharpGL(13)用GLSL实现点光源(point light)和平行光源(directional light)的漫反射(diffuse reflection) 2016-08-13 由于CSh ...
- [Javascript] 爬虫 模拟新浪微博登陆
概述: 由于业务需要,要编写爬虫代码去爬去新浪微博用户的信息. 虽然在网上能找到不少信息,但由于新浪微博改版,其登陆机制进行了修改,故很多老的文章就不适合用了. 经过一番摸索,成功模拟新浪微博的登陆 ...