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内容在浏 ...
随机推荐
- java之Maven配置和springMvc的简单应用
初始springMvc这个框架,非常的陌生,而且幸好公司是通过maven这个代码管理工具,可以随时添加依赖.解决了很多问题在以后深入开发中. 项目结构: 通过结构中,pom.xml这个文件其实就说明这 ...
- Spring MVC 学习总结（六）——Spring+Spring MVC+MyBatis框架集成
与SSH(Struts/Spring/Hibernate/)一样,Spring+SpringMVC+MyBatis也有一个简称SSM,Spring实现业务对象管理,Spring MVC负责请求的转发和 ...
- Django快速开发之投票系统
https://docs.djangoproject.com/en/1.8/intro/tutorial01/ 参考官网文档,创建投票系统. ================ Windows 7/1 ...
- 决战JS
经过这几日的学习,测试和摸索,算是了解了一些关于javascript 的相关知识吧.学习过程中做出了一些小DEMO,现总结一下实现这些DEMO的基本思路,如有不妥或更为简便的方法,还希望大神拍砖,共同 ...
- javascript学习总结（二）：DOM常用方法。
1 获取元素节点 a document.getElementById(id),它返回一个对象.是Document对象特有的函数,它还有这些方法: b element.getElementsByTagN ...
- Android 2.x中使用actionbar - Actionbarsherlock
1. 范例说明 从Android 3.0开始,Android引入了ActoinBar,不得不说3.0之前android的标题栏确实比较丑,并且还没有任何功能. 之前很多应用的顶部栏很多都是仿苹果的,比 ...
- SQL常用数据库结构升级语句
修改视图 --SQL Server 2005 GO IF EXISTS (SELECT * FROM sys.views WHERE object_id = OBJECT_ID(N'[dbo].[e_ ...
- 使用junit测试用例
通常只会使用junit测试非main方法,在我眼里就是程序入口实现而已.今天,发现原来可以测试类. 针对mybatis练习.在需要测试的UserDaoImpl类上右键,新建一个junit case,位 ...
- 第16/24周 SQL Server 2014中的基数计算
大家好,欢迎回到性能调优培训.上个星期我们讨论在SQL Server里基数计算过程里的一些问题.今天我们继续详细谈下,SQL Server 2014里引入的新基数计算. 新基数计算 SQL Serve ...
- 阅读《LEARNING HARD C#学习笔记》知识点总结与摘要一
本人有幸在Learning Hard举行的整点抢书活动<Learninghard C#学习笔记>回馈网友,免费送书5本中免费获得了一本<LEARNING HARD C#学习笔记> ...