随笔分类 - CSS
摘要：字体图标 图片是有诸多优点的，但是缺点很明显，比如图片不但增加了总文件的大小，还增加了很多额外的"http请求"，这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”，因为图片放大和缩小会失真。 我们后面会学习移动端响应式，很多情况下希望我们的图标是可以缩放的。此时，一个非常重要的技术出
阅读全文
摘要：精灵技术产生的背景 图所示为网页的请求原理图，当用户访问一个网站时，需要向服务器发送请求，网页上的每张图像都要经过一次请求才能展现给用户。 然而，一个网页中往往会应用很多小的背景图像作为修饰，当网页中的图像过多时，服务器就会频繁地接受和发送请求，这将大大降低页面的加载速度。为了有效地减少服务器接受和
阅读全文
摘要：溢出的文字隐藏 word-break:自动换行 normal 使用浏览器默认的换行规则。 break-all 允许在单词内换行。 keep-all 只能在半角空格或连字符处换行。 主要处理英文单词 white-space white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示
阅读全文
摘要：元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。 他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩
阅读全文
摘要：定位(position) 定位有两个含义。 1 Positioned Layout Modulue 提供元素定位与层叠的相关功能，是CSS定位布局的一个核心模块。 2 CSS定位属性 知识点 1）document-tree 2）normal-flow 普通流：自然顺序，从上至下，从左至右。 3）co
阅读全文
摘要：知识点： 1.一般网页不用纯黑，用淡灰色 3c3c3c 2.text-align: center; /* 文字水平居中 */ 3.font-weight: normal; /* 清除加粗效果 */ font-style: normal; /* 清除倾斜效果 */ 4.伪类选择器 ××：hover 鼠
阅读全文
摘要：浮动(float) 1.普通流(normal flow) 这个单词很多人翻译为 文档流 ， 字面翻译 普通流 或者标准流都可以。 前面我们说过，网页布局的核心，就是用CSS来摆放盒子位置。如何把盒子摆放到合适的位置？ CSS的定位机制有3种：普通流（标准流）、浮动和定位。 html语言当中另外一个相
阅读全文
摘要：其实，CSS就三个大模块： 盒子模型 、 浮动 、 定位，其余的都是细节。这三部分，无论如何也要学的非常精通。 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容、内边距（padding）、边框（border）和外边距（margin）组成。
阅读全文
摘要：文本的装饰 text-decoration 通常我们用于给链接修改装饰效果 使用技巧：在一行内的盒子内，我们设定行高等于盒子的高度，就可以使文字垂直居中。
阅读全文
摘要：层叠 继承 优先级 是我们学习CSS 必须掌握的三个特性。 CSS层叠性 所谓层叠性是指多种CSS样式的叠加。 是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉 比如先给某个标签指定了内部文字颜色为红色，接着又指定了颜色为蓝色，
阅读全文
摘要：CSS背景 CSS 可以添加背景颜色和背景图片，以及进行图片设置。 1 background-color 背景颜色 语法:background-color:颜色值|transparent； 补充： 颜色值：颜色名|rgb|十六进制颜色值 transparent：全透明 背景区包括：内容，内边距，边框
阅读全文
摘要：项目准备 项目名称：京东商城 项目描述：京东首页公共部分的头部和尾部制作，京东首页中间部分。 设计目标 保证浏览器 ie7及以上, 火狐, 360, safari，chrome等。谁让我再测ie6，就跟谁急。。 熟悉CSS+DIV布局，页面的搭建工作 了解常用电商类网站的布局模式 为后期京东移动端做
阅读全文
摘要：CSS样式命名规则 常用样式命名方式 id和class id不要滥用，谨慎使用 适当使用class 空格规范 【强制】 选择器 与 { 之间必须包含空格。 示例： .selector { } 【强制】 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。 示例： font-
阅读全文
摘要：非洲黑人： 皮肤内黑色素含量高，以吸收阳光中的紫外线，保护皮肤内部结构免遭损害，头发象羊毛一样卷曲，使每根卷发周围都有许多空隙，空隙充满空气，卷发有隔热作用。 欧洲白人： 生活寒带或着是说常年温度较低的地缘,加上年日照时间少，身体的黑色素沉淀比较少``所以出现皮肤、发色、瞳晕都呈现浅色 最重要的总结
阅读全文
摘要：CSS可以写到那个位置？ 是不是一定写到html文件里面呢？ 行内式（内联样式） 内联样式，又有人称行内样式、行间样式、内嵌样式。是通过标签的style属性来设置元素的样式，其基本语法格式如下： <标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名
阅读全文
摘要：1 line-height 行间距 语法：line-height:长度值|百分比； line-height属性用于设置行间距，就是行与行之间的距离（一行文字的高度），即字符的垂直间距，一般称为行高。 line-height常用的属性值单位有三种，分别为像素px，相对值em和百分比%，实际工作中使用最
阅读全文
摘要：要想将CSS样式应用于特定的HTML元素，首先需要找到该目标元素。 在CSS中，执行这一任务的样式规则部分被称为选择器（选择符）。 要把上图的小黄人分为2组，最快的方法怎办？ 很多， 比如 一只眼睛的一组，剩下的一组 这就用到基础选择器组： 基本选择器 1.标签选择器（元素选择器） 标签选择器是指用
阅读全文
摘要：1 color 字体颜色 定义元素内文字颜色。 语法：color:颜色名|十六进制|RGB color属性用于定义文本的颜色，其取值方式有如下3种： 1）预定义的颜色值，如red，green，blue等。 2）十六进制，如#FF0000，#FF6600，#29D794等。实际工作中，十六进制是最常用
阅读全文
摘要：CSS的发展历程 从HTML被发明开始，样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成长，为了满足页面设计者的要求，HTML添加了很多显示功能。但是随着这些功能的增加，HTML变的越来越杂乱，而且HTML页面也
阅读全文
摘要：css reset 自己挨个清除很麻烦 可以使用网上一些css库——css reset 把模板复制到css文件最上方，其他的样式我们自己编写来覆盖它们 但是这个也有一些弊端，会把一些本来需要的样式给清除了，比如h标签，本来是分级别的，但是使用css reset后，所有都变得一样了 normalize
阅读全文
浙公网安备 33010602011771号