前言: 关于前端的第二篇博客，会写关于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] 响应式编程开发-ReactiveCocoa(一)

    什么是响应式编程 响应式编程是一种面向数据流和变化传播的编程范式.这意味着可以在编程语言中很方便地表达静态或动态的数据流,而相关的计算模型会自动将变化的值通过数据流进行传播. 例如,在命令式编程环境中 ...

  2. CodeForces 629C Famil Door and Brackets

    DP. 具体做法:dp[i][j]表示长度为 i 的括号串,前缀和(左括号表示1,右括号表示-1)为 j 的有几种. 状态转移很容易得到:dp[i][j]=dp[i - 1][j + 1]+dp[i ...

  3. html页面头部里的meta

    作者:zccst html中的http-equiv属性应用详解 一.简介 http-equiv 属性 -- HTTP协议的响应头报文 此属性出现在meta标签中 此属性用于代替name,HTTP服务器 ...

  4. 【HNOI2013】题解 bzoj3139~bzoj3144

    比赛 题目:  http://www.lydsy.com/JudgeOnline/problem.php?id=3139 题解: 3$\le$N$\le$10,比较明显是一个搜索题,一开始我是直接搜了 ...

  5. nodejs nodemailer中间件

    var stransporter = nodemailer.createTransport({ host:smtp-163.com', //适合163 secureConnection: true, ...

  6. 【转】25个Git用法技巧

    Andy Jeffries 给 Git 中级用户总结分享的 25 个小贴士.你不需要去做大量搜索,或许这些小贴士对你就很有帮助的. 我从开始使用git到现在已经差不多18个月了,以为自己已经很懂git ...

  7. sqlserver 批量删除相同前缀名的表

    ) DECLARE tmpCur CURSOR FOR SELECT name FROM sys.objects WHERE TYPE='U' AND name LIKE N'HSUPA%' OPEN ...

  8. IOS开发中响应者链

    在IOS开发中,有时候会遇到如下情况:在页面1上有一个RedView,在RedView上有一个GreenView,在GreenView上有一个button,这些view的创建代码如下: 1.AppDe ...

  9. web前端面试第三波~

    快来测试测试自己掌握能力吧! 1. class.forname的作用?为什么要用? 1).获取Class对象的方式:类名.class.对象.getClass().Class.forName(" ...

  10. win8.1 64位+oracle11g R2 64位 +powerdesigner破解版 64位+PL/SQL

    安装时搜索了很多帖子,很多就是复制粘贴(完全不需要什么IP,host),有的版本不对,有的版本太老,今天决定贴出自己的处女贴 oracle的安装很简单,不需要说什么了,PL/SQL真是恶心死 orac ...