1.The customising link

We can change the link's style when we move our pointer on the link like that:

1.1 The " text-decoration:none "means remove the underline !

a:hover{
color: black;
background-color: red;
text-decoration: none;
}

1.2 Why should we customise links?

To emphasise to the user where the links are.

1.3 What is the purpose of a CSS selector?

It connects a set of CSS properties to things in the HTML document.

1.4 a:hover is a CSS selector to select links that the user is hovering over and we can set a different set of style properties for the link when the user moves the mouse over it.

 

2.Layout Control

U can set  classes on anything, and actually if u define the class u can use the class to a different tags .

And we can set any bit text we want. Especially when we use the span class which allow us to cut in .

like that :

.indent {
margin-left: 50px;
}
.gap_bellow{
margin-bottom: 100px;
}
<h1 class = "gap_bellow"><span class = "indent">This is my first page!</span>This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!This is my first page!</h1>

3.CSS Media Queries

Responsiveness can be implemented in CSS with something called CSS Media Queries.

1. The code means let the body's background color be green when brower's window has minimum width 1000px  

And we call the " min-width : 1000px " test !

@media(min-width:1000px){
body{
background: green;
}
}

2016 - 1 - 25 CSS初步 (二)的更多相关文章

  1. 2016 - 1 - 24 CSS初步

    1.The difference between CSS and HTML HTML document is that it specities the content of the page. An ...

  2. 一起看看2016中国第三届CSS开发者大会有哪些大咖演讲

    中国第三届CSS开发者大会于2016年12月17日在广州举办.由W3C.w3ctech.前端圈主办.本次大会我们将邀请行业内知名讲师,与大家共聚广州,畅聊CSS. 快捷报名通道:http://www. ...

  3. 前端总结·基础篇·CSS(二)视觉

    前端总结系列 前端总结·基础篇·CSS(一)布局 前端总结·基础篇·CSS(二)视觉 前端总结·基础篇·CSS(三)补充 前端总结·基础篇·CSS(四)兼容 目录 一.动画(animation)(IE ...

  4. css入门二-常用样式

    css入门二-常用样式总结 基本标签样式 背景色background-color 高度height; 宽度width; 边框对齐以及详细设定举例 width/*宽度*/: 80%; height/*高 ...

  5. 基本CSS布局二

    基本CSS布局二------基本页面布局二 /*主面板样式*/ #container { width:100%; margin:0px auto;/*主面板DIV居中*/ } /*顶部面板样式*/ # ...

  6. 2016.8.25 JavaScript入门之二

    1.字符串中,引用字符串:要用/"转换: 例如:var myStr="I am a \"double quoted\" string inside \" ...

  7. 2016/2/25 html+css学习资源

    html+css学习资源 1.Position is Everything,一个描述和展示在各种浏览器中发现的bug,并提供css解决方法的网站,顶! 2.一个国外的网页设计论坛 3.http://c ...

  8. 2016/1/25 多线程 作业 方法一 继承Thread 方法二 实现Runnable 多线程笔记

    /* * 1,尝试定义一个继承Thread类的类,并覆盖run()方法, * 在run()方法中每隔100毫秒打印一句话.*/ package Stream; //方法一 继承Thread 实现多线程 ...

  9. HTML/CSS初步了解

    一.CSS是什么? 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS为HTML标记语言提供了一种样式描述,定义了其中元素的显示 ...

随机推荐

  1. 使用Jmeter进行HTTP接口测试

    这几天学习了一下使用Jmeter进行HTTP接口测试,这个也是后面进行性能测试的基础吧 安装运行请自行搜索,下载地址:http://jmeter.apache.org/download_jmeter. ...

  2. 实现标记datagridview标题并导出Excel的功能

    最近在学习winform,国庆前被布置了一个小任务,好不容易大致做出来了,决定记录下来,以此加深印象. 先说下需求:这是一个导入话单标记后并导出的功能 1. 选择excel文件 2. 定义字段   日 ...

  3. Java 根据当前时间获取明天、当前周的周五、当前月的最后一天

    private Date getDateByType(Date date, Integer type) { Calendar calendar = Calendar.getInstance(); ca ...

  4. c#解压文件

    今天做了一个异步上传文件后再直接解压的一个东西.到解压这找了好多资料,做了1个多小时,贴出来,给自己张张记性. HttpPostedFileBase imgFile = Request.Files[0 ...

  5. C# winform中读取HTML代码

    这次的任务是在winform建立一个表格,表格第一列需要绑定数据,表格的第一行也需要绑定数据,而其他的单元格数据则是根据对应的行数据和列数据进行提取. 询问过后,需要在后台拼接HTML代码实现这个功能 ...

  6. Linux安装node

    以Ubuntu为例 1.apt-get update 2.apt-get install python gcc make g++ 3.wget https://nodejs.org/dist/v4.3 ...

  7. java动手动脑和课后实验型问题

    1.以下代码的输出结果是什么?为什么会有这个结果? int[] a = { 5, 7, 20 }; System.out.println("a数组中的元素:"); // 循环输出a ...

  8. java时间戳

    1.时间戳的定义 时间戳是指文件属性里的创建.修改.访问时间. 数字时间戳技术是数字签名技术一种变种的应用.在电子商务交易文件中,时间是十分重要的信息.在书面合同中,文件签署的日期和签名一样均是十分重 ...

  9. 一个简单的P2P传输程序

    写了一个简单的P2P传输程序,在P2P的圈子中传输文件,不过为了简便,这个程序没有真正的传输文件,只是简单的判断一下文件的位置在哪里.这个程序可以处理当有一个peer闪退的情况,在这种情况下,剩下的p ...

  10. Codeforces Round #383 (Div. 2) 解题报告

    本来是打算所有半夜进行的CF都不参加的,但看到这次比赛22:35就开始,还是没有忍住orz--晚上总是不够清醒,做题思维不如白天活跃,低级错误常常出现.出的比较早的C因为一个书写错误有点小bug,在比 ...