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多线程系列--“JUC集合”10之 ConcurrentLinkedQueue
概要 本章对Java.util.concurrent包中的ConcurrentHashMap类进行详细的介绍.内容包括:ConcurrentLinkedQueue介绍ConcurrentLinkedQ ...
- JS中的原型继承机制
转载 http://blog.csdn.net/niuyongjie/article/details/4810835 在学习JS的面向对象过程中,一直对constructor与prototype感到很 ...
- HTML5移动Web开发（十）——在浏览器中启动手机原生应用
用户可以在浏览器中启动移动设备的原生应用程序,比如地图.电话.短信等,具体能够启动哪些应用程序,这取决于该移动设备上哪些原生应用是否允许从浏览器启动. 新建ch02r05.html <!doct ...
- Network - SSH
SSH(Secure Shell) https://wiki.wireshark.org/SSH SSH 协议与OpenSSH详解 http://my.oschina.net/liting/blo ...
- Web 前端开发精华文章集锦（jQuery、HTML5、CSS3）【系列二十】
<Web 前端开发精华文章推荐>2013年第八期(总第二十期)和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HTML5 和 C ...
- 2.SDK目录结构和adb工具及命令介绍
安卓开发学习笔记 1.安卓开发之环境搭建 2.SDK目录结构和adb工具及命令介绍 1.SDK目录介绍: ******************************** add-ons:Androi ...
- 使用log4j配置不同文件输出不同内容
敲代码中很不注意写日志,虽然明白很重要.今天碰到记录日志,需要根据内容分别输出到不同的文件. 参考几篇文章: 感觉最详细:http://blog.csdn.net/azheng270/article/ ...
- .NET Core爬坑记 1.0 项目文件
前言: 之所以要写这个系列是因为在移植项目到ASP.NET Core平台的过程中,遇到了一些“新变化”,这些变化有编译方面的.有API方面的,今天要讲的是编译方面的一些问题.我把它们整理后分享出来,以 ...
- web前端学习笔记---实现雪花飘落的效果
看了javascript网页特效实例大全中的图片飘下的效果实例,觉得值得动手学习下. 就把图片改成雪花图,完成一个雪花飘下的效果. 并且,其中有些内容比较陈旧了,那么就学者改掉吧. 包括: 1.对le ...
- MySQL 快速导入大量数据 资料收集
一.LOAD DATA INFILE http://dev.mysql.com/doc/refman/5.5/en/load-data.html 二. 当数据量较大时,如上百万甚至上千万记录时,向My ...