CSS学习总结（一）
不知道大家对CSS的印象是怎么样的呢？也许有些模糊，也许根本不清楚。其实它跟我们密切相关，一旦我们浏览网页，都在与它打交道。没有它，我们看不到现在如此丰富多彩的网页效果。那么它到底是什么呢？又该如何使用呢？
一、什么是CSS？
CSS (Cascading Style Sheets) 层叠样式表。采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。 只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。 目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了。但出于考虑浏览器的兼容性问题，不同的浏览器可能需要不同的前缀。
二、CSS能做什么？
1、简化代码。以前也许有些网页效果时需要用到脚本或其他图片等来实现一些特别的效果。但CSS却能只用简单的几条语句就能搞定。如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。
2、高效。我们通过一个CSS文件，就能控制整个网页风格。只要修改了CSS中的文件，整个站点的网页都会随之改变。这样的好处是大大减少了前端人员的开发工作量，提高工作量。
3、多终端适应。CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。
三、不同浏览器对应的前缀
| 前缀 | 浏览器 |
|
-webkit |
chrome和safari |
|
-moz |
firefox |
|
-ms |
IE |
|
-o |
opera |
四、CSS语法结构
CSS的语法结构由三部分组成：选择符、属性、值。
选择符{属性:值;}
注：属性和值被冒号分开,分号结束，而且是英文状态下冒号与分号。
说明
选择符：通常是需要改变样式的 HTML 元素。
属性：是您希望设置的样式属性
值：每个属性有一个值。
<style type="text/css">
p { background-color:#cccccc;}
</style>
在上面例子中，主要看中间的一行代码。意思是将p段落的背景颜色设置为灰色。其中p为选择符，background-color为属性，#cccccc为值。
五、如何引入CSS
1、行内引用
行内引用是指将CSS样式编码直接写在HTML 标签中的style属性里。 注意这种方式的引入CSS，是不需要写选择器的。
例：
<body>
<h2 style="color: #0000FF;font-size="10px">标题2</h2>
<h3 style="color: red;">标题3</h3>
</body>
标题2
标题3
2、页内引用
页内引用作为页面中的一个单独部分，由<style></style>标签定位在<head></head>之中。
<head>
<style type="text/css">
h1{
background-color:blue;
}
a {color:red;}
</style>
</head>
3、页外引用
外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独 放在一个外部文件中，再由网页进行调用。如我创建了一个名为demo.css的文件。
<head>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>
/*demo.css文件内容*/
div
{
width:50px;
height:100px;
background-color:red;
}
注：三种引入CSS的方式是有优先级之分的。其排序是就近原则，即行内>页内>页外。也就是说用三种方式来对某元素进行设置时，最先引用的将会是离元素最近的那种方式。
六、CSS的注释
css 代码注释，以 /* 开始 */ 结束。如
/*p段落的设置*/
p{background-color:green;}
/*h1{font-size:10px;}*/
七、CSS选择符
1、通配选择符*
* 号表示所有的对象。凡是在html文件中的元素，都会被选中。
<html>
<head>
<style>
*{
background-color:blueviolet ;/*h2,h3,a，body均被选中，背景色都改变了*/
}
</style>
</head>
<body>
<h2 >标题2</h2>
<h3 >标题3</h3>
<a>这是个链接</a>
</body>
</html>
2、元素选择符
指以网页中已有的标签名作为名称的选择符。
<html>
<head>
<style>
h2{
background-color:blueviolet ;
}
h3{
font-family: "微软雅黑";
}
</style>
</head>
<body>
<h2 >标题2</h2>
<h3 >标题3</h3>
</body>
</html>
3、群组选择符
除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。这样一来，我们可以快速地对相关的元素进行整体调节。
<html>
<head>
<style>
h4,h5{
background-color:blueviolet ;
font-family: "微软雅黑";
}
</style>
</head>
<body>
<h4 >标题4</h4>
<h5 >标题5</h5>
</body>
</html>
4.关系选择符
关系选择符可以分为:
|
选择符 |
名称 |
描述 |
|
E F |
包含选择符 | 选择所有被E元素包含的F元素 |
|
E>F |
子选择符 | 选择所有作为E元素的子元素F |
|
E+F |
相邻选择符 | 选择紧贴在E元素之后F元素。 |
|
E~F |
兄弟选择符 | 选择E元素所有兄弟元素F。 |
（1）、包含选择符（E F）
<html>
<head>
<style>
div h3{
font-family: "微软雅黑";
background-color: blue;
} </style>
</head>
<body>
<div>
<h3>标题3</h3> /*div包含h3*/
</div>
</body>
</html>
（2）、子选择符(E>F)
<html>
<head>
<style>
ul li>a{
font-family: "微软雅黑";
font-size: 20px;
background-color: indianred;
}
</style>
</head>
<body>
<ul>
<li><a href=#>我是链接</a></li>
</ul>
</body> </html>
（3）、相邻选择符(E+F)
html>
<head>
<meta charset="utf-8" />
<title>我的网站</title>
<style>
h1+a{ /*选择与h1相邻的a*/
color: #0000FF;
}
</style>
</head>
<body>
<div>
<h1>这是大标题</h1>
<a href="#">点击链接</a>
<h2>我的网页</h2>
</div>
</body>
</html>
（4）、兄弟选择符(E~F)
<html>
<head>
<style>
p~p{
background-color: orangered;
}
</style>
</head>
<body>
<div>
<h1>标题1</h1>
<h2>标题2</h2>
<p>我是段落1</p>
<p>我是段落2</p>
</div>
</body>
</html>
CSS学习总结（一）的更多相关文章
- CSS学习笔记
CSS学习笔记 2016年12月15日整理 CSS基础 Chapter1 在console输入escape("宋体") ENTER 就会出现unicode编码 显示"%u ...
- css学习归纳总结（三） 转
原文地址:css学习归纳总结(三) 为文档添加样式的三种方法 行内样式 行内样式是写在HTML标签的style属性里的,比如: <p style="font-size: 12px;fo ...
- css学习归纳总结（二） 转
原文地址:css学习归纳总结(二) 标签与元素 <p>标签和p元素有什么区别呢?大多数时候他们表示的是同一样东西,但仍有细微的区别.<p>.<div>等指的是HTM ...
- css学习归纳总结（一） 转
原文地址:CSS学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00; } 3.属性 ...
- 【2016年特别福利】史上最全CSS学习资料大全
css学习篇 [2016年特别福利]史上最全CSS学习资料大全
- 【转】css学习专题-BFC
css学习专题-BFC 转自:原文链接:css学习专题-BFC文章目录 BFC:Block Formatting Context. BFC就是一种布局方式,在这种布局方式下,盒子们自所在的 conta ...
- css学习归纳总结
来源于:trigkit4 css学习归纳总结(一) 选择器的分组 CSS选择器分为 1.群组选择器 如:p, body, img, div{} 2.兄弟选择器 如:p + p { color:#f00 ...
- html+css学习总结
HTML与css学习总结 一:html概念 1. html是一种描述网页的语言,并不是计算机语言这要分清楚:标记语言是运用一套标记标签描述网页的: 注意点: ①标签字母都要小写,标签一般都是成对出现, ...
- HTML+CSS学习笔记 (7) - CSS样式基本知识
HTML+CSS学习笔记 (7) - CSS样式基本知识 内联式css样式,直接写在现有的HTML标签中 CSS样式可以写在哪些地方呢?从CSS 样式代码插入的形式来看基本可以分为以下3种:内联式.嵌 ...
- HTML+CSS学习笔记 (6) - 开始学习CSS
HTML+CSS学习笔记 (6) - 开始学习CSS 认识CSS样式 CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏 ...
随机推荐
- 清空文件下的SVN控制文件
代码如下,复制代码为txt文件,更改后缀为“.bat”,把文件放到,需要删除的文件的顶端文件夹内,点击执行. @echo on color 2f mode con: cols= lines= @REM ...
- [python]进阶学习之阅读代码
起因 最近在公司的任务是写一些简单的运营工具,因为是很小的工具,所以就用了github上面的一个开源项目flask-admin,可以省去很多的事情. 但是,这个开源项目是个人维护的项目,所以文档相对简 ...
- Windows Azure Platform Introduction (11) 了解Org ID、Windows Azure订阅、账户
<Windows Azure Platform 系列文章目录> 了解和掌握Windows Azure相关的基础知识是非常重要的. 问题1:什么叫做Org ID Org ID是Azure C ...
- oracle分页
sqlStmt = sqlCon.createStatement(); strSQL sql="select * from (select rownum rno,content from ( ...
- IIS各个版本中你需要知道的那些事儿
一.写在前面 目前市面上所用的IIS版本估计都是>=6.0的.所以我们主要以下面三个版本进行讲解 服务器版本 IIS默认版本 server2003 6.0 server2008 7.0 serv ...
- Spark API 之 combineByKey（一）
1 前言 combineByKey是使用Spark无法避免的一个方法,总会在有意或无意,直接或间接的调用到它.从它的字面上就可以知道,它有聚合的作用,对于这点不想做过多的解释,原因很简单, ...
- 从零开始学习jQuery (二) 万能的选择器
本系列文章导航 从零开始学习jQuery (二) 万能的选择器 一.摘要 本章讲解jQuery最重要的选择器部分的知识. 有了jQuery的选择器我们几乎可以获取页面上任意的一个或一组对象, 可以明显 ...
- 设置参数进行启动的Python脚本模板
# coding:utf-8 from optparse import OptionParser def migrate_func(): print 'You give the migrate arg ...
- ADO.NET基础--组成部分
第一部分:数据提供程序,在命令空间:System.Data.SqlClient下: Connection--连接数据库的通道 Command----命令执行对象 DataReader--数据读取器 D ...
- WinPhone学习笔记（四）——磁贴
对每个Windows Phone的使用者来说,给他们的第一印象就是大大小小的磁贴——Metro,本篇介绍的是Windows Phone的磁贴,提到的有开始菜单的磁贴,也有在App里面的磁贴. 开始菜单 ...