CSS再学
css的注释
/*.......*/
直接在html代码中写css
<p style="color: rebeccapurple;font-size: 18px">Hao</p>
css代码写在当前文件中
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
p{
color: red;
font-size: 19px;
}
</style>
</head>
<body>
<p>Hao</p>
</body>
css写在外部单独文件中
<link rel="stylesheet" href="base.css" type="text/css">这样导入
id选择器（#）
<style type="text/css">
#set{
color: red;
font-size: 60px;
}
</style>
</head>
<body>
<span id="set">选择</span>
</body>
</html>
class和id选择器的区别
相同点：可以应用于任何元素
不同点：
- ID选择器只能在文档中使用一次。
- 可以使用类选择器列表方法为一个元素同时设置多个样式
子选择器(>)
用于选择指定标签元素下的第一代子元素。
包含后代选择器
.first span{color:red;}，后代中所有的span标签都受影响
>：只影响第一代子元素
空格：所有后代都影响
通用选择器
* {color:red;}选定html中所有标签
伪类选择器
a:hover{color:red;}
一般用于a标签，使鼠标滑过变颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
a:hover{
color: red;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">BaiDu</a>
</body>
</html>
放在BaiDu上，颜色变成红色。
分组选择符
h1,span{color:red;}相当于：
h1{color:red;} span{color:red;}
继承
CSS的某些样式是具有继承性的，那么什么是继承呢？继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。比如下面代码：如某种颜色应用于p标签，这个颜色设置不仅应用p标签，还应用于p标签中的所有子元素文本，这里子元素为span标签。
p{color:red;} <p>三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
特殊性
有的时候我们为同一个元素设置了不同的CSS样式代码，那么元素会启用哪一个CSS样式呢?我们来看一下面的代码：
p{color:red;} .first{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
p和.first都匹配到了p这个标签上，那么会显示哪种颜色呢？green是正确的颜色，那么为什么呢？是因为浏览器是根据权值来判断使用哪种css样式的，权值高的就使用哪种css样式。
下面是权值的规则：
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/
层叠
我们来思考一个问题：如果在html文件中对于同一个元素可以有多个css样式存在并且这多个css样式具有相同权重值怎么办？好，这一小节中的层叠帮你解决这个问题。
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。
如下面代码:
p{color:red;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
最后 p 中的文本会设置为green，这个层叠很好理解，理解为后面的样式会覆盖前面的样式。
所以前面的css样式优先级就不难理解了：
内联样式表（标签内部）> 嵌入样式表（当前文件中）> 外部样式表（外部文件中）。
重要性
我们在做网页代码的时，有些特殊的情况需要为某些样式设置具有最高权值，怎么办？这时候我们可以使用!important来解决。
如下代码：
p{color:red!important;} p{color:green;} <p class="first">三年级时，我还是一个<span>胆小如鼠</span>的小女孩。</p>
这时 p 段落中的文本会显示的red红色。
注意：!important要写在分号的前面
这里注意当网页制作者不设置css样式时，浏览器会按照自己的一套样式来显示网页。并且用户也可以在浏览器中设置自己习惯的样式，比如有的用户习惯把字号设置为大一些，使其查看网页的文本更加清楚。这时注意样式优先级为：浏览器默认的样式 < 网页制作者样式 < 用户自己设置的样式，但记住!important优先级样式是个例外，权值高于用户自己设置的样式。
css一些应用
body{font-family:"宋体";} 字体
body{font-size:12px;color:#666} 字号（大小），颜色
p span{font-weight:bold;} 粗体
p a{font-style:italic;} 斜体
p a{text-decoration:underline;} 下划线
.oldPrice{text-decoration:line-through;} 删除线
p{text-indent:2em;} 缩进
p{line-height:1.5em;} 行间距（行高）
h1{letter-spacing:50px;} 字间距
h1{ text-align:center; }
h1{ text-align:left; }
h1{ text-align:right; }
元素分类
块状元素：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
内联元素：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>
内联元素：
<img>、<input>
块级元素
特点：
1. 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
2. 元素的高度、宽度、行高以及顶和底边距离都可设置。
3. 元素宽度在不设置的情况下，是它本身父容器的100%，除非设置一个宽度。
设置display:block就是将元素显示为块级元素
内联元素
display:inline将元素设置为内联元素
特点：
1. 和其他元素都在一行上
2. 元素的高度、宽度及顶部和底边边距不可设置
3. 元素的宽度就是它包含的文字或图片的宽度，不可改变
内联元素
内联：同时具备内联元素、块状元素的特点，代码display:inline-block。只有<img>/<input>两个标签
特点：
1. 和其他元素都在一行上
2. 元素的高度、宽度、行高及上下边距都可设置
盒子模型
边框：
div{ border:2px solid red; }
相当于：
div{ border-width:2px; border-style:solid; border-color:red; }
1. border-style（边框样式）常见的有：dashed（虚线）| dotted（点线）| solid（实线）
2. border-width（边框宽度）
3. border-top:1px solid red; 只设置上边框 4. border-right:1px solid red; 只设置右边框 5. border-left:1px solid red; 只设置左边框
6. div{border-bottom:1px solid red;} 只设置下边框
高度和宽度：
css定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素的实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右边界+右边框+右边界
填充：
元素内容和边框之间可以设置距离的，称之为“填充”。padding
边界：
margin设置外边距
padding世内边距，margin是内边距
css布局模型
布局模型建立在盒子模型的基础之上。
css包含3种基本的布局模型：flow、layer、float
流动模型（flow）：
流动（flow）是默认的网页布局模式。也就是说网页在，默认状态下的HTML网页元素都是根据流动模型来分布网页内容的。
有如下的特征：
1. 块级元素都会在所处的包含元素自上而下按顺序垂直延伸分布，因为在默认情况下，块状元素的宽度都是100%，实际上，块级元素都会以行的形式占据位置。
2. 在流动模式下，内联元素都会在所处的包含元素内从左到右水平分布。
总结：html默认使用flow，流动，所有的内容都是应用在此之上。
浮动模型（float）：
任何元素在默认情况下是不能浮动的，但可以使用CSS定义浮动，如div、p、table、img等元素都可以被定义为浮动。
层模型：
层模型有三种形式：
1. 绝对定位（position:absolute）
2. 相对定位（position:relative）
3. 固定定位（position:fixed）
绝对定位:
positon:absolute,这条语句的作用是将元素从文档中拖出来，然后使用left、top、right、bottom属性相对于最接近的一个具有定位属性的父包含块进行绝对定位。如果不包含块，则相对于body元素，即相对于浏览器窗口。
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;} <div id="div1"></div>
相对定位：
positon:relative，通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static（float）方式生成一个元素（并且元素像层一样浮动了起来），然后相对于以前的位置移动。
#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div>
<body> <div id="div1"></div><span>偏移前的位置还保留不动，覆盖不了前面的div没有偏移前的位置</span></bod<body>
总结：相对定位，就是虽然目标移动了，但是以前的位置还是留着。
固定定位:
position:fixed，与绝对定位（absolute）类似，但是它相对移动的坐标是视图（屏幕内的网页）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条而变化，因此它始终固定于窗口内视图的某个位置。导航条就是用这种固定方法。
Relative与Absolute组合使用
小伙伴们学习了12-6小节的绝对定位的方法：使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？答案是肯定的，当然可以。使用position:relative来帮忙，但是必须遵守下面规范：
1、参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div>
从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。
2、参照定位的元素必须加入position:relative;
#box1{ width:200px; height:200px; position:relative; }
3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
#box2{ position:absolute; top:20px; left:30px; }
这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>相对参照元素进行定位</title>
<style type="text/css">
div{border:2px red solid;}
#box1{
width:200px;
height:200px;
position:relative;
}
#box2{
position:absolute;
top:20px;
left:30px;
}
/*下面是任务部分*/
#box3{
width:200px;
height:200px;
position:relative;
}
#box4{
width:99%;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div id="box1">
<div id="box2">相对参照元素进行定位</div>
</div>
<h1>下面是任务部分</h1>
<div id="box3">
<img src="http://img.mukewang.com/541a7d8a00018cf102000200.jpg">
<div id="box4">当我还是三年级的学生时是一个害羞的小女生。</div>
</div>
</body>
</html>
盒模型代码简写，css尽量较少代码量
1. margin:10px 10px 10px 10px;
简写：margin:10px;
2. margin:10px 20px 10px 20px;
简写：margin:10px 20px;
3. margin:10px 20px 30px 20px;
简写：margin:10px 20px 30px;
4. p{color:#000000;}
简写：p{color: #000;}
5. p{color: #336699;}
简写：p{color: #369;}
6.
body{ font-style:italic; font-variant:small-caps; font-weight:bold; font-size:12px; line-height:1.5em; font-family:"宋体",sans-serif; }
简写：
body{ font:italic small-caps bold 12px/1.5em "宋体",sans-serif; }
颜色值
1. 英文命令颜色
p{color:red;}
2. RGB颜色
p{color:rgb(133,45,200);}
3. 十六进制颜色
p{color:#00ffff;}
长度值（px）
css样式设置小技巧
水平居中
html代码：
<body> <div class="txtCenter">我想要在父容器中水平居中显示。</div> </body>
css代码：
<style> .txtCenter{ text-align:center; } </style>
水平居中定宽块状元素
html代码：
<body> <div>我是定宽块状元素，哈哈，我要水平居中显示。</div> </body>
css代码：
<style> div{ border:1px solid red;/*为了显示居中效果明显为 div 设置了边框*/ width:200px;/*定宽*/margin:20px auto;/* margin-left 与 margin-right 设置为 auto */} </style>
水平居中总结
不定宽度的块状元素有三种方法居中：
1. 加入table标签
2. 设置display:inline方法：与第一种类似，显示类型设为行内元素，进行不定宽元素的属性设置
3. 设置position.relative和left:50%；利用相对定位的方式，将元素向左移50%，达到居中的效果。
html代码：
<div> <table> <tbody> <tr><td> <ul> <li>我是第一行文本</li> <li>我是第二行文本</li> <li>我是第三行文本</li> </ul> </td></tr> </tbody> </table> </div>
css代码：
<style>table{ border:1px solid; margin:0 auto; }</style>
第二种：
html代码：
<body> <div class="container"> <ul> <li><a href="#">1</a></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> </ul> </div> </body>
css代码：
<style> .container{ text-align:center;}/* margin:0;padding:0（消除文本与div边框之间的间隙）*/ .container ul{ list-style:none; margin:0; padding:0; display:inline;}/* margin-right:8px（设置li文本之间的间隔）*/.container li{ margin-right:8px; display:inline; } </style>
垂直居中，保持height和line-height高度一致，height是该元素高度，line-height行间距指在文本中行与行之间的基线间的距离。
如下代码：
<div class="container"> hi,imooc! </div>
css代码：
<style> .container{ height:100px; line-height:100px;background:#999; } </style>
父元素高度确定的多行文本、图片等的竖直居中的方法有两种：
（重要方法）方法一：使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle。
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用。下面看一下例子：
html代码：
<body><table><tbody><tr><td class="wrap"><div> <p>看我是否可以居中。</p> </div></td></tr></tbody></table></body>
css代码：
table td{height:500px;background:#ccc}
因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。
除了上面讲到的插入table标签，可以使父元素高度确定的多行文本垂直居中之外，本节介绍另外一种实现这种效果的方法。但这种方法兼容性比较差，只是提供大家学习参考。
在 chrome、firefox 及 IE8 以上的浏览器下可以设置块级元素的 display 为 table-cell（设置为表格单元显示），激活 vertical-align 属性，但注意 IE6、7 并不支持这个样式, 兼容性比较差。
html代码：
<div class="container"> <div> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> <p>看我是否可以居中。</p> </div> </div>
css代码：
<style> .container{ height:300px; background:#ccc; display:table-cell;/*IE8以上及Chrome、Firefox*/ vertical-align:middle;/*IE8以上及Chrome、Firefox*/ } </style>
隐性改变display类型
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：
2. float : left 或 float:right
简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block（块状元素）的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。
如下面的代码，小伙伴们都知道 a 标签是 行内元素 ，所以设置它的 width 是 没有效果的，但是设置为 position:absolute 以后，就可以了。
<div class="container"> <a href="#" title="">进入课程请单击这里</a> </div>
css代码
<style> .container a{ position:absolute;width:200px; background:#ccc; } </style>
CSS再学的更多相关文章
- 【C】 01 - 再学C语言
“C语言还用再学吗?嵌入式工程师可是每天都在用它,大家早就烂熟于心,脱离语言这个层面了”.这样说不无道理,这门古老的语言以其简单的语法.自由的形式的而著称.使用C完成工作并不会造成太大困扰,所以很少有 ...
- [Python]再学 socket 之非阻塞 Server
再学 socket 之非阻塞 Server 本文是基于 python2.7 实现,运行于 Mac 系统下 本篇文章是上一篇初探 socket 的续集, 上一篇文章介绍了:如何建立起一个基本的 sock ...
- 再学Java 之 interface的成员变量
前言:最近在学多线程,写“哲学家就餐问题(Dining Philosophers)”的时候,需要定义一个全局的变量,即哲学家的人数.常用的做法是在其中一个类中定义一个static final的变量,然 ...
- js遍历添加栏目类添加css 再点击其它删除css
//js遍历添加栏目类添加css 再点击其它删除css $(".radio-group .ckselect").each(function(index) { $(this).cli ...
- 再学ajax--第二天 | 基于php+mysql+ajax的表单注册、登录、注销
写在前面 ajax学习到了第二天,这次是用第一天封装的ajax函数,后端使用了php+mysql实现基本的注册,登录,注销. php是我前几个月get到的技能,我已经学习到了面向对象,知道各修饰符的含 ...
- 再学python类（终结篇）
续写 初学python类,这几天吃坏东西了,拖着虚弱的身躯写的.有些乱请各位看官海涵. 声明:本人编程新手,还在学习中.所表述的东西都是基础语法之类的,分享我的学习笔记.还望多多指点,我一定虚心接受. ...
- 他学习一年Python找不到工作，大佬都说你别再学Python了！
引言: 都说,滴水穿石非一日之功.然而有些人即使奋斗一辈子也比不上别人一年,别人学习一年比不得你学习一个月.其中缘由,有些人看了大半辈子还没看明白. 即使Python这么火,为何你学习一年的Pytho ...
- Java编码方式再学
一直以来对编码方式对了解不是很深入.建议读下这几篇博文 学点编码知识又不会死:Unicode的流言终结者和编码大揭秘 编码研究笔记 这几篇博文上回答了内心存在的一些问题,这些问题可能也是大家经常遇到的 ...
- 不要再学 JSP 了，学 SpringBoot + Thymeleaf + Vue吧
老读者就请肆无忌惮地点赞吧,微信搜索[沉默王二]关注这个在九朝古都洛阳苟且偷生的程序员.本文 GitHub github.com/itwanger 已收录,里面还有我精心为你准备的一线大厂面试题. 读 ...
随机推荐
- 本地dns服务器到底是什么？有没有精确的概念？
1.本地dns到底是什么?为什么有时候看到的本地dns的ip是局域网类型的ip? 有的人说本地dns的概念——————是运营商提供的dns, 有的人也说,是你的局域网里的路由器一类的设备里的dns. ...
- PowerDesigner生成sql脚本时去掉双引号并把字段名设为大写
Database菜单—Edit Current RDBMS 找到Script---sql—Format--- CaseSensitivityUsingQuote,把它设置为NO 这样再用sql pre ...
- 2016.1.22 利用LINQ实现DataSet内多张DataTable关联查询操作(目前未发现太大价值)
DataSet ds = new DataSet(); DataTable t1 = DBFactorySingleton.GetInstance().Factory.GetDataTable(sql ...
- java 字符串和集合互相转换
今天在写项目的时候遇到一个问题,就是要把得到的一个集合转换成字符串,发现 import org.apache.commons.lang.StringUtils; 有这么一个简单的方法:String s ...
- 什么是Scatter/Gather？
scatter/gather指的在多个缓冲区上实现一个简单的I/O操作,比如从通道中读取数据到多个缓冲区,或从多个缓冲区中写入数据到通道: scatter(分散):指的是从通道中读取数据分散到多个缓冲 ...
- 【275】◀▶ Python 控制语句说明
参考:Python循环语句 01 for 循环语句. 02 while 循环语句. 03 if...else 选择语句. 04 continue 执行循环语句中的下一条循环. 05 ...
- scp命令 跨服务器传输
scp命令用于在Linux下进行远程拷贝文件的命令,和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器,而且scp传输是加密的.可能会稍微影响一下速度.当你服务器硬盘变为只读read onl ...
- RxAndroid基本使用1
1,基本使用 public class MainActivity extends ActionBarActivity implements View.OnClickListener, View.OnT ...
- 使用Post进行Http通信
--------------siwuxie095 有道翻译官网:http://fanyi.youdao.com/ 找到官网页面下方的 有 ...
- php的变量引用详解
<?php class SimpleClass { // property declaration public $var = 'a default value'; // method decl ...