前言: 关于前端的第二篇博客，会写关于css的，内容比较基础。写完这篇博客，会做一个类似美乐乐家具的界面。good luck to me~

一、css-引用样式

标签上设置style属性：

 <body>

     <div style="background-color: #2459a2;height: 48px;">第一层</div>

     <div style="background-color: #2459a2;height: 48px;">第二层</div>

     <div style="background-color: #2459a2;height: 48px;">第三层</div>

 </body>

引用样式的三种方式:

第一种:在<body>直接定义与引用样式

 <div style="color: red;font-size: 18px;">aa</div>

第二种: 在<head>头部加上下面代码(类似全局变量)，然后在<body>引用: <div class="cc">c1</div>。PS:(如果class="cc", 那它就会去全局里找.cc样式。)

     <style>

         .cc{

             color: red;

             font-size: 50px;

         }

         .ccc{

             color: green;

         }

     </style>

第三种：将需要引用的样式存放在其它文件(eg:commons.css文件)中

然后在head头部导入样式: <link rel="stylesheet" href="commons.css" />, 再在body调用样式: <div class="cc">c1</div>

关于优先级，第一种最高(在body直接定义引用样式)，推存使用第三种。如果在head头部定义并且在body引用了两种样式，如下:

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .cc{

             background-color: blue;

         }

         .ccc{

             background-color: yellow;

         }

     </style>

 </head>

 <body>

     <div class="cc ccc">

         AA

     </div>

 </body>

如果样式不冲突，则样式cc和ccc都应用，如果样式有冲突，那是优先应用cc还是ccc样式？？

当引用了两种有冲突样式，两种样式都是在head定义的，head头部中后一种定义的样式会把前一种覆盖，故上面代码引用的是ccc样式!!就算把第14行改为<div class="ccc cc">，仍是引用ccc样式。

运行界面: 

二、css-选择器

选择器(即寻找标签): class选择器、标签选择器、ID选择器(这三种是重点，推荐使用class选择器)

1、class选择器（推荐）

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .c1{

             background-color: #2459a2;

             height: 48px;

         }

     </style>

 </head>

 <body>

      <div class="c1">第一层</div>

      <div class="c1">第二层</div>

      <div class="c1">第三层</div>

 </body>

2、标签选择器

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         div{

             background-color: #2459a2;

             height: 48px;

         }

     </style>

 </head>

 <body>

      <div >第一层</div>

      <div >第二层</div>

      <div >第三层</div>

 </body>

标签选择器，设置div样式，则body里所有的div标签内的内容都会应用此内容

3、id选择器

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         #i1{

             background-color: #2459a2;

             height: 48px;

         }

     </style>

 </head>

 <body>

     <div id="i1">第一层</div>

 </body>

把样式写到head里面，以#开头命名，调用对应样式在div里用id属性指定相应的id名。

4、层级选择器

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         span div{

             background-color: #2459a2;

             height: 48px;

         }

     </style>

 </head>

 <body>

      <div >第一层</div>

      <span>

         <div >span里的div</div>

      </span>

      <div >第三层</div>

 </body>

只让span里面的div标签应用样式，可多层嵌，类似于路径

5、组合选择器

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         a,p{

             background-color: cadetblue;

         }

     </style>

 </head>

 <body>

     <a>A</a>

     <p>P</p>

 </body>

表示a标签或者p标签可以引用定义的样式。逗号表示 或

运行界面:

6、属性选择器

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         input[name="James"]{width: 20px;height: 20px;}

     </style>

 </head>

 <body>

     <input type="text" name="James">

     <input type="text">

     <input type="password">

 </body>

三、css-应用样式

1、border

 <body>

     <div style="border: 1px dotted red;">

         第一层边框

     </div>

 <!--border：边框宽度  solid：边框样式实线（dotted虚线）颜色：red-->

 </body>

边框其他样式

 <body>

     <div style="height: 48px;

     width: 80%;

     border: 1px solid brown;

     font-size: 16px;

     text-align: center;

     line-height: 48px;

     ">第二层边框</div>

     <!--height: 48px 边框高度-->

     <!--width: 80% 宽度页面的80%-->

     <!--border: 1px solid brown 边框宽度、样式、颜色-->

     <!--font-size: 16px;  字体大小-->

     <!--text-align: center; 水平居中-->

     <!--line-height: 48px; 垂直居中-->

 </body>

