CSS是层叠式样式表，主要用来控制页面的样式。

一、CSS概述

应用CSS：

1、外部样式表，CSS写在一个单独的.CSS文件中，在head里加<link rel="stylesheet" tpye="text/css" href="路径及名称">

2、内部样式表，写在html的head的style标签中

3、内联样式表，直接写具体标签上，<h1 style="color #FFF">ddd</h1>

CSS语法：

选择器{

　　属性1：值1；

　　属性2：值2；

　　......

}

二、CSS选中符

css.doyoe.com css手册

2.1、元素选择符

1、*　　 　　选择页面中所有东西；

2、E　　 　  类型选择符，a{....}　　选择所有a；

3、E#id　　  id选择符，id即属性，可以为某一标签设置id　　

　　　　　　 例如：<li　　id="table1">hehe</li>　　则选择id为table1的所有元素为：#table1{}或li#table1{}　　

　　　　　　 可以为某一个标签起名字；

4、E.class　 类选择符，可以为多个标签起同一个名字　　

　　　　　　 例如：<a　　class="bb">M</a>　　<li　　class="bb">Q</bb>　　则选择类为bb的所有元素为：.bb{}　　

　　　　　　 此外，class="aa bb"可以有多个

2.2、类选择符

1、E　F　　  选择E里所F元素

　　　　　　 例如：<li>白<a href="">白</a></ls>　　则li　a{}为选择所有li里的a

2、E>F　　　子选择符

　　　　　　 <li>

　　　　　　　　白

　　　　　　　　<a href="">白</a>　　　　<-----子

　　　　　　　　<div>

　　　　　　　　　　<a href="">白</a>　　　　<-----孙子

　　　　　　　　</div>

　　　　　　 </li>

 3、E+F　　相邻标签

　　　　　   例如：#first_a + a{}　　id为first_a后面第一个a

 4、E~F　　兄弟选择符

　　　　　   例如：#first_a ~ a{}　　id为first_a后面所有a

2.3、伪类选择符

1、E:hover{}　　当鼠标放置在标签上的样式

2、E:active{}　　当点击时的样式

3、E:visited{}　  点击之后的样式

注：后面样式会覆盖掉前面样式

三、CSS常用属性

3.1、字体

color

font-weight　　粗度（bold=700，bolder）

font-size　　　大小（40px）

font-family　　字体（操作系统必须有才能生效）

line-height　　行高（50em，em是当前字体的大小）

3.2、背景：background

background-color

background-image　　url（image/123.gif）　<----会复制填充

background-repeat　　no-repeat（不重复）、repeat-x（横向重复）、repeat-y（纵向重复）、repeat（都重复）

background-position　 背景图片位置：left、center...

3.3、显示：display

none　　不显示一个元素

block　　以块级方式显示（之前讲过标签分为块级和内联两种，块级独占一行）

inline　　以内联方式显示

inline-block　　以内联块级方式显示（内联标签不能设置宽高，用inlune-block可以设置宽高）

四、盒模型

　　每个标签都是一个盒子，都是由边框、内边距和外边距组成。这里的内边距指内容和边距的距离；外边距指边框和外部内容的距离。下图中1000X662为内容，padding为内边距、border为边框、margin为外边距。此外，每个边框分为上下左右四个内边距、边框、外边距，可以分别设置。

4.1、边框：border

border-width

border-style

boder-color

4.2、内边距：padding

padding-top

padding-right

padding-bottom

padding-left

例子：　padding:5px　　四个方向都是5px

　　　　padding:5px 4px　　上下5，左右4

　　　　padding:5px 4px 3px　　上，左右，下　　

4.3、外边距：margin（和上面padding类似）

特例：　margin:0 auto　　上下是0，左右平局分配，

4.4、宽高的计算方式：

可以使用box-sizing设置，但是宽高的表示有两种：

① content-box：显示宽度=width+左右内边距+左右边框

② border-box：显示宽度=width

其中第二种比较常用

五、定位

定位主要有4种：

position：absolute；//绝对定位

position：relative；//相对定位

position：fixed；//固定定位

