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. CSS布局技巧 -- 内凹圆角

    圆角,相信每一个了解CSS属性的都知道,通过border-radius实现圆角(外凸圆角),但是如果需要实现内凹圆角怎么办呢?比如四角内凹的元素,比如如下所示这样的内凹圆角 对于这种问题,很多人的反应 ...

  2. mac地址和ip地址、子网掩码和默认网关

    MAC地址 MAC(Media Access Control或者Medium Access Control)地址,意译为媒体访问控制,或称为物理地址.硬件地址,用来定义网络设备的位置.在OSI模型中, ...

  3. VS 2010启动崩溃

    事情缘由,同事装了一个软件不能用,我说我试下吧. 好吧,先装CAD2002,再装“截取断面工具”,好家伙,还是不能用,折腾了几遍还是不行,后来干脆不倒腾了. 打开VS,发现启动不了,显示 第一反应,I ...

  4. psp工具需求分析

    PSP个人软件过程开发工具需求分析文档 a.业务需求    a.1 背景 二十一世纪是软件开发的黄金时期,有人把过去的十年称作软件高度发展的十年,不可置疑,越来越多的软件设计需求是物联网时代的趋势,越 ...

  5. S2SH简介

    struts2简介 Struts2是由WebWork基础上发展起来的,与struts1比较,选用struts2的理由是:①Struts1要求Action类继承一个抽象基类,而Struts 2 Acti ...

  6. Mysql 启动不了，问题集锦

    1. 报错信息 mysqld_safe mysqld from pid file xxx.pid ended 解决办法: 可能是pid所在目录,没有权限,赋予权限即可 2. 找不到 /tmp/mysq ...

  7. iOS原生地图开发指南续——大头针与自定义标注

    iOS原生地图开发指南续——大头针与自定义标注 出自:http://www.sxt.cn/info-6042-u-7372.html 在上一篇博客中http://my.oschina.net/u/23 ...

  8. 为什么一个类的全局变量默认以m开头？

    某天闲着无聊,突然想起来为什么大家都习惯将全局变量使用m开头,于是追根求源,查了一些资料,虽然并不是我想要的,但是也总结一下. 在stackoverflow上就有人问: Why do most var ...

  9. webkit浏览器css设置滚动条

    主要有下面7个属性: ::-webkit-scrollbar 滚动条整体部分,可以设置宽度啥的 ::-webkit-scrollbar-button 滚动条两端的按钮 ::-webkit-scroll ...

  10. 基于Chrome内核（WebKit.net）定制开发DoNet浏览器

    1.    源起 a)     定制.Net浏览器 本人是一名C#开发者,而作为C#开发者,做客户端应用中最头痛的一件事就是没有一个好的UI解决方案, WinFrom嘛,效率虽然还不错,但是做一些特殊 ...