CSS 简介

css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。

存在方式有三种:元素内联、页面嵌入和外部引入,比较三种方式的优缺点。

语法:style = 'key1:value1;key2:value2;'
     在标签中使用 style='xx:xxx;'
     在页面中嵌入 < style type="text/css"> </style > #在头部指定CSS样式
     引入外部css文件

优先级:标签>页面镶入>外部,这个仅限同样的样式冲突是才有用。

必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员则必须知道是如何实现的。

元素内联:
直接在标签上应用:代码如下
    <p style="background-color: aqua">
Jason
</p>

效果如下:

页面嵌入
在头部写好css样式然后应用:代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*标签选择器,找到所有的标签应用以下样式*/
div {
background-color: red;
color: blue;
}
/*id选择器,找到标签id等于i1的标签,应用以下样式*/
#i1 {
font-size: 56px;
color: green;
}
/*class选择器,找到class=c1的所有标签,应用一下样式*/
.c1 {
background-color: pink;
}
/*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/
.c2 div p a{
background-color: yellow;
}
/*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/
.c4,.c5,.c6{
background-color: green;
}
</style>
</head>
<body>
<div>
<div>div style</div>
<div class="c1">c1style</div>
<div id="i1">id style</div>
</div>
<div class="c2">
<div></div>
<div>
<p>
<span>oo</span>
<br/>
<a >c2 div p a style</a>
</p>
</div>
</div>
</body>
</html>

效果如下:

外部引用

写一个独立的文件存储css样式代码如下:建议(在样式文件里加上标注防止出现遗忘)

代买如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<!--这里通过link导入样式,有点类似与python导入模块中的import *-->
<link rel="stylesheet" href="common.css" />
</head>
<body>
<div>外部引用</div>
</body>
</html>

效果如下:

标签应用,为指定标签统一设置格式:可以给div这样的标签设定自己想要的格式,也可相对已经定义好的容器设定样式代码如下:

<style>
/*标签选择器,找到所有的标签应用以下样式*/
div {
background-color: red;
color: blue;
}
/*id选择器,找到标签id等于i1的标签,应用以下样式*/
#i1 {
font-size: 56px;
color: green;
}
/*class选择器,找到class=c1的所有标签,应用一下样式*/
.c1 {
background-color: pink;
}
/*层级选择器,找到 class=c2 下的div下的p下的class=c3标签,应用以下样式*/
.c2 div p a{
background-color: yellow;
}
/*组合选择器,找到class=c4,class=c5,class=c6,的标签,应用以下样式*/
.c4,.c5,.c6{
background-color: green;
}
</style>

CSS常用属性

background  【背景】

background-color  背景颜色   代码如下:

    <p style="background-color: red">
Hello,Jason
</p>

background-image 背景图片   代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.img{
/*背景颜色*/
background-color: #67b168;
/*引用的背景图片,可以为相对路径*/
background-image: url("4.gif");
height: 150px;
width: 400px;
/*图片不重复*/
background-repeat: no-repeat;
}
.img2{
background-image: url("2.jpg");
height: 50px;
width: 50px;
background-position: 84px -58px;
}
.img3{
background-image: url("2.png");
height: 100px;
width: 100px;
background-position: 30px 20px;
background-repeat: no-repeat;
}
.img4{
background-image: url("bcak.png");
height: 100px;
width: 100px;
background-position: 30px 20px;
background-repeat: no-repeat;
/*图片伸缩*/
-webkit-transform:scale(1.5,1.5);
-moz-transform:scale(1.5,1.5);
-transform:scale(1.5,1.5);
}
</style>
</head>
<body>
<div class="img"></div> <div class="img2"></div> <div class="img3">sss</div>
<div class="img4">test</div>
</body>
</html>、

效果如下:

border 【边框】

代码如下:

 <!--border:有3个参数:线的粗细、线的样式(实线、点、虚线等)、线的颜色-->
<!--第一种:线的粗细为1像素,实线、红色-->
<div style="border:1px solid red;height:10px" ></div>
<!--第二种:线的粗细为1像素,点、蓝色-->
<div style="border:1px dotted blue;height:10px" ></div>
<!--第三种:线的粗细为1像素、虚线、紫色-->
<div style="border:1px dashed purple;height:10px" ></div>

设置边框,效果图如下图:

边框可以单独的设置一边的边框、上、下、左、右

 <!--在左边设置边框,3px、实线、红色-->