position：static；//正常定位

需要结合命令：top、right、bottom、left

① 绝对定位：

1、脱离原文档流，原来的位置被后面的位置占用，内边距收缩；（相当于上移一层，后面的元素占据其原来下面的位置）；

2、可以使用top\left\bottom\right分别设置距离页面主体上边、左边、下边、右边的距离；

② 相对定位：

1、脱离源文档流、原来位置会保留，内边距不收缩

2、可以使用top\left\bottom\right分别............原来位置...................................................；

③ 固定定位：

1、同①

2、...............................................................窗口左上角................................................；

3、在窗口位置固定，不会随滑动条移动

->　绝对变相对（相对于上级）

position：absolute是绝对定位，相对于窗口定位。如果这个元素的上级有absolute、relative、fixed定位的元素，那么这个元素会相对于这个上级定位而定位。

六、浮动：float

① 脱离原文档流，位置被后面元素占用；

② 可以设置为向左、向右浮动（left/right）

③ 向某一方向浮动一直遇到上级边框或者上一个浮动的元素为止

包含浮动元素：当一个元素中所有元素都浮动起来之后，因为所有元素都脱离了原文档流，所以外层元素会收缩；

清除浮动：可以使用clear来清除左右浮动对这个标签的影响【clear:left;清除左浮动对其影响，clear:right;清除右浮动对其影响，clear:both;清除浮动对其影响】

浮动一般用来制作浮动布局。

七、浮动布局

7.1、页头、主体、页脚

　　　　　 |

　　　  /     |     \

左边栏　 主体　右边栏

7.2、一般做法是利用浮动把大致框架做出来

　　双飞翼布局（淘宝前端）：浏览器解析页面时是从上到下解析，设计的重要思想是重要的东西要放在前面解析。淘宝把页面分为三栏：左栏、主体、右栏，主体是最重要的内容，要放在前面。双飞翼布局采用的手法是margin-left=负值；主体里多一层div以防止被盖住（这一点也是他的缺点）。

八、使用HTML+CSS做静态页

8.1、做目录

|_css

|_img

|_index.html

8.2、基本结构

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="gbk" />

     <title>京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！</title>

     <link rel="stylesheet" type="text/css" href="css/style.css">

 </head>

 <body>

 </body>

 </html>

在style.css里写基本样式（由于很多标签自带样式，我们需要先写css覆盖掉），这种一般可以直接从网上下载一个别人写的，然后删减修改，一般叫reset.css

九、拾遗

　　一般想copy一个网页可以审查元素，查看对应元素及对应CSS（不断添加、修改CSS达到自己想要的效果）；

　　列表用的较多；

　　用浮动，下面元素用clear:both;清除所有影响；

　　字体垂直居中：行高和字体设置一样高就居中；

　　设置显示区域，将图片设置为背景图，能实现显示部分图片；

系列文章：

[php入门] 1、从安装开发环境环境到（庄B）做个炫酷的登陆应用

[php入门] 2、基础核心语法大纲

[php入门] 3、WAMP中的集成MySQL相关基础操作

[php入门] 4、HTML基础入门一篇概览

PS：如果您觉得还不错，点个赞，让更多人受益~

@beautifulzzzz 2016-07-23 continue~  
e-mail：beautifulzzzz@qq.com 
sina：http://weibo.com/beautifulzzzz?is_all=1

