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内容在浏 ...
随机推荐
- js提取正则中的字符串
代码如下: var results = data.match(/(start=').*?(')/); if (results != null) { console.log(data[0]); }
- Yii的学习(4)--Active Record
摘自Yii官网:http://www.yiiframework.com/doc/guide/1.1/zh_cn/database.ar 在官网原文的基础上添加了CDbCriteria的详细用法. 虽然 ...
- AngularJS in Action读书笔记6(实战篇)——bug hunting
这一系列文章感觉写的不好,思维跨度很大,原本是由于与<Angularjs in action>有种相见恨晚而激发要写点读后感之类的文章,但是在翻译或是阐述的时候还是会心有余而力不足,零零总 ...
- SQL Server安全（7/11）：使用跨数据库所有权链接（Cross-Database Ownership Chaining）的跨数据库安全
在保密你的服务器和数据,防备当前复杂的攻击,SQL Server有你需要的一切.但在你能有效使用这些安全功能前,你需要理解你面对的威胁和一些基本的安全概念.这篇文章提供了基础,因此你可以对SQL Se ...
- 使用Node.JS访问Hyperledger Fabric的gRPC服务
在即将正式发布的Hyperledger Fabric SDK 1.0中,Hyperledger Fabric通过gRPC提供服务接口以取代现有的REST API.本文介绍了如何使用Node.JS访问H ...
- C#多线程技术总结（同步）
二.串行(同步): 1.lock.Monitor--注意锁定的对象必需是引用类型(string类型除外) 示例: private static object syncObject = new obje ...
- MVC中的默认Model绑定者DefaultModelBinder
一.题外话 接续上一篇: MVC中Action参数绑定的过程 public IModelBinder DefaultBinder { get { if (this._defaultBinder == ...
- 【Swift学习】Swift编程之旅（三）
元组(tuples) tuples是将多个单一的值组合为一个复合的值.它可以包含任何类型的值,而不需要都是相同类型. 一.元组的创建 1. let http404error = (,"NOT ...
- C#开源
商业协作和项目管理平台-TeamLab 网络视频会议软件-VMukti 驰骋工作流程引擎-ccflow [免费]正则表达式测试工具-Regex-Tester Windows-Phone-7-SDK E ...
- html5掷骰子的小demo
代码如下: <!DOCTYPE> <html> <title>柯乐义</title> <head> <script> var l ...