<div style="border-left: 3px solid red">Luotianshuai</div>

Display

代码如下:

display:none

original

display:block

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="width: 1200px;height: 1000px;border: 1px solid red">
<div style="width: 200px;height: 200px;background-color: aqua;float: left;margin-left: 10px;display: block">f</div>
<div style="width: 900px;height: 400px;background-color: red;float: left;display: block">A</div> <!--<div style="clear: both;"></div>-->
</div>
</body>
</html> 

效果如下:

cursor 鼠标停放所显示的效果

代码如下(实际效果自己写看):

    <div style="cursor:pointer">停放在这里显示小手(pointer)</div>
<div style="cursor:help">停放在这里显示问号(help)</div>
<div style="cursor:wait">停放在这里显示问号(wait)</div>
<div style="cursor:move">停放在这里显示移动(move)</div>
<div style="cursor:crosshair">停放在这里显示定位(crosshair)</div>

浮动  float (用的比较多,用来布局使用)

CSS里面的浮动属性是布局的常用工具,只有真正了解它并熟练使用才能将它的优点发挥到极致。

许多页面中都有文字绕图效果,并且各区块分布得错落有置,很多朋友在自学CSS布局时为了做出这些效果往往会被div只能独占一行的默认样式搞的头大,但使用了浮动属性,布局就变得简单、美观了。

任何元素都可以被浮动,段落标签<p>、<div>、<table&gt;、<img>,甚至<span>、<b>、<h1>等等都可以,而且所有被定义为浮动的元素都会被自动变为“块状元素”,也就是我们先前讲过的“盒装模型”,也就是代表它可以定义宽度和高度了。

浮动float的定义方法



CSS中浮动属性的定义是通过float来声明的,它规定了元素是向左靠还是向右靠,有三个值:

left:居左;

right:居右;

none:默认属性,不浮动。

下面举个例子:

<div style="float:right;width:100px;height:100px;">

<p style="float:right;width:50px;background:#F00;">文字</p>

</div>

上面的例子将最外面的div置于右方,将内部的段落也置于div内部右方,就这样做到了内容的浮动。

水平浮动的层叠

如果将A元素居左放置在页面最左端,在它的后面跟随一个居左浮动的B元素,那么B元素就是贴着A元素排列的,以此类推,在水平宽度允许的条件下,可以放置多个居左浮动的元素,直到宽度没有多余的空间时,居左浮动的元素会绕到下一行的左侧显示。