运行界面:

 2、float

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。

 <body>

     <div style="width:500px;">

         <div style="background-color:red;float:left;width:20%;">123</div>

         <div style="background-color:green;float:left;width:50%">123</div>

         <div style="background-color:yellow;float:right;width:20%">123</div>

     </div>

 </body>

里面的div的宽度是以上一层div的宽度的标准的。

运行界面:

如果在父标签加上background-color:blue;会发现结果与上图一样，并没有显示出蓝色。

可以加上<div　style="clear:both;"></div>

 <div style="width:500px;background-color:blue;">

     <div style="background-color:red;float:left;width:20%;">123</div>

     <div style="background-color:green;float:left;width:50%">123</div>

     <div style="background-color:yellow;float:right;width:20%">123</div>

     <div style="clear:both;"></div>

 </div>

运行界面:

 3、display

块级标签和行内标签相互转换

 <body>

     <div style="background-color: red;display: inline">块级</div>

     <span style="background-color: #2459a2;display: block">行内</span>

 </body>

运行界面:

注：display:inline 转换为行内标签；display：block转换为块级标签；另还有display：none不显示

行内标签：无法设置高度，宽度，padding margin
块级标签：可以设置高度，宽度，padding margin

 <body>

     <span style="background-color: yellow;display: inline-block;height: 50px;width: 70px">行内</span>

     <div style="background-color: red;display: inline">块级</div>

 </body>

注：display:inline-block 既有inline的属性（默认自己有多少占多少）又有block的属性（可以设置高度、宽度、padding、margin）

运行界面:

4、margin,padding

margin 　外边距    margin-top：上边距
padding  内边距

padding:20px                          上下左右边距都是20px
 margin:10px 20px 10px 10px  分别指上右下左
padding:10px 20px                  指上下与左右)
  margin:　　　　　　　　　　     同上

 <div style="height:80px;border:1px solid red;">

     <div style="height:60px;background-color:blue;margin: 10px;"></div>

 </div>

运行示意图:

5、position

fixed固定到浏览器界面某个位置

返回顶部按钮:好多页面都有返回顶部的按钮，随着你页面的下拉，按钮永远在页面的右下角，下面就来实现：

 <body>

     <div style="width: 50px;height: 50px;background-color: black;color: white;

     position: fixed;

     bottom: 20px;

     right: 20px;

     ">返回顶部</div>

     <div style="height: 5000px;background-color: #dddddd";>

     </div>

 </body>

实现动态效果，点击返回顶部:

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body style="margin: auto">

     <div onclick="GoTop();"  style="width: 50px;height: 50px;background-color: black;color: white;

     position: fixed;

     bottom: 20px;

     right: 20px;">

         返回顶部

     </div>

     <div style="height: 5000px;background-color: #dddddd;margin: auto;">

         ddddddddddddd

     </div>

     <script>

         function GoTop() {

             document.body.scrollTop=0;

         }

     </script>

 </body>

 </html>

固定菜单栏：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .pg-header{

             height: 48px;

             background-color: darkorange;

             color: #dddddd;

             position: fixed;

             top:0;

             right: 0;

             left: 0;

         }

         .pg-body{

             background-color: #dddddd;

             height: 5000px;

             margin-top: 50px;

         }

     </style>

 </head>

 <body style="margin: 0">

     <div class="pg-header">固定头部</div>

     <div class="pg-body">内容</div>

 </body>

 </html>

运行界面:

relative+absolute（相对与relative固定路径）

 <div style="position:relative;background:green;height:400px;width:500px;">

     <div style="position:absolute;bottom:30px;right:30px;">123</div>

 </div>

加了position:relative; 则子标签的位置是相对父标签来定位的；如果去掉positon:relative;则子标签的位置是相对整个界面的定位的；

运行界面:

6、多层模态

用了position样式实现三层页面: 当页面整个浮动在上面的时候，如果想让页面整体覆盖底层页面，要用到top,right,left,bottom属性，而非margin-top、margin-left....

