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. VMware克隆SUSE网卡配置

    1.配置DNS vim /etc/resolv.conf domain sitenameserver 202.98.0.682.配置网关 vim /etc/sysconfig/network/rout ...

  2. Eclipse导入Maven项目,使用server 启动报错，class 找不到，

    问题发现: 1.导入maven 项目后,用server 启动,选择项中没有这个项目 解决: 说明server 没有把该项目当成web项目,需要设置 项目右键 properties  ---- proj ...

  3. C#捕获c++异常

    摘自:http://bbs.csdn.net/topics/390665130 .net 40 中,c# 默认情况下只处理SEH的异常.不处理CSE的异常.若你要捕获这类的异常. [HandlePro ...

  4. JAVA求解线性方程组-列主元高斯消去法

    package MyMath; import java.util.Scanner; public class Gauss { /** * @列主元高斯消去法 */ static double x[]; ...

  5. CVTE实习面经

    一个月的实习都结束了,我才把这篇面经放出来...可能有记得不太清楚的地方,还请多多见谅. 第一次面试是在5月中旬. 这次面试问的主要是基础的问题吧,就是C和C++的基础问题,我记得有问到下面几个问题 ...

  6. Stack Overflow is a question and answer site

    http://stackoverflow.com/ _ Stack Overflow is a question and answer site for professional and enthus ...

  7. GPT分区磁盘上优盘安装win10的方法

    刚买的acer笔记本安装的是win8,之后硬盘安装升级到win10.今天想格式化安装win10这样自带的软件可以去除,但是nt6 hdd在win10上无法使用,本来想先安装win7再通过nt6 hdd ...

  8. HDU Game Theory

    5795 || 3032 把x个石子的堆分成非空两(i, j)或三堆(i, j, k)的操作->(sg[i] ^ sg[j])或(sg[i] ^ sg[j] ^ sg[k])是x的后继 #def ...

  9. Jquery打造的类似新浪微博@提醒功能

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. C# 特殊处理

    一.日期格式化处理 private Datetime _datetime;//定义字段 数据值都存在字段里 通过修改字段来修改属性 public string Datetime//定义属性 { get ...