[php入门] 5、初学CSS从中记下的一些基础点（For小白）的更多相关文章

  1. css学习笔记 --初学 css代码风格、布局误区

    初学css,记录下初学者需要注意的事项. 一.css 代码风格 1.css 命名语义化. 如类名: main   主体   container 内容 footer    站底 right.center ...

  2. 移动H5开发入门知识，CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  3. H5移动端开发入门知识以及CSS的单位汇总与用法

    说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...

  4. ECMAScript6 入门教程 初学记录let命令 块级作用域

    一.基本语法-let命令 (1)ES6新增了let命令,用来声明变量.所声明的变量,只在let命令所在的代码块内有效. 循环的计数器,就很合适使用let命令.计数器i只在for循环体内有效,在循环体外 ...

  5. css从中挖去一个圆

    始终居中: width: 300px; position: fixed; /*在可视区域的上下左右居中*/ top: calc(50vh - 200px); left: calc(50vw - 150 ...

  6. 初学css个人笔记

    1.css类选择器中的类名的第一个字符不能是数字,无法再Mozilla或Firefox中起作用. 2.css中id选择器中的属性只能在每个html文档中出现一次. 3.css样式表中不需要在属性值与单 ...

  7. gulp入门-压缩js/css文件（windows）

    类似于grunt,都是基于Node.js的前端构建工具.不过gulp压缩效率更高. 工具/原料 nodejs/npm 方法/步骤 首先要确保pc上装有node,然后在global环境和项目文件中都in ...

  8. 前端入门系列之CSS

    CSS (Cascading Style Sheets) 是用来样式化和排版你的网页的 —— 例如更改网页内容的字体.颜色.大小和间距,将内容分割成多列或者加入动画以及别的装饰型效果. CSS是什么 ...

  9. 初学css 行内元素与块级元素

    行内元素与块级元素直观上的区别 1.行内元素会在一条直线上排列,都是同一行的,水平方向排列块级元素各占据一行,垂直方向排列.块级元素从新行开始结束接着一个断行. 2.块级元素可以包含行内元素和块级元素 ...

随机推荐

  1. vios 多 vlan设置

    [转 ]测试后修正 成功让IVM跑了多个VLAN,添加一块可携带多个vlanID的网卡,Nativevlan是改造的折中方法,如果不喜欢这种方法,附---删除多vlan网卡方法,一般情况下,lpar的 ...

  2. 16条Web2.0法则的编程思想

    1.在你开始之前,先定一个简单的目标.无论你是一个Web 2.0应用的创建者还是用户,请清晰的构思你的目标.就像“我需要保存一个书签”或者“我准 备帮助人们创建可编辑的.共享的页面”这样的目标,让你保 ...

  3. hdoj 2034 人见人爱A-B

    Problem Description 参加过上个月月赛的同学一定还记得其中的一个最简单的题目,就是{A}+{B},那个题目求的是两个集合的并集,今天我们这个A-B求的是两个集合的差,就是做集合的减法 ...

  4. div 指令

    div 指令 div 是除法指令,后面跟的是除数,被除数默认在 ax, 或者 dx.ax 组成的存储单元中. 除数可以有 8 位和 16 位两种,存储于一个 reg 或内存单元中,也就是说不可以 di ...

  5. 【jquery】flexiGrid新增功能的方式

    到目前为止,我用过的jquery表格插件只有jqGrid和flexiGrid.今天,只说后者. 关于参数配置,使用方法,博客园文章很多. 原生的flexiGrid架包不大,内容可以扩展,比如在每行数据 ...

  6. HttpURLConnection 文件上传限制

    一.      问题 最近在Android程序里上传向.Net服务器上传大文件的时候,发现了一个问题.当上传大文件的时候会爆出OutOfMemoryError,上传小文件则没有这种情况. 二.     ...

  7. CAD2012安装错误

    安装CAD2012总是会出现各种错误,不能安装,特别是.NET Framework Runtime 4.0安装错误. 单独安装dotNetFx40_Full_x86_x64.exe会提示更高级的版本已 ...

  8. 学习ES6--data2

    变量的解构: let [a, b, c] = [1, 2, 3] 等号左边的值等于等号右边的值,一一对应.假如右边没有相对应的值,如 let [a, b, c] = [1, 2, ] 这时候,c = ...

  9. 高等微积分及其应用 nicholas.pdf——下载地址

    http://pan.baidu.com/share/link?shareid=426414429&uk=3977204074 这本书在网络上很少有了,本人是在群里下过来整理成一个文档了,由n ...

  10. <转>exe & dll自我更新

    exe & dll自我更新 分类: c/c++ 2008-10-16 22:07 756人阅读 评论(1) 收藏 举报 exedlldelayapi游戏 exe与dll的自我更新     在改 ...