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内容在浏 ...
随机推荐
- Kruskal算法(三)之 Java详解
前面分别通过C和C++实现了克鲁斯卡尔,本文介绍克鲁斯卡尔的Java实现. 目录 1. 最小生成树 2. 克鲁斯卡尔算法介绍 3. 克鲁斯卡尔算法图解 4. 克鲁斯卡尔算法分析 5. 克鲁斯卡尔算法的 ...
- Java多线程系列--“JUC集合”01之 框架
概要 之前,在"Java 集合系列目录(Category)"中,讲解了Java集合包中的各个类.接下来,将展开对JUC包中的集合进行学习.在学习之前,先温习一下"Java ...
- UML简介
Unified Modeling Language (UML)又称统一建模语言或标准建模语言,是始于1997年一个OMG标准,它是一个支持模型化和软件系统开发的图形化语言,为软件开发的所有阶段提供模型 ...
- 【Java基础】RTTI与反射之Java
一.引言 很多时候我们的程序可能需要在运行时识别对象和类的信息,比如多态就是基于运行时环境进行动态判断实际引用的对象.在运行时识别对象和类的信息主要有两种方式:1.RTTI,具体是Class对象,它假 ...
- Windows Azure Cloud Service (43) 使用Azure In-Role Cache缓存(2)Dedicated Role
<Windows Azure Platform 系列文章目录> Update 2016-01-12 https://azure.microsoft.com/zh-cn/documentat ...
- git代码回滚：Reset、Checkout、Revert的选择
代码回滚:Reset.Checkout.Revert的选择 Zhongyi Tong edited this page on Dec 8, 2015 · 5 revisions Pages 19 Ho ...
- JAVA 设计模式 外观模式
用途 外观模式 (Facade) 为子系统中的一组接口提供一个一致的界面,此模式定义了一个高层接口,这个接口使得这一子系统更加容易使用. 外观模式是一种结构型模式. 结构
- Head插件——学习Elasticsearch的锋刃利器！
在学习Elasticsearch的过程中,必不可少需要通过一些工具查看es的运行状态以及数据.如果都是通过rest请求,未免太过麻烦,而且也不够人性化. 此时,head可以完美的帮助你快速学习和使用e ...
- winform控件
公共控件:1.Button: Enabled - 开始不可用 Visible -不可视(用来设置权限,取用户看不见的值)2.CheckBox .CheckListBox -复选框,复选框组 3.Com ...
- C语言学习003:Hello 指针
在C中使用指针的原因 避免副本 在函数调用的时候,可以只传递数据的引用,而不用传递数据 数据共享 两段代码可以同时操作同一份数据,而不是两份独立的副本 使用指针读写数据 #include <st ...