opacity:设置透明度（0~1之间）

z-index:设置层级（z-index越大，越放在顶层）

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div style="z-index:10;position: fixed;top: 50%;left: 50%;

     margin-left:-250px;margin-top:-250px;background-color: wheat;

     height: 500px;width: 500px"></div>

     <div style="z-index:9;position: fixed;background-color: black;

     top: 0;

     right: 0;

     left: 0;

     bottom: 0;

     opacity: 0.5"></div>

     <div style="height: 5000px;background-color: green"></div>

 </body>

 </html>

运行界面(top: 50%;left: 50%;margin-left:-250px;margin-top:-250 px是对最顶层的div进行居中处理；):

7、hover

可以看一下抽屉网的顶部条栏，当鼠标移动到选项栏时，背景颜色会出现变化；下面就来试试搞一下这个

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

     <style>

         .pg-header{

             position: fixed;

             right: 0;

             left: 0;

             top: 0;

             height: 48px;

             background-color: #2459a2;

             line-height: 48px;

             color: white;

         }

         .pg-body{

             margin-top: 50px;

         }

         .w{

             width: 980px;

             margin: auto;

         }

         .pg-header .menu{

             display:inline-block;

             padding: 0 10px 0 10px;

         }

         .pg-header .menu:hover{

             background-color: #BF1919;

         }

     </style>

 </head>

 <body>

     <div class="pg-header">

         <div class="w">

             <a >LOGO</a>

             <a class="menu">全部</a>

             <a class="menu">42区</a>

             <a class="menu">段子</a>

             <a class="menu">1024</a>

             <a class="menu">爆文</a>

         </div>

     </div>

     <div class="pg-body">

     </div>

 </body>

 </html>

