web前端基础——初识CSS
1 CSS概要
CSS(Cascading Style Sheets)称为层叠样式表，用于美化页面(单纯HTML写的页面只是网页框架和内容的组合，相当于赤裸的人，而CSS则是给赤裸的人穿上华丽的外衣)，基本上所有的HTML页面都或多或少的使用了CSS。
CSS在页面中存在的三种方式：元素内联、页面嵌入和外部引入(语法：style='key1:value1;key2:value2;')
(1)标签内联：在HTML标签中使用 style='属性:属性值;'
(2)页面嵌入: <style type="text/css"></style>，即在头部先定义CSS样式块，后面再进行引用
(3)引入外部已写好的CSS文件
三种表现形式的优先级：标签内联>页面嵌入>外部引用，这个仅在三种形式中存在同样的样式时起作用。
2 CSS的三种存在形式
2.1 标签内联
标签内联，即在HTML标签中直接写入属性和属性值
<div style="color:red;">
第1种：标签内联
</div>
2.2 页面嵌入
页面嵌入，即在HTML中的头部先定义CSS样式块，然后在后续使用该样式
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> <!--定义样式-->
<style>
.re{
color:red;
}
#name{
background-color: antiquewhite;
}
<!--<应用于所有的span标签>-->
span{
font-size: 100px;
}
</style>
</head> <body>
<!--通过class引用样式-->
<span class="re">第2种：页面嵌入</span>
<span style="color:#ddddde" class="re">第2种：标签内联和页面嵌入同时存在</span>
<!--所有id值为name的都会应用引用的样式-->
<span id="name" class="re">第2种：引用id值，页面嵌入</span>
</body>
</html>
2.3 引用外部CSS文件
引用外部CSS文件，即在外部已写好CSS文件，在HTML文件中直接引用CSS样式
#已写好的CSS文件，命名为common.css
1 .re{
color:red
} .name{
background-color: green;
}
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> <!--导入CSS样式表文件-->
<link rel="stylesheet" href="common.css">
</head> <body>
<span class="re">第3种：引入外部CSS文件</span>
<span style="color:#ddddde" class="re">第3种：标签内联和引入外部CSS文件同时存在</span>
<span id="name" class="re">第3种：引用id，引用外部CSS文件</span>
</body>
</html>
3 CSS中的选择器(重点)
3.1 class/id/标签选择器
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
</head> <body> <!--定义样式-->
<style>
<!--"."表示CSS中的class选择器-->
.re{
color:red;
}
<!--#name表示id选择器，id=name的内容都会应用该样式-->
#name{
background-color: antiquewhite;
}
<!--span、p、div表示标签选择器，标签为定义的标签选择器中的内容都会应用该样式-->
span{
font-size: 100px;
}
p{
color:blue
}
div{
color:yellow
}
</style> <body>
<div>
应用上面div中定义的样式
</div>
<p>
应用上面p中定义的样式
</p>
<span class="re">aaa</span>
<span style="color:#ddddde" class="re">bbb</span>
<span id="name" class="re">ccc</span>
</body>
</html>
3.2 关联选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
/*CSS中的注释符号为/**/,注意与HTML注释的区别*/
/*第1种形式：container下的li标签样式*/
.container li{
background-color: red;
}
/*第2种形式：container中的li标签中的a标签样式，这种形式下后面的都为HTML标签*/
.container li a{
background-color: green;
}
/*第3种形式：(1)先找class=container的标签;(2)再找container下class=li的标签;(3)再找li下class=b的标签*/
.container .li .b{
background-color: yellow;
}
</style> </head> <body> <div class="container">
<ul>
<li>关联选择器：第一种形式</li>
<li>
<a>关联选择器：第二种形式</a>
</li>
<li>
<a class="l">
<span class="b">关联选择器：第三种形式</span>
</a>
</li>
</ul>
</div> </body>
</html>
|
关联选择器 的标签，再去id=i1的标签中找a标签，再去a标签中找class=cc1的标签，进而应用该样式，如果没有则不会应用 |
3.3 组合选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.c1 #i1 b,a .cc1,.cc2{
color: red;
}
</style>
</head> <body>
<!--上面的组合标签知识可以拆分成下面三种情况，注意逗号的作用-->
<!--第1种情况：.c1 #i1 b-->
<!--第2种情况：.c1 #i1 a .cc1-->
<!--第3种情况：.c1 #i1 .cc2-->
<div class="c1">
<div id="i1">
<!--第1种情况-->
<a>
<span class="cc1">.c1 #i1 a .cc1</span>
</a>
<br/>
<!--第2种情况-->
<b>.c1 #i1 b</b>
<br/>
<!--第3种情况-->
<span class="cc2">.c1 #i1 .cc2</span>
</div>
</div> </body>
</html>
3.4 属性选择器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
/*属性选择器，选择input标签自有的属性*/
.con input[type="text"][name="username"]{
border: 3px solid red;
}
/*属性选择器，选择自定义属性*/
.con input[self_define="attr"]{
border: 3px solid red;
}
</style> </head> <body> <div class="con">
<input type="text" name="username">
<!--HTML中可以自定义属性，例如下面的self_define-->
<input self_define="attr" type="text" name="username" value="自定义">
<input type="file">
<input type="password">
<input type="text">
<input type="button">
<input type="checkbox">
<input type="reset">
</div> </body>
</html>
4 CSS中常用的属性
(1)背景颜色/背景图片/图片移动
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> <style>
/*此样式相当于只显示图片的部分区域，根据需要进行调整，其中height和width相当于孔的大小，
background-position属性表示移动图片的坐标，图片左上角坐标为(0,0)，此处的移动是移动图片，
即background-position的坐标为图片左上角的坐标*/
.c{
background-image: url("test.jpg");
height: 80px;
width:80px;
background-repeat: no-repeat;
background-position: -24px -130px;
}
</style>
</head> <body> <div style="background-color: red">
背景颜色
</div> <!--背景图片-->
<div style="background-image: url(favicon.ico);height: 80px;" >
</div> <!--div为块级标签，默认会铺满选中的区域，加上background-repeat:no-repeat表示不重复-->
<div style="background-image: url(favicon.ico);height: 80px;background-repeat: no-repeat" >
</div> <div class="c"> </div> </body>
</html>
(2)border边框(border-top/bottom/left/right表示上下左右边框，如果只写border，则是上下左右边框)
<!--border:有3个参数：线的粗细、线的样式（实线、点、虚线等）、线的颜色-->
<!--第1种：线的粗细为1像素、实线、红色，边框的高度为10px-->
<div style="border:1px solid red;height:10px"></div>
<!--分割线-->
<div style="height: 20px"></div>
<!--第2种：线的粗细为1像素、点、蓝色，边框的高度为10px-->
<div style="border:1px dotted blue;height:10px"></div>
<!--分割线-->
<div style="height: 20px"></div>
<!--第3种：线的粗细为1像素、虚线、紫色，边框的高度为10px-->
<div style="border:1px dashed purple;height:10px"></div> <!--在左边设置边框，像素为3px、实线、红色-->
11 <div style="border-left:3px solid red">左边框</div>
(3)内边矩与外边距
<!--使用内外边距时，一般先设置边框border-->
<margin可以水平居中,即margin:0 auto；>
1 <h2>外边距，自己本身大小不变，改变自己外部离其它标签的边距，margin-top/bottom/left/right分别表示上下左右，如果单独写成margin则表示上下左右</h2>
<div style="border: 1px solid red;height: 70px;">
<div style="background-color:green; height:50px; margin-top:10px; margin-left:10px; margin-right:10px; margin-bottom:20px;">
</div>
</div> <h2>内边距，增加自己本身的大小，padding-top/bottom/left/right分别表示上下左右，如果单独写成padding则表示上下左右</h2>
<div style="border: 1px solid red;height: 90px;">
<div style="background-color: green;height: 60px;padding-top: 10px;">
</div>
</div>
注：padding值的设置默认为顺时针(上右下左：padding-top/right/bottom/left)，在赋值的时候也可以直接<div style="padding:10px 20px 0 30px">,即表示上右下左的值
分别为10px/20px/0/30px；当赋值形式为<div style="padding:10px 20px">，即表示上下值为10px，左右值为20px。其它类似属性也可以类推
(4)display显示属性
<!--display为none时，内容将被隐藏不显示-->
<div style="display: none;">display</div>
<!--display为inline时，块级标签将变为内联标签-->
<div style="background-color:red;display:inline">display</div>
<!--display为block时，内联标签将变为块级标签-->
<a style="background-color:red;display:block">display</a>
(5)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>
(6)浮动(float)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
.w-letf{
width: 20%;
background-color: red;
height: 400px;
float: left;
}
.w-center{
width: 40%;
background-color: green;
height: 400px;
float: left;
}
.w-right{
width: 20%;
background-color: blue;
height: 400px;
float: left;
}
</style>
</head> <body> <div class="w-letf"></div>
<div class="w-center"></div>
<div class="w-right"></div> </body>
</html>
float属性补充：当在float的过程中，会覆盖掉父标签的样式，一般有两种方法去掉此种影响:第1种方法是在父标签中设置高度属性；第2种方法是利用clear：both属性
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> </head> <body>
<!--第1种方法：<div style="background-color: red;height: 80px">此种方法不推荐-->
<div style="background-color: red">
<div style="float:left;">1111</div>
<div style="float:left;">2222</div>
<!--第2种方法:利用style的属性clear:both-->
<div style="clear: both"></div>
</div>
</body>
</html>
(7)position位置属性
fixed属性
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> </head> <body>
<!--定义页面大小-->
<div id="top" style="height:2000px; background-color: #ddd;">
<!--固定位置position为fixed，此处的固定位置是相对与浏览器而言的，不管滑动条如何拖动，“返回顶部”都固定在浏览器右下角-->
<a style="position:fixed; right:30px;bottom:30px;">返回顶部</a>
<!--结合锚一起使用，当点击“返回顶部”时，页面定位到顶部，但“返回顶部”依然在浏览器的右下角-->
<a style="position:fixed; right:30px;bottom:30px;"href="#top">返回顶部</a>
</div>
</body>
</html>
relative和absolute属性—它们必须结合使用
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> </head> <body>
<!--定义页面大小-->
<div id="top" style="height:2000px; background-color: #ddd;">
<!--此时内容“abcd”位置相对于下面定义的框固定，不管如何操作，“abcd”都固定在框的右下角-->
<div style="position: relative;background-color: beige;height:300px;width:300px;margin:0 auto;">
<h1>修改数据</h1>
<a style="position: absolute;right: 0px;bottom:0px">abcd</a>
</div>
</div>
</body>
</html>
| position属性 fixed——固定浏览器窗口的位置 relative——相对位置 absolute——绝对位置，必须结合relative一起使用，否则无任何意义(relative标签是包含absolute标签的) <div style="position:relative;"> <div style="position:absolute;"></div> </div> |
(8)overflow属性(overflow:auto当内容超过高度时,会出现滚动条；overflow:hidden当内容超过高度时,超过内容会被隐藏掉)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title> </head> <body>
<div style="overflow:auto;height:100px;background-color: red">
aaaaaa <br/>
aaaaaa <br/>
aaaaaa <br/>
aaaaaa <br/>
aaaaaa <br/>
aaaaaa <br/>
aaaaaa <br/>
</div>
</body>
</html>
(9)body属性(1个页面只有1个body标签)
<!DOCTYPE html>
<html lang="en"> <head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*页面居中，消除页面默认的属性，也可以body标签中设置：<body style="margin:0 auto;"></body>*/
body{
margin:0 auto;
}
</style> </head> <body>
<div style="height:100px;background-color: red"> </div>
</body>
</html>
(10)透明度
| img { opacity:0.4; filter:alpha(opacity=40); /* 针对IE8以及更早的版本 */ } IE9/Firefox/Chrome/Opera/Safari使用属性opacity来设定透明度。opacity属性能够设置的值从0.0到1.0。值越小，越透明。 IE8以及更早的版本使用滤镜 filter:alpha(opacity=x)。x能够取的值从0到100。值越小，越透明。 |
(11)z-index(标签的分层处理)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
测试文本
<input type="button" value="提交数据"/>
<div style="height:2000px"></div> <!--设置div标签，位置为固定，占据整个屏幕(上下左右皆为0，设置透明度为0.1，
这样看见底层的标签"测试文本")-->
<div style="z-index:1;position:fixed;top:0;right:0;bottom:0;left:0;
background-color:black;opacity:0.2;"></div> <div style="z-index:2;position:fixed;left:50%;top:50%;margin-left:-140px;
margin-top:-120px;">
<!--设置正在加载的图片-->
<img src="123.gif">
<!--设置编辑框，即模态对话框-->
<input />
<input />
<input />
<input />
</div>
</body>
</html>
(12)简单的页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> <style>
body{
margin:0 auto;
} .pg-header{
height: 48px;
background-color: blue;
} .pg-body .menu{
background-color: red;
position: absolute;
top:50px;
left: 0;
bottom: 0;
width: 200px;
overflow: auto;
} .pg-body .content{
background-color: aqua;
position: absolute;
top:50px;
left: 210px;
bottom: 0px;
right: 0px;
overflow: auto;
}
</style>
</head>
<body>
<div class="pg-header"></div>
<div class="pg-body">
<div class="menu">
<a>目录1</a> <br/>
</div>
<div class="content">
内容
<div style="height:500px">
<h1 style="color:red">标题1</h1>
</div>
</div>
</div>
</body>
</html>
参考资料：
http://www.cnblogs.com/luotianshuai/p/5167944.html
http://www.cnblogs.com/yangyinghua/p/5159156.html
web前端基础——初识CSS的更多相关文章
- Web前端基础(4):CSS(一)
1. CSS介绍 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的角度负责页面样式. JS:JavaScript .从交互的角度描述页面行为 ...
- Web前端基础(5):CSS(二)
1. 盒模型 在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型. 盒模型有两种:标准模型和I ...
- web前端基础——初识HTML
1 HTML概念 HTML(Hypertext Markup Language)即超文本标记语言,是网页的描述语言.它其实是一种描述网页的标准,它通过给需要描述的内容加上标签,浏览器按照HTML语言的 ...
- web前端基础——初识HTML DOM编程
1 HTML DOM编程概述 文件对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理HTML的标准编程接口.由于HTML文档被浏览器解析后就是一棵DOM树,要改 ...
- web前端基础——初识JavaScript
1 JavaScript概述 JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果.通常JavaScript脚 ...
- 前端基础 & 初识CSS
CSS介绍 CSS(Cascading Style Sheet,层叠样式表)定义如何显示HTML元素.l 当浏览器读到一个样式表,它就会按照这个样式表来对文档进行格式化(渲染). CSS语法 每个CS ...
- Web前端基础(6):CSS(三)
1. 定位 定位有三种:相对定位.绝对定位.固定定位 1.1 相对定位 现象和使用: 1.如果对当前元素仅仅设置了相对定位,那么与标准流的盒子什么区别. 2.设置相对定位之后,我们才可以使用四个方向的 ...
- 进击的Python【第十三章】：Web前端基础之HTML与CSS样式
进击的Python[第十四章]:Web前端基础之HTML与CSS样式 一.web框架的本质 众所周知,对于所有的Web应用,本质上其实就是一个socket服务端,用户的浏览器其实就是一个socket客 ...
- web前端基础知识及快速入门指南
web前端基础知识及快速入门指南 做前端开发有几个月了,虽然说是几个月,但是中间断断续续的上课.考试以及其它杂七杂八的事情,到现在居然一直感觉自己虽然很多前端的知识很眼熟,却也感觉自己貌似也知识在门口 ...
随机推荐
- Hadoop1.2.1 启停的Shell 脚本分析
停止shell脚本以此类推.
- 开发环境eclipse for Mac 下的常用快捷键汇总(基本参照Win系，将Ctrl换为Command)
最近迁移开发环境到Mac下,在豆瓣看到一个常用快捷键,去掉废话直接上干货 Command + O:显示大纲 Command + 1:快速修复 Command + D:删除当前行 Command + O ...
- 第十六篇：Linux系统编程中环境变量的使用
前言 在 UNIX Like 系统中,存有各类系统/应用程序的环境变量,可通过修改之改变系统/应用程序的执行效果:除此之外,用户还可以定义自己的环境变量,供自己写的程序使用. 本文将说明如何在程序中设 ...
- GitHub Pages站点官方宣布开始使用HTTPS
导读 数百万人依靠GitHub Pages,将其作为他们的网站主机,除此之外,还有数百万人每天访问这些网站.为了更好地保护到GitHub Pages站点的通讯,也为了鼓励在因特网上更广泛地采用HTTP ...
- Javascript实现图片的预加载的完整实现
图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作.今天我们将来实现一个完整 ...
- string整理
/* scanf是c语言的,而string是c++的类,所以不能使用scanf直接读入 */ #include<cstdio> #include<string>//注意支持库 ...
- js 中 this 的指向问题
高程上的大前提: 1.this 对象是在运行时基于函数的执行环境绑定的:在全局函数中,this 等于window,而当函数被作为某个对象的方法调用时,this 等于那个对象:不过,匿名函数的执行环境具 ...
- Piwik网站访问统计软件安装
Piwik是一个PHP和MySQL的开放源代码的Web统计软件. 它给你一些关于你的网站的实用统计报告,比如网页浏览人数, 访问最多的页面, 搜索引擎关键词等等… Piwik拥有众多不同功能的插件,你 ...
- HDU 2157 How many ways??（简单线性DP | | 矩阵快速幂）
题目链接 http://acm.hdu.edu.cn/showproblem.php?pid=2157 这道题目很多人的题解都是矩阵快速幂写的,矩阵快速幂倒是麻烦了许多了.先给DP的方法 dp[i][ ...
- 巨蟒python全栈开发flask14项目开始6
1.App未读消息显示 2.发起好友请求 3.同意拒绝好友请求 4.玩具社交圈 1.App未读消息显示 2.发起好友请求 3.同意拒绝好友请求 4.玩具社交圈