【前端】:css

前言: 关于前端的第二篇博客，会写关于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的更多相关文章

前端CSS编程之道-LESS
由于前端css编写繁琐,最近开始学习LESS,用LESS编写文件.less文件可以直接编译成我们要的.css文件学习Less 我下面是我练习时的截图,希望小伙伴也能动手自己写一下,而不是复制粘贴模式 ...
扯一扯前端css的整体架构设计：（2）base基础类的那些事儿
周一下午在实验室写了第一篇博文,有几个人捧场,那咱就得接着下去啊.然后我觉得现在写的内容更多的偏向于谈一下我对于前端css架构的理解和前端经验的一个小总结,所以就把标题里原来的[项目总结]给删掉了.但 ...
Web前端-CSS必备知识点
Web前端-CSS必备知识点 css基本内容,类选择符,id选择符,伪类,伪元素,结构,继承,特殊性,层叠,元素分类,颜色,长度,url,文本,字体,边框,块级元素,浮动元素,内联元素,定位. 链接: ...
WEB前端 CSS(非布局)
目录 WEB前端 CSS CSS引入方式 CSS结构 CSS选择器直接选择器组合选择器分组选择器也叫并集选择器属性选择器伪类选择器伪元素选择器 CSS选择器是一个查找的过程,高效的查找影 ...
前端 CSS 目录
前端 CSS 介绍前端 CSS语法前端 CSS 注释
{前端CSS} 语法 Css的几种引入方式 css选择器选择器的优先级 CSS属性相关背景属性边框 CSS盒子模型清除浮动 overflow溢出属性　　定位（position）z-index
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式表来对文 ...
前端CSS - 相对定位,绝对定位,固定定位
前端CSS - 相对定位,绝对定位,固定定位 1.1 相对定位 position:relative 相对定位,就是微调元素位置的.让元素相对自己原来的位置,进行位置的微调. 也就是说,如果一个盒子想进 ...
前端 CSS 继承性和层叠性
CSS有两大特性:继承性和层叠性前端 CSS的继承性前端 CSS层叠性 CSS选择器优先级前端 CSS 优先级样式设置important
day 45 前端CSS
前端CSS CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素,给HTML设置样式,让它更加美观. 当浏览器读到一个样式表,它就会按照这个样式 ...
前端——CSS选择器
目录前端CSS CSS三种引入方式 CSS标签选择器基本选择器 1.元素选择器 2.类选择器 3.id选择器 4.通用选择器组合选择器 1.后代选择器空格 2.儿子选择器 > 3.毗邻选 ...

随机推荐

[Unity]Unity开发NGUI代码实现ScrollView(滚动视图)
Unity开发NGUI代码实现ScrollView(滚动视图) 下载NGUI包导入NGUI3.9.1版本package 链接: http://pan.baidu.com/s/1mgksPBU 密码: ...
Delphi2010生成GB2312字库乱码问题
用Delphi2010做一个点阵字库软件,字库生成部分是从一个用Delphi2007做旧的程序里扣出来的.点阵字库软件完成后生成GB2312字库在LED控制卡上显示为乱码.知道Delphi版本高于20 ...
CodeForces 625A Guest From the Past
贪心水题 #include <stdio.h> #include <algorithm> #include <string.h> #include <queu ...
利用反射动态从程序集dll执行方法和属性
程序结构: //获取程序集 Assembly asb = Assembly.LoadFrom(path);//path为程序集的物理路径 //获取程序集下面的Student类 Type documen ...
在线文档转换API word,excel,ppt等在线文件转pdf、png
在线文档转换API提供word,excel,ppt等在线文件转pdf.png等,文档:https://www.juhe.cn/docs/api/id/259 接口地址:http://v.juhe.cn ...
IIS日志路径，修改存放位置，清除日志方法
IIS存放日志文件的默认存储路径是c:\windows\system32\logfiles 我们依次打开“我的电脑”,C盘,Windows文件夹,system32文件夹,logfiles文件夹,发现里 ...
TM一句备注讲清楚TCP3次握手
1)C要跟S建立连接,现在,C向S发送连接建立标记SYN=1已经该次请求的序列号Seq=m. 2)S收到C的请求后,有空鸟C,那么,向C回发受勾信号ACK=1,已经该次约会的请求对应好ack=m+1 ...
nodejs抓取数据一(列表抓取)
纯属初学...有很多需要改进的地方,请多多指点... 目标是抓取58同城这个大分类下的列表数据: http://cd.58.com/caishui/?PGTID=14397169455980.924 ...
设置ubuntu下使用ls命令显示文件颜色显示
文件颜色属性: # Attribute codes: 字符属性# 00=none 01=bold 04=underscore 05=blink 07=reverse 08=concealed#00无 ...
IO文件
在Windows下的路径分隔符和Linux下的路径分隔符是不一样的,当直接使用绝对路径时,跨平台会暴出“No such file or diretory”的异常. Separator: 比如说要在te ...

【前端】:css

一、css-引用样式

二、css-选择器

三、css-应用样式

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

随机推荐

热门专题