举例:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul { width:500px; background:#000; padding:5px; } li { float:left; border-right:1px solid #000; height:20px; padding-right:100px; background:#FFF; margin-bottom:1px; }
</style>
</head>
<body>
<ul> <li>float01</li> <li>float02</li> <li>float03</li> <li>float04</li> <li>float05</li> <li>float06</li> <li>float07</li> <li>float08</li> </ul>
</body>
</html>

以上代码的显示效果应该是一排水平排列的<li>,在超出宽度时,会折行显示,为了分清界限,我给它定义了一条右边线。

效果如下图:

清除属性-clear

吃了毒药,就一定要有解药。学会了怎样使用浮动属性,那必须学会怎样清除浮动。

清除属性通过clear来声明,它同样有四个值:

clear:left;清除左侧。

clear:right;清除右侧。

clear:both;清除两侧。

clear:none;不清除。

clear要达到的效果是,一个被清理的盒状元素无法与前置浮动保持在同一个水平位置上。它必须出现在其下方。

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
ul { width:500px; background:#000; padding:5px; } li { float:left; border-right:1px solid #000; height:20px; padding-right:100px; background:#FFF; margin-bottom:1px; }
</style>
</head>
<body>
<ul> <li>float01</li> <li>float02</li> <li>float03</li> <li>float04</li> <li>float05</li> <li>float06</li> <li>float07</li> <li>float08</li> </ul>
<div style="float:left; background:#F00;">顶部第一个div向左浮动,无清除效果</div> <div style="clear:both;">第二个div清除两侧内容</div> <div style="float:left;">第三个div,无清除效果,居左浮动</div> <div style="float:left;">第四个div,无清除效果,居左浮动</div>
</body>
</html>

效果如下

position

http://www.cnblogs.com/canuseethat/archive/2010/09/16/1827804.html

margin 外边距

margin简写属性在一个声明中设置所有外边距属性。该属性可以有1到4个值。


{
顺序上右下左
margin:2cm 4cm 3cm 4cm;
}
<div style="height: 100px;background-color: #ddd;border: 1px solid green">
<div style="margin-top: 30px;margin-left: 100px">
<input />
<input />
<input />
</div>
</div>
</body>

padding 内边距

定义和用法

padding 简写属性在一个声明中设置所有内边距属性。

说明

这个简写属性设置元素所有内边距的宽度,或者设置各边上内边距的宽度。行内非替换元素上设置的内边距不会影响行高计算;因此,如果一个元素既有内边距又有背景,从视觉上看可能会延伸到其他行,有可能还会与其他内容重叠。元素的背景会延伸穿过内边距。不允许指定负边距值。

注释:不允许使用负值。

padding:10px 5px 15px 20px;

上内边距是 10px

右内边距是 5px

下内边距是 15px

左内边距是 20px

透明度

代码如下

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
img{
opacity: 0.4;
}
</style>
</head>
<body> </body>
</html>

补充:

1.img 标签边框 IE 浏览器如果不将border 设置为0,会有外边框,在chrome 无此情况:

边框设置为0,效果如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
img{
border: 0px;
}
</style>
</head>
<body>
<div>
<div class="item">
<a href="http://www.etiantian.org">
<img src="2.jpg" alt="图片">
</a>
</div>
</div>
</body>
</html>

img去除border(IE)

如果引用的图片不存在,可以加alt属性备注

代码如下:

<img src="2.jp" alt="图片">

效果如下图:

2. 商品展示下商品数量加减导航栏设置,效果如下图:

代码如下:

<head>
<meta charset="UTF-8">
<title></title>
<style>
.inp{
border: 0;
border-left: 1px solid #dddddd;
border-right: 1px solid #dddddd;
height: 25px;
margin: 0;
padding: 0;
float: left;
}
.sp{
display: inline-block;
height: 25px;
width: 25px;
text-align: center;
line-height: 25px;
float: left;
}
</style>
</head>
<body>
<div style="border: 1px solid #dddddd;display: inline-block;">
<div class="sp">-</div>
<input class="inp" type="text" />
<div class="sp">+</div>
</div>
</body>
</html>

3. important 属性

如果两个类对同一个属性设置,想要优先选择某个属性,可以加important属性进行渲染 ,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.hide{
display: none !important;
}
.c1{
color: red !important;
}
.c2{
color: green;
}
</style>
</head>
<body> <div class="c1 c2">asdfasdfasdfasdf</div>
</body>
</html>

4.浏览器缩小引发样式出错的问题

当某个容器包含两个div,并让它们居中显示,需要浮动起来,但是当我们缩小浏览器窗口时,样式会出现混乱的情况,未解决此问题,我们应该给父容器设定固定的宽度,这样即使浏览器缩小,样式

也不会发生变化,浏览器会出现导航窗口,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--固定父容器宽度-->
<div class="pg-body" style="width: 980px;margin: 0 auto;">
<div style="width: 20%;float: left;background-color: red">asasdfasdfasdfasdfasdfasdfdf</div>
<div style="width: 80%;float: left;background-color: #2459a2">
sdfsdfasdfasdfsdfasdfsdfasdfasdfsdfasdfasdfsdfasdfasdf
</div>
</div>
</body>
</html>

浏览器缩小时,效果如下:

5.清除浮动,恢复背景样式高级方法

此前为了恢复父容器的背景样式,会在容器最后加上 style=“clear:both”,下面介绍一个更高级的方法;代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.c1:hover{
background-color: #2459a2;
}
.c2:before{
content: '666';
}
.c2:after {
content: '777';
}
.left{
float: left;
}
.item{
background-color: red;
}
.clearfix:after{
content: '.';
clear: both;
display: block;
visibility: hidden;
height: 0;
}
</style>
</head>
<body>
<div class="c1">ddd</div>
<div class="c2">888</div> <div style="background-color: red" class="clearfix">
<div class="left" style="height: 100px;background-color: green">1</div>
<div class="left">2</div>
</div>
</body>
</html>

6.登录窗口样式

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.icon-name{
background-image: url('i_name.jpg');
height: 16px;
width: 16px;
/*内联块标签*/
display: inline-block;
}
.icon-pwd{
background-image: url('i_pwd.jpg');
height: 16px;
width: 16px;
display: inline-block;
}
</style>
</head>
<body>
父容器样式position为relative,子容器span设置position为absolute,这样它相对父容器是固定的
<div style="width: 200px;position: relative">
<input style="width: 180px;padding-right: 20px;" />
<span class="icon-name" style="position: absolute;top:2px;right: 0;"></span>
</div>
</body>
</html>

7.制作小三角

效果如下:

代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.icon{
display: inline-block;
border-top: 15px solid blue;
border-right: 15px solid red;
border-bottom: 15px solid yellow;
border-left: 15px solid black;
}
</style>
</head>
<body>
<div class="icon"></div>
</body>
</html>

前端 初级篇(CSS)的更多相关文章

  1. 前端 初级篇(HTML)

    HTML 概述: HTML是英文Hyper Text Mark-up Language(超文本标记语言)的缩写,他是一种制作万维网页面标准语言(标记).相当于定义统一的一套规则,大家都来遵守他,这样就 ...

  2. 前端总结·基础篇·CSS(一)布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  3. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  4. 前端总结·基础篇·CSS(三)补充

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 目录 一.移动端 1.1 视口(viewport) 1.2 媒体查询(medi ...

  5. 前端总结·基础篇·CSS

    前端总结·基础篇·CSS 1 常用重置+重置插件(Normalize.css,IE8+) * {box-sizing:border-box;}  /* IE8+ */body {margin:0;}  ...

  6. 前端第二篇---前端基础之CSS

    前端第二篇---前端基础之CSS 目录 一.css介绍 二.css语法 三.css的几种引入方式 四.css选择器 五.css属性相关 六.盒子模型 拓展 一.css介绍 CSS(Cascading  ...

  7. Java工程师学习指南 初级篇

    Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  8. Java工程师学习指南(初级篇)

    Java工程师学习指南 初级篇 最近有很多小伙伴来问我,Java小白如何入门,如何安排学习路线,每一步应该怎么走比较好.原本我以为之前的几篇文章已经可以解决大家的问题了,其实不然,因为我之前写的文章都 ...

  9. 前端开发:css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

随机推荐

  1. Mybatis+MSSql插入数据的同时并获取自增的ID

    在项目中遇到这样的情况,新增一个角色,这个角色有某些权限,这两个数据存在不同的表中,一个是sys_role,另外一个是sys_role_permission表,注意,现在的逻辑是这样的 1,在表sys ...

  2. Servlet 调试

    测试/调试 Servlet 始终是开发使用过程中的难点.Servlet 往往涉及大量的客户端/服务器交互,可能会出现错误但又难以重现. 这里有一些提示和建议,可以帮助您调试. System.out.p ...

  3. git Staging Deleted files

    Use git rm foo to stage the file for deletion. (This will also delete the file from the file system, ...

  4. Scala之模式匹配(Patterns Matching)

    前言 首先.我们要在一開始强调一件非常重要的事:Scala的模式匹配发生在但绝不仅限于发生在match case语句块中.这是Scala模式匹配之所以重要且实用的一个关键因素!我们会在文章的后半部分具 ...

  5. maven打包加速(转) (开启多线程,之前发现只占用一核CPU100%,其他CPU闲置的情况)

    采用maven打包时,发现速度超慢,打包一次5-10分钟或者更长时间过去了,严重浪费了一天的时间.因此整理了一下maven打包加速的问题.1.在maven打包中去掉, maven clean, mav ...

  6. 阿里云里Centos 7 PHP7环境配置 LNMP

    首先更新系统软件</str> $ yum update 安装nginx</str></str> 1.安装nginx源 $ yum localinstall http ...

  7. Android无线测试之—UiAutomator UiSelector API介绍之四

    四种匹配关系介绍 一.四种匹配关系介绍: 二.举例: 匹配字符串   0123456789 1.完全匹配: 0123456789 2.包含匹配: 45678.456.678 3.正则匹配: \d{10 ...

  8. 41、Android中当数据库需要更新时我们该怎么办?

    转载  http://blog.csdn.net/jiangwei0910410003/article/details/39670813

  9. CodeIgniter框架——创建一个简单的Web站点(include MySQL基本操作)

    目标 使用 CodeIgniter 创建一个简单的 Web 站点.该站点将有一个主页,显示一些宣传文本和一个表单,该表单将发布到数据库表中. 按照 CodeIgniter 的术语,可将这些需求转换为以 ...

  10. poj1840

    Eqs Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 15133   Accepted: 7426 Description ...