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. win7 64的系统安装。net4.0总是提示安装未成功

    主要原因是Windows update的临时文件损坏,建议重命名该文件夹. 1. 开始——运行——cmd——键入net stop WuAuServ回车(停止windows update服务): 2. ...

  2. vim c++补全

    弄了个vim对c++的补全,主要参考自: http://vim.wikia.com/wiki/C%2B%2B_code_completion   首先确定vim编辑.cc或者.cpp文件时当前自动补全 ...

  3. XAMARIN +VS2015 ANDROID 开发禁止屏幕自动转动 Portrait,Nosensor

    网上有很多java的写法,但是放在C#中都无法使用,其实有时候还是安下心来认真的去看官网文档比在百度或者google来的快的多 this.RequestedOrientation = Android. ...

  4. Dancing Links & Algorithm X

    1 参考链接 http://www.cnblogs.com/steady/archive/2011/03/15/1984791.html#undefined http://en.wikipedia.o ...

  5. 51NOD算法马拉松11 B君的竞技场

    传送门 这题我在比赛的时候竟然没有想出来,真是-- 这道题我们可以想一想怎么搞定获胜的概率p. 我们发现再怎么这个p都是搞不了的.所以我们可以积一下分,然后就可以不用去管p了.我们要做的就是求出一个关 ...

  6. Android 百度云媒体 等播放器播放4:3等多种比例的视频 大小配置的问题

    视频播放宽度大小各不一样,就需要根据视频的尺寸去适应屏幕的宽度和高度进行缩放. 思路是在onPrepared方法中,或者切换屏幕后,获取video的高度和宽度.以及屏幕展示区域的高度的宽度.并对比二者 ...

  7. MPI之求和

    // MPI1.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include "mpi.h" #include &l ...

  8. 一个字体引发的bug

    delphi 7 中默认字体样式为‘MS Sans Serif’,一般情况下子级控件会继承父级一些属性,其中包括字体(包括字体大小,字体样式,颜色等)属性.如果动态创建控件且需要修改字体颜色或者大小时 ...

  9. 在wifi状态下没有数据线，链接手机调试

    因为不知道是手机的问题还是数据线的问题,经常链接不上adb 所以找了一下wifi情况下,无线跟eclipse链接调试 第一步,首先你需要在你的手机上安装一个终端模拟器工具 第二步,在终端里输入(需要r ...

  10. android wifi SWOL低功耗模式

    1 睡眠模式RX代码流程 ar_wal_rx_patch.c::patch_rx_process_recv_status//调用rx_ctxt->data_ind_handler -> d ...