下午有时间研究了下一直有点畏惧的css,不错还是挺简单了的,以前也接触过很多,现在系统的学习了下:
1. 首先是css的选择器和JQuery几乎一样,也可以说JQuery学Css的。
ID选择器(#),类选择器(.),dom类型选择器(type),还可以用“[ ]” 表示属性特点。
直接连用表示“and”关系如:div.firstClass 表示既是div又有firstClass Class的元素。
中间有空格表示父子关系: div .firstClass表示div下有firstClass Class的元素。
2. 盒装模型:margin和padding。 css中设置的width和height都是内容的大小,就是内边框大小。
注意外边距margin的合并情况。
3. 定位position: 默认属性是static,表示就按照原始的框输出。
relative在static基础之上按照原来位置的偏移。
absolute绝对定位,是在祖先容器中最早一个确定位置的基础之上进行绝对定位。
fixed:与绝对定位相识,不过他的相对对象是游览器框。
4. float浮动:float是在普通文本流之外的. 并且向最近的框移动。
一般页面结束的页脚需要清楚float。用Css 中clear:both清楚如:
.clear{ clear : both;}
<div class=’clear’/>将这样的div放在页脚。
分享到:
相关推荐
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
包括基础选择器、基本属性、盒模型等,适用于刚接触前端的小伙伴,大佬勿喷
html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供相关人员学习参考 html css js 知识学习资料 代码 源码 供...
本书旨在解决CSS学习过程中的难点和重点,无论是对CSS有初步了解的初学者,还是已经有一定经验的开发者,都能从中受益匪浅。 首先,书中可能涵盖的基础知识点包括: 1. CSS语法基础:如何定义选择器,理解类选择器...
这个“css初步(个人网页)”的主题旨在介绍CSS的基本概念,帮助初学者理解如何用CSS来美化网页。 首先,CSS允许我们将样式与HTML内容分离,使得网页设计更加灵活且易于维护。通过在外部CSS文件中编写样式规则,...
**CSS学习教程——5日内精通CSS** 在网页设计与开发领域,CSS(Cascading Style Sheets)层叠样式表是不可或缺的一部分。它负责定义网页内容的布局和视觉样式,使得网页设计更加美观、灵活和可维护。这个"5日精通...
5. **媒体查询**:虽然CSS3.0中的媒体查询更为强大,但CSS2.0也具有初步的媒体类型,允许根据不同设备或屏幕尺寸应用不同的样式。 6. **渐变和透明度**:CSS2.0允许使用`linear-gradient`创建简单的线性渐变,同时...
在"CSS+DIV网页编程初步"的学习中,你将了解如何创建基本的CSS规则,如何使用DIV组织内容,以及如何通过CSS实现响应式设计。这包括但不限于: - 选择器的高级用法,如伪类和伪元素。 - CSS盒模型的理解,包括边距、...
**CSS2.0中文手册**是前端开发领域中不可...CSS2.0虽然在很多方面已经被CSS3所超越,但作为基础,它仍然是理解和学习现代CSS不可或缺的一部分。熟练掌握CSS2.0的各项特性,能帮助开发者构建更稳定、兼容性更好的网页。
**CSS初步认识** CSS(Cascading Style Sheets)是一种样式表语言,用于描述HTML或XML(包括如SVG、MathML等各种XML方言)文档的呈现。它控制着网页的布局和外观,让网页的设计更加丰富多彩。 1. **CSS基础概念** ...
8. **媒体查询**:虽然媒体查询是CSS3的新特性,但CSS2.0中已经有了初步的`media`属性,允许根据设备特性(如屏幕尺寸、颜色深度等)应用不同的样式。 9. **视觉效果**:CSS2.0提供了阴影(box-shadow)、渐变...
CSS2.0还包含了媒体查询(media queries),虽然在后续版本CSS3中得到进一步发展,但其初步形式在CSS2.0中已存在。这使得我们能够根据设备特性,如屏幕分辨率和方向,应用不同的样式。 最后,CSS2.0手册中的电子...
在本项目中,"香菇街_初步仿电商页面(香菇街)_fastermkz_香菇街css_expect9k3_香菇街_" 是一个模仿电商网站界面的设计实践,旨在通过HTML和CSS技术来构建一个基本的在线购物平台的前端部分。这个设计由用户...
4. **多列布局(multicol)**:CSS2提供了多列布局的初步支持,允许元素内容自动分成多列展示。 5. **边框和背景**:CSS2增强了边框和背景的处理能力,如圆角边框、边框图像以及复杂的背景定位和重复。 6. **字体与...
CSS2引入了媒体查询(@media),允许样式根据设备的特定特性(如屏幕宽度)进行响应式设计,虽然不及CSS3的媒体查询强大,但仍是实现初步响应式设计的基础。 **4. CSS2的兼容性** CSS2在现代浏览器中得到了广泛支持...
【标题】"MZnauka-css3_reason71s_css3english_css_zip_" 指的是一个关于CSS3学习资源的压缩包,其中包含了“reason71s”、“css3english”以及“css”等关键词,暗示这可能是一个关于CSS3技术、教程或者示例的集合...
6. **交互与动画**:初步了解CSS的过渡效果(transitions)和动画(keyframes),为网页添加动态效果。 7. **网页优化**:学习如何减少HTTP请求,合理组织CSS代码,使用外部链接或内联样式,提高网页加载速度。 通过...
总的来说,CSS2.0DOC文档详尽地介绍了这一版本CSS的核心特性和用法,是学习和掌握CSS2.0不可或缺的资源。通过深入理解和实践,我们可以有效地利用CSS2.0来构建美观、功能丰富的网页。而为了更好地应对现代网页设计的...