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. cv_prj2

    Computer Vision Project 2 – Harris Corner Detector 姓名: 王兴路 学号: 3140102282 指导老师: 宋明黎 2016-12-16 19:30 ...

  2. exe文件放在其他位置

    set PATH=%PATH%;%UGII_ROOT_DIR%call "E:\ZY\exe\uds_rename_parts_mohao.exe"E:\ZY\exe\uds_re ...

  3. vs2015 附加到进程找不到w3wp.exe

    vs2015 附加到进程找不到w3wp.exe 解决办法: 浏览器打开你访问的IIS地址后就出现了~!!!!!!!!!

  4. freeCodeCamp:Where do I belong

    我身在何处? 先给数组排序,然后找到指定的值在数组的位置,最后返回位置对应的索引. 举例:where([1,2,3,4], 1.5) 应该返回 1.因为1.5插入到数组[1,2,3,4]后变成[1,1 ...

  5. Rails中的content_tag与concat用法，可以连接任意html元素

    想输出如下html <% if user.present? %> <li> <a href="<%= user_info_url(user.id) %&g ...

  6. Python 第三天 文件操作(2)

    文件操作 操作文件时,一般需要经历如下步骤: 打开文件 操作文件 一.打开 文件句柄 = file('文件路径', '模式') 注:python中打开文件有两种方式,即:open(...) 和  fi ...

  7. OD使用教程10

       首先载入程序,然后Ctrl+N打开输入输出表 然后直接输入要找到函数,找到之后下断点,右键-在每个参考上设置断点 然后运行程序来到第一个断点处 然后f8走,开始找注册码没找到就换一个函数,然后看 ...

  8. 【日常小问题】windows系统操作技巧

    如何将文件夹视图设置为“详细信息” @2015.3.30 这段时间刚换了电脑,资源管理器视图模式为“大图标”,很不符合俺的操作习惯.修改之—— 1.打开一个文件夹,设置为详细信息显示. 2.点击工具- ...

  9. js中返回上一页失效的解决办法

    最近在做移动端的时候,碰到了一个问题,就是点击返回按键,使用history.go(-1)或history.back(-1)不能够生效.于是便寻找其他的方法,终于找到了一位大神的方法如下: if(win ...

  10. JAVA求圆的面积

    import java.text.DecimalFormat;import java.util.Scanner; public class TheAreaOfCircle { public stati ...