2014年辛星解读css第二节
第一节我们简单介绍了一下CSS的工作流程,我相信读者会有一个大体的认识,那么接下来我们将会深入的研究一下CSS的细节问题,这些问题的涉及将会使我们的工作更加完好。
*************凝视************
1.CSS也是须要凝视的。凝视中的内容不会被解释运行,它也和C语言一样。用/*开头,用*/结尾。当中的内容会被当做凝视。我们想怎么写就怎么写。
2.以下给个样例:
p{ color: green;
/* 我们在这里书写凝视
* 辛星CSS,与博客园共同成长
*/
font-size: 14px;
text-align: center;}
****************选择器**************
1.我们第一节就介绍了CSS的基础语法了。当中就说到了选择器,在CSS中有两类略微特殊点的选择器,我们称之为id选择器和class选择器。
2.先说id选择器,我们在HTML的元素中,每个元素都能够设置一个属性,该属性就是id。然后我们在CSS中使用#号外加这个id的数值型来作为选择器,后面的声明就和普通的写法一样。
3.光说是有点抽象的,我们以下给个样例:
首先新建一个my.html文件,书写内容例如以下:
<html>
<head>
<title>2014年辛星CSS教学夏季版</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<p id = "para">辛星CSS,分享知识,传递温情</p>
</body>
</html>
然后我们在my.css中这么写就能够了:
#para{ color: green;
font-size: 14px;
text-align: center;}
上面我们就通过在HTML文件里指定了p标签的id,然后在css文件里依据id来设置了它的属性。
4.所谓id,那就是唯一的,在同一个HTML文件里,不能有两个id都是para。这样会导致混乱。我们能够用以下的class来解决。
5.假设说id是用来描写叙述单个的样式,那么。class则用于描写叙述一组标签的样式,class能够用在多个元素中使用。
6.id使用#号来加上属性值,而class则使用.号加上属性值,因为两者的使用及其的类似,我就不赘述了,想必聪明的读者已经能够仿造出来了。
*************伪类***************
1.CSS中的选择器是比較灵活的,比較经常使用的还有伪类的说法。以下我来解释一下。伪类的使用官方给出的语法格式是这种:
selector:pseudo-class {property:value;}
2.什么意思呢,就是selector就是选择器嘛。而pseudo-class就是对应的伪类了。后面跟的就是它的属性和值。
3.事实上伪类的最经典的样例之中的一个就是超链接,比方我们能够书写例如以下代码:
首先是创建一个my.html文件。代码例如以下:
<html>
<head>
<title>2014年辛星CSS教学夏季版</title>
<link rel="stylesheet" type="text/css" href="my.css">
</head>
<body>
<a href="#">博客园辛星</a>
</body>
</html>
然后就是my.css文件,代码例如以下:
a:link{color:red;}
a:visited{color: green;}
a:hover{color:blue;}
a:active{color:black;}
4.上面的css文件里我们就设置了当我们没有点击超链接的时候是红色的,当我们的鼠标经过的时候是蓝色的,当我们的鼠标点击它而又没有松开的时候。它是黑色的,当我们訪问过的连接,它会呈现绿色。
5.并且a:hover必须被放到a:link和a:visited之后。才会有效。
6.而a:active必须被当道a:hover之后,才有效。
7.我们还能够让伪类与上面提到的class选择器一起用。我感觉不是非经常常使用。就不介绍了。
8.另一个child伪类。可是对浏览器的兼容性上不好。因此也不介绍了。
9.此外还有伪元素的说法,假设大家做的事英文站点,还是比較重要的,可是对于汉语站点来说,意义不大,因此也就不说了。
*************其它选择器*********
1.CSS还支持几种其它的选择器类型,第一种就是后代选择器,比方我们把a插入到一个div里面去。那么能够用div a这种选择器来表示a的样式。
2.另外一种就是子元素选择器,它会选择父元素中的全部子元素。比方div>a,即它和第一个的差别就是把空格换成了大于号。
3.另外的相邻兄弟选择器和普通相邻兄弟选择器,整体感觉意义不大,仅仅会添加记忆量和学习的难度。有用性并不高。
4.CSS还支持属性选择器。可是因为也是对浏览器的兼容性上不好。也就不介绍了。
5.还有所谓的群组选择器的说法,是指几个选择器使用同一个样式,它用逗号把各个选择器进行区分,而且连接起来,就像我们C语言中函数的參数列表中的多个參数一样,演示样例:
p,td,li{color: red;}
6.还有通用选择器的说法,就是用一个*表示,例如以下代码:
p*{color: red;}
会把全部的段落的颜色都设置为红色。
***************小结************
1.本小节我们讲述了CSS选择器和凝视。
2.CSS经常使用的选择器就是标签选择器、id选择器、class选择器和伪类选择器,其它选择器的方式都能够用上面这几种方式来搞定。
2014年辛星解读css第二节的更多相关文章
- 2014年辛星解读css第一节
CSS是Cascading Style Sheets的缩写.即层叠样式表,它用于表现HTML的样式,即HTML仅仅是去写该网页有哪些内容,至于怎样去表现它们,由CSS去定制. ************ ...
- 2014年度辛星解读css第四节
接下来的这一节我计划解说的是超链接和列表的样式,然后我们做出一个导航栏出来,事实上导航栏是很常见的,可是我们这里做得这个有点并不那么完好,等我们学完了css之后再完好它. ************** ...
- 2014年辛星解读css第五节
本小节我们解说css中的"盒模型".即"box model",它通经常使用于在布局的时候使用,这个"盒模型"也有人成为"框模型&q ...
- 2014年辛星解读css第六节
这一节我们就要讲到布局了,事实上布局本身特别简单.可是要合理的布好局就不那么简单了,就像我们写文章一样.写一篇文章非常easy,可是要写一篇名著就非常难了,这须要我们扎实的功底和对文学的理解,可是.千 ...
- 2014年辛星解读css第三节
第二节我们讲述的差点儿全是CSS的选择器,那么以下这一节我们来讲一下CSS的颜色和文本的一些东西,尽管我对调色不大敏感.可是对于颜色还是比較感兴趣的. *********CSS中的颜色******** ...
- 2014年辛星解读Javascript之DOM之冒泡和捕获
上篇博客提到了Javascript事件绑定函数的三个參数.第一个是一个event.第二个是一个function.第三个是一个布尔变量.它用于指定事件传递的顺序,分为冒泡和捕获两种方式,接下来我们将揭开 ...
- 2014年辛星解读Javascript之DOM高速入门
在Javascript的知识中,有一个所谓的DOM.即文档对象模型,我们能够通过它来訪问HTML文档的元素,当网页被载入的时候,浏览器会去创建DOM,有了这个DOM.我们能够使用Javascript去 ...
- 2014年辛星解读Javascript之用DOM动态操纵HTML元�
关于DOM,我们了解了能够用DOM操纵HTML的一些属性和样式,还能够为HTML元素绑定事件等等,那么接下来,我们将涉及到用DOM来动态的创建.删除HTML等一些操作,我的核心思路还是重实战,因此,代 ...
- 2014年辛星解读Javascript之DOM之事件及其绑定
我们通过DOM的事件能够对HTML的事件作出反应.就像我们用其它编程语言写GUI一样,那么HTML包含哪些事件呢?以下是几个常见的样例,比方网页已经完毕记载,图像完毕载入,鼠标移动到元素上方.输入文字 ...
随机推荐
- linux php全能环境一键安装,小白福利!
phpStudy Linux版&Win版同步上线 支持Apache/Nginx/Tengine/Lighttpd/IIS7/8/6 phpStudy for Linux 支持Apache/Ng ...
- CSS——text-indent
在h1标签里套入a标签并写上文字,有利于seo,但是文字如何隐藏呢?一般都是a标签变成内联块并首行缩进为负值. <!DOCTYPE html> <html lang="en ...
- 14、Scala类型参数
1.泛型类 2.泛型函数 3.上边界Bounds 4.下边界Bounds 5.View Bounds 6.Context Bounds 7.Manifest Context Bounds 8.协变和逆 ...
- java实例1
1.满天星星 import java.awt.*; public class xinxin { public static void main(String[] args) { Frame w = n ...
- 使用ScriptManager服务器控件前后台数据交互
前台页面信息: <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebFor ...
- Django - 数据获取
Django - 数据获取 1.radio值获取 2.checkbox获取 3.select 获取 select 获取值,需要根据前端multiple来获取,get or getlist; 4.上传文 ...
- mapbox-gl 使用ArcGISServer 发布的栅格切片
最近使用mapbox 进行数据化展现.刚好用到了超图平台在去三维系统,顺带就用超图平台发布了栅格切片,用来做底图,但是超图平台是试用的许可,栅格切片有SuperMap 的水印,实在不雅观. 在网上搜索 ...
- java的四舍五入及取整
四舍五入用 Math.round(double a): 向上取整用 Math.ceil(double a): 向下取整用 Math.floor(double a):
- Yii2开发技巧 使用类似闭包的方式封装事务
在控制器中执行事务的时候,一般的代码如下: $transaction = Yii::$app->db->beginTransaction(); try { //一些业务代码 $transa ...
- Python - 面对对象(其他相关,异常处理,反射,单例模式,等..)
目录 Python - 面对对象(其他相关,异常处理,反射,等..) 一.isinstance(obj, cls) 二.issubclass(sub, super) 三.异常处理 1. 异常处理 2. ...