CSS概要
|
laiqun@msn.cn
|
Contents
1. css的引入
使用style属性
<div style="background:#ff0000"> <div>在head标签中加入style标签
<html><head><style>
.main{
background:#ff0000;
}
</style></head><body><div class="main"></div></body></html>在head标签中使用link标签引入外部的css文件
<html><head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" ></head><body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样！</p></body>/html>2. css的选择器及效果图
- CSS 元素选择器
- CSS 选择器分组
- CSS 类选择器详解
- CSS ID 选择器详解
- CSS 属性选择器详解
- CSS 后代选择器
- CSS 子元素选择器
- CSS 相邻兄弟选择器
- CSS 伪类
- CSS 伪元素
参照：w3school
3. css 盒模型
设置了width 和height属性后。默认：width和height只与content（内容）有关。
设置了box-sizing:border-box后，我们设置的width和height，不再只是content的宽度高度，而是content的宽度高度+padding（内边距）+border（边框）的和。
4. css 浮动
4.1. 浮动的作用：
- 左浮动，让出右边的空间，且让出的右边的空间，可以给给其他元素占；
- 右浮动，让出左边的空间，且让出的左边的空间，可以给给其他元素占。
4.2. 浮动的影响：
如果未设置宽度，则浮动元素的宽度随内容增长而增长。而不是默认的占父元素的100%
示例：第一个div元素未使用浮动，未设置宽度，默认占父元素的100%；第二个div使用了浮动，不设置宽度的话，默认宽度为内容所占的宽度。
浮动会会清除后面元素的新起一行的效果，紧跟其后的块元素不会新起一行
示例：
如何清楚浮动造成的紧随其后的元素无法新起一行的问题？方法：清除浮动
5. css 定位
5.1. static
默认的定位方式。特点：从左往右，从上往下。
5.2. fixed
相对与左上角定位。特定：不随鼠标移动而变化，表现为一直跟随的广告，一直跟随的导航条等。
5.3. relative
特点：原先位置保留，相对与原先位置定位。
- 如果对应的块元素没有设置宽度，则宽度为内部内容的宽度
- 原来的位置保留，是相对于它自己以前位置的偏移 top left right bottom
一旦设置了 就有了bottom top left right 属性以及z-index属性
举例：
5.4. absolute
特点：寻找其祖先元素第一个已经定位的元素（fixed relative absolute），相对它为原点进行定位。
1. 如果对应的块元素没有设置宽度，则宽度为内部内容的宽度
2. 原来的位置不保留。寻找其祖先元素中已经定位的（定位方式为fixed relative absolute中的任意一种）的元素。以它的为参照点进行定位
3. 一旦设置了 就有了bottom top left right 属性以及z-index属性
CSS概要的更多相关文章
- Css概要与选择器，刻度单位
目录 一.CSS3概要 1.1.特点 1.2.效果演示 1.3.帮助文档与学习 二.选择器 1.1.基础的选择器 1.2.组合选择器 1.3.属性选择器 1.4.伪类 1.5.伪元素 三.特殊性(优先 ...
- web前端基础——初识CSS
1 CSS概要 CSS(Cascading Style Sheets)称为层叠样式表,用于美化页面(单纯HTML写的页面只是网页框架和内容的组合,相当于赤裸的人,而CSS则是给赤裸的人穿上华丽的外衣) ...
- CSS 学习手册
目录 CSS 简介 1.CSS 简介 CSS 概述 层叠次序 2.CSS 基础语法 CSS 语法 值的不同写法和单位 记得写引号 多重声明: 空格和大小写 3.CSS 高级语法 选择器的分组 继承及其 ...
- Bootstrap01
Bootstrap01内容概要 一.使用Bootstrap的步骤 1.下载Bootstrap类库,包含三个部分,fonts,css,Bootstrap 2.导入项目中,在头部引入JQ,css和Boot ...
- Matplotlib数据可视化（3）：文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS布局相关概要
一.文档流 运用css布局首先要具备一些概念上的知识,文档流的概念充斥着布局的整个过程.浏览器渲染页面是有先后顺序的,其顺序是至上而下,根据HTML的文档结构进行渲染. 二.div+css 耳熟能详的 ...
- 前端MVC学习总结（一）——MVC概要与angular概要、模板与数据绑定
一.前端MVC概要 1.1.库与框架的区别 框架是一个软件的半成品,在全局范围内给了大的约束.库是工具,在单点上给我们提供功能.框架是依赖库的.AngularJS是框架而jQuery则是库. 1.2. ...
- HTML5 学习总结（一）——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- CSS3与页面布局学习总结（一）——概要、选择器、特殊性与刻度单位
web前端开发者最最注的内容是三个:HTML.CSS与JavaScript,他们分别在不同方面发挥自己的作用,HTML实现页面结构,CSS完成页面的表现与风格,JavaScript实现一些客户端的功能 ...
随机推荐
- 分布式版本控制系统Git-----8.fst-forward与no fast foward
当前分支合并到另一分支时,如果没有分歧解决,就会直接移动文件指针.这个过程叫做fastforward. 举例来说,开发一直在master分支进行,但忽然有一个新的想法,于是新建了一个develop的分 ...
- hdu1012
#include<iostream>#include<stdio.h> using namespace std; int jiechen(int n){ int i; ...
- 第九十一节，html5+css3pc端固定布局，完成首页
html5+css3pc端固定布局,完成首页 此时我们的首页就完成了 首页效果 其他页面我就不做了,原理相同,做其他页面时将头尾css分离调用即可 大纲算法 我们看看大纲算法比较清晰,说明符合规则 h ...
- iOS开发极光推送显示 开发证书没有通过验证 是否重新上传证书？解决方法
1.证书密码错误 2证书环境不匹 3导证书时因手误把私钥导出来了,而不是证书 1.当前上传的p12证书密码输入有误: 2. 证书导出的时候展开了证书,把个人私钥导了出来,导证书的时候请不要展开证书: ...
- PAT 团体程序设计天梯赛-练习集 L1-019. 谁先倒
给出甲.乙两人的酒量(最多能喝多少杯不倒)和划拳记录,请你判断两个人谁先倒. 输入格式: 输入第一行先后给出甲.乙两人的酒量(不超过100的非负整数),以空格分隔.下一行给出一个正整数N(<=1 ...
- .parents() 与 .parent()对比
今天使用jQuery时候需要用到parents()方法,css()方法的使用 现在只是知道可以取到父级DOM节点,研究是否可以通过选取class名或者id名进行选取. 取到父级DOM节点 $(e.sr ...
- Hihocoder 2月29日
时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定两个日期,计算这两个日期之间有多少个2月29日(包括起始日期). 只有闰年有2月29日,满足以下一个条件的年份为闰年 ...
- [kuangbin带你飞]专题四 最短路练习 POJ 2253 Frogger
求第一个点到第二个点的所有通路上最长的边 dijkstra的变形 每次松弛的是每条边通路上的的最长的边 WA了好几次是因为用了%lf 改成%f就过了…… /* ******************** ...
- hdu 2425 Hiking Trip (bfs+优先队列)
Problem Description Hiking in the mountains is seldom an easy task for most people, as it is extreme ...
- 第二次冲刺spring会议（第二次会议）
[例会时间]2014/5/5 21:15 [例会地点]9#446 [例会形式]轮流发言 [例会主持]马翔 [例会记录]兰梦 小组成员:兰梦 ,马翔,李金吉,赵天,胡佳奇 界面的一些修改如下