CSS入门介绍
一.背景
这里将陆续介绍前端CSS中相关知识,先介绍CSS2.1,后续会介绍CSS3的相关属性,通过该系列的文章,希望能给准备转战前端的人员一些帮助,同时也帮助自己梳理知识,文章中如有错误,欢迎指出。
下面是CSS2.1第一个阶段的知识框图,后面会陆续更新该系列后续文章。
二.整体介绍
(一).基础介绍
1. 七个基本的入门属性首先要记住,颜色:color,背景颜色:background-color,字体大小:font-size,加粗:font-weight:bold,倾斜:font-style:italic, 文字居中:text-align:center,
下划线:text-decoration:underline。
2. 相对路径的写法: ../../ a/b/
3. 七个基本选择器:id选择器、标签选择器、类选择器、交集选择器、并集选择器、后代选择器、通配符。
4. 四个CSS3选择器:子代选择器、序选择器、相邻选择器、兄弟选择器。
5. 行高(line-height):行高的作用范围、单行文本竖直居中、多行文本竖直居中。
6. font属性:等价于(font-size, line-height, font-family),比例写法,font-family的规则和特殊写法。
7. a标签:伪类(link、visited、hover、active)、a标签的美化(常规写法和简介写法)。
8. background属性:background-color、background-image、background-repeat、background-attachment、background-position;颜色的三种表示方法。
(二).继承性和层叠性
1. 继承性:作用范围。
2. 权重的计算规则:①如果标签被选中,比较权重,id选择器>类选择器>标签选择器,如果权重相同,以后面写的为主。②如果标签没被选中,权重为0,就近原则,哪个离目标标签近,以哪个为主。
3. !important的性质。
(三).盒模型
1. 包含:width、height、padding、border、margin。
2. padding的两种写法。
3. border的三种拆分形式。
4. margin在标准流中的塌陷现象以及利用“margin:0 auto”特性居中的条件。
5. 浏览器兼容性。
(四).标准文档流
1. 块级元素和行内元素各自的特性以及分别包括什么。
2. 相互转换的方法: 块→行(display:inline)、行→块(display:block)。
3. 引出脱离标准文档流的三种方法:浮动、绝对定位、固定定位。
(五).浮动
1. 浮动(float)的性质:脱标、相互依靠、字围效果。
2. 清除浮动的五种方法以及各自的优缺点。
3. 引出脱离标准文档流的三种方法:浮动、绝对定位、固定定位。
(六).定位
1. 相对定位:含义、性质(不脱标,老家留坑,形影分离)、作用(微调位置、字绝父相)。
2. 绝对定位:性质(脱标、居中的用法)、参考点(两种情况)。
3. 固定定位:性质(脱标)、作用。
4. z-index:性质、从父现象。
后续文章,会详细介绍CSS2.1基础入门的六个板块。
CSS入门介绍的更多相关文章
- CSS入门介绍(二)CSS选择器
css选择器 什么是选择器? 选择器是你构造好网页的结构,需要给这些结构赋予样式,这时候就需要用到选择器,利用选择器将元素与样式一一对应:两者的对应关系可以是一对一,一对多,多对一. 选择器的分类: ...
- CSS入门介绍(一)
css 层叠样式表(英文名:Cascading Style Sheets),主要用于美化网页 1.css的表现形式 1.1 行内样式(内嵌样式) 写在标签内的样式,写在标签的开始部分的内部,style ...
- html与css入门经典视频教程 千锋说要这样学
PHP初学者看过来,老师带来的PHP入门经典视频教程,带你轻松入门,学习PHP就是这么简单. 很多人不理解为什么学习PHP要先学习HTML基础和CSS,其实PHP作为服务器的脚本语言,在开发过程中用于 ...
- [Python爬虫] 在Windows下安装PhantomJS和CasperJS及入门介绍(上)
最近在使用Python爬取网页内容时,总是遇到JS临时加载.动态获取网页信息的困难.例如爬取CSDN下载资源评论.搜狐图片中的“原图”等,此时尝试学习Phantomjs和CasperJS来解决这个问题 ...
- [Python爬虫] scrapy爬虫系列 <一>.安装及入门介绍
前面介绍了很多Selenium基于自动测试的Python爬虫程序,主要利用它的xpath语句,通过分析网页DOM树结构进行爬取内容,同时可以结合Phantomjs模拟浏览器进行鼠标或键盘操作.但是,更 ...
- CSS入门教程——定位(positon)
CSS入门教程——定位(positon) CSS定位在网页布局中是起着决定性作用. 定位 CSS的定位功能是很强大的,利用它你可以做出各种各样的网页布局.本节就介绍一些CSS常用的定位语句. 1. ...
- React入门介绍(1)-ReactDOM.render()等基础
React入门介绍-ReactDOM.render()等基础 首先,React是一个用于构建用户界面的Javascript库,但Peact并不是一套完整的MVC或MVVM的框架,它仅涵盖V-view视 ...
- 第五篇 CSS入门 明白 三种嵌套形式,三种常用控制器
CSS入门 css是 层叠式样式表 css的作用是什么呢?举个抽象的例子啊,HTML是人,CSS则是衣服... css给html穿上衣服,有三种形式: 内嵌.内联.外联. 这三种形式,优先级为 ...
- CSS入门指南-4:页面布局
这是<CSS设计指南>的读书笔记,用于加深学习效果. display 属性 display是 CSS 中最重要的用于控制布局的属性.每个元素都有一个默认的 display 值.对于大多数元 ...
随机推荐
- FileFilter与FilenameFilter实例
下面的例子中我们创建了一个FileFilter类,此类根据文件名的扩展名是否为.txt来筛选文件.创建FileFilter实例之后需要将此实例作为参数传给File的listFiles(fileFilt ...
- Hadoop集群搭建的密钥配置SSH实现机制
- docker rancher 体验 (未完待续.....)
docker rancher 体验 官方 githubhttps://github.com/rancher/rancher 环境说明: 10.6.0.14010.6.0.18710.6.0.188 修 ...
- 可能是最简单的方式:利用Eclipse创建基于Maven的Web项目
1. 新建一个maven项目 2.在弹出框中选择创建一个简单项目 3. 然后输入参数,需要注意的是,在packagin中,选择war,web项目应该选择war 4. 点击finish后,基本项目结构就 ...
- HDU 5176 The Experience of Love 带权并查集
The Experience of Love Time Limit: 4000/2000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/O ...
- hibernate---关联关系的 crud_cascade_fetch
CRUD怎么写?? 存user信息, 自动存group信息 user.java package com.bjsxt.hibernate; import javax.persistence.Cascad ...
- windows矢量字体点阵数据的提取(转)
源:windows矢量字体点阵数据的提取 问题参考:windows api 获取字库点阵的问题 1.提取原理 在windows系统当中提取矢量字体的字模有很多方法,下面介绍一种利用GetGlyphOu ...
- iBATIS 3 试用手记 - The FUTURE - ITeye技术网站
body { font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI ...
- Linux下Nginx、PHP、MySQL、Redis开机自启动设置
一.Nginx开机启动设置 1.在/etc/init.d/目录下创建脚本 vi /etc/init.d/nginx 2.更改脚本权限 chmod 775 /etc/init.d/nginx 3.编写脚 ...
- [iOS]使用signal让app能够在从容崩溃
前言 虽然大家都不愿意看到程序崩溃,但可能崩溃是每个应用必须面对的现实,既然崩溃已经发生,无法阻挡了,那我们就让它崩也崩得淡定点吧. iOS SDK中提供了一个现成的函数 NSSetUncaughtE ...