其中.pg-header .menu:hover{background-color: #BF1919}指定当鼠标滑过引用.menu字段时，字段样式变成新定义的样式

运行界面:

8、background

background-image

之前一直在用backgroud样式基本上都是设置背景颜色什么，其实background还可以设置背景为图片.

默认情况下，背景图像进行平铺重复显示，以覆盖整个元素实体.

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="UTF-8">

     <title>Title</title>

 </head>

 <body>

     <div style="background-image: url('bg.png');height:600px;width: 600px;

     border: 1px solid red;"></div>

 </body>

 </html>

运行示意图(实际图片只有3 X 789):

background-repeat

background-repeat有四个属性repeat（默认，重复占满）、no-repeat（不重复）、repeat-x（只横着重复放）、repeat-y（只竖着重复放）

默认情况下 background-image 属性会在页面的水平与垂直方向平铺。一些图像如果在水平方向与垂直方向平铺，这样看起来很不协调，如下所示:

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>菜鸟教程(runoob.com)</title>

 <style>

     body

     {

         background-image:url('gradient2.png');

     }

 </style>

 </head>

 <body>

     <h1>Hello World!</h1>

 </body>

 </html>

运行示意图:

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些:

 <!DOCTYPE html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>菜鸟教程(runoob.com)</title>

 <style>

     body

     {

         background-image:url('gradient2.png');

         background-repeat:repeat-x;

     }

 </style>

 </head>

 <body>

     <h1>Hello World!</h1>

 </body>

 </html>

运行示意图:

background-position-x、background-position-y

为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置。可以利用 background-position 属性改变图像在背景中的位置:

 <body>

     <div style="background-image: url('icon.png');height: 20px;width: 20px;

     border: 1px solid red;background-position-x:20px;background-position-y: 40px"></div>

 </body>

background-position-x表示看背景图片的窗口水平方向向右移动，background-position-y表示看背景图片的窗口垂直向下移动

CSS 背景属性总结

Property 描述
background 简写属性，作用是将背景属性设置在一个声明中。
background-attachment 背景图像是否固定或者随着页面的其余部分滚动。
background-color 设置元素的背景颜色。
background-image 把图像设置为背景。
background-position 设置背景图像的起始位置。
background-repeat 设置背景图像是否及如何重复。

本博文参考自:

博主的OneNote笔记

博客:http://www.cnblogs.com/lianzhilei/p/6046131.html

菜鸟教程:CSS background

昨天就开始写了，昨晚开始做些简单的排版，发现一些漏的知识，于是去参考了菜鸟教程。写完之后发现挺多的，能截图的我已经尽量截图了~~

转发注明出处:http://www.cnblogs.com/0zcl/p/6388504.html

【前端】:css的更多相关文章

  1. 前端CSS编程之道-LESS

    由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件 学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...

  2. 扯一扯前端css的整体架构设计：（2）base基础类的那些事儿

    周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...

  3. Web前端-CSS必备知识点

    Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...

  4. WEB前端 CSS(非布局)

    目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器 直接选择器 组合选择器 分组选择器 也叫并集选择器 属性选择器 伪类选择器 伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...

  5. 前端 CSS 目录

    前端 CSS 介绍 前端 CSS语法 前端 CSS 注释

  6. {前端CSS} 语法 Css的几种引入方式 css选择器 选择器的优先级 CSS属性相关 背景属性 边框 CSS盒子模型 清除浮动 overflow溢出属性　　定位（position）z-index

    前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...

  7. 前端CSS - 相对定位,绝对定位,固定定位

    前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...

  8. 前端 CSS 继承性和层叠性

    CSS有两大特性:继承性和层叠性 前端 CSS的继承性 前端 CSS层叠性 CSS选择器优先级 前端 CSS 优先级 样式设置important

  9. day 45 前端CSS

      前端CSS   CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...

  10. 前端——CSS选择器

    目录 前端CSS CSS三种引入方式 CSS标签选择器 基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器 组合选择器 1.后代选择器 空格 2.儿子选择器 > 3.毗邻选 ...

随机推荐

  1. iOS自定义字体及类目 分类： ios技术 2015-05-15 16:34 195人阅读 评论(0) 收藏

    1:获取字体文件 从各种渠道下载字体文件ttf, 网站或者从别的ipa里扣出来.(以fzltxh.ttf为例) 2:将fzltxh.ttf文件拷贝到工程中 3:在Info.plist中添加项: Fon ...

  2. 处理Block中的self问题（Capturing 'self' strongly in this block is likely to lead to a retain cycle）

    警告:ARC Retain Cycle Capturing 'self' strongly in this block is likely to lead to a retain cycle 代码: ...

  3. JS数字金额大写转换

    /** 数字金额大写转换(可以处理整数,小数,负数) */ var digitUppercase = function(n) { var fraction = ['角', '分']; var digi ...

  4. Jquery插件之ajaxForm ajaxSubmit的理解用法

      如今ajax满天飞,作为重点的form自然也受到照顾. 其实,我们在平常使用Jquery异步提交表单,一般是在submit()中,使用$.ajax进行.比如:   $(function(){ $( ...

  5. python unicode 转中文 遇到的问题 爬去网页中遇到编码的问题

    How do convert unicode escape sequences to unicode characters in a python string 爬去网页中遇到编码的问题 Python ...

  6. Java读取其他jar包里的配置文件

    最近要做个东西,需要自己控制数据库的事物,项目封装的框架,实在是提不起去阅读的兴趣, 就想直接去读框架的底层实现里面的数据连接的配置文件(如:Url,port,username,password等), ...

  7. IOS 程序图标添加数字

    +(void)setAppIconNumber:(NSInteger)num{ if ([UIParam getIOSVersion]>8.0) { UIUserNotificationSett ...

  8. 如何使用Grunt（好文）

    Grunt 是什么? Grunt 基于Node.js之上,是一个以任务处理为基础的命令行工具,可以减少优化开发版本为发布版本所需的人力和时间,从而加速开发流程.它的工作原理是把这 些工作整合为不同的任 ...

  9. Hibernate懒加载的三种解决方案

    Hibernate懒加载的两种解决方案: 1.Hibernate.initialize(代理对象) 2.在*.hbm.xml映射文件中添加lazy="false"属性 3.使用op ...

  10. 浅谈Java工具类CommonUtils的使用

    package com.xushouwei.cn; import java.util.HashMap; import java.util.Map; import org.junit.Test; imp ...