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 已收录,里面还有我精心为你准备的一线大厂面试题. 读 ...
随机推荐
- LTE-V2X车联网无线通信技术发展
2017年9月7日,国家制造强国建设领导小组车联网产业发展专项委员会第一次全体会议在北京召开.会议要求“要加大关键产品研发攻关力度,完善测试验证.技术评价.质量认证等公共服务平台,促进LTE-V2X车 ...
- HTTP：HTTP清单
ylbtech-HTTP:HTTP清单 1.返回顶部 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 作者:ylbtech出处:http://ylbt ...
- 杂项：C# 方法、属性杂项-01
ylbtech-杂项:C# 方法.属性杂项-01 1. 属性杂项返回顶部 1. public int ReadCnt { get; set; } 2.设置默认值 public int ReadCnt ...
- DBS：template
ylbtech-DBS: 1.返回顶部 1. 2. 2.返回顶部 3.返回顶部 4.返回顶部 5.返回顶部 6.返回顶部 7.返回顶部 8.返回顶部 9.返回顶部 ...
- javascript——对象的概念——函数 2 (内建函数与类型转换)
javascript 有许多内建函数,用于各种操作,以下为常用的内建方法. 1.parseInt(object,int):将输入的 int 进制的值 object 转换为 10 进制的数值: obje ...
- Ros疑问汇总
一.机器人描述文件三个: 机器人主体body文件: gazebo属性文件: 主文件 smartcar.urdf: 二.启动文件smartcar_display.rviz.launch:启动节点和模拟器 ...
- iOS 聊天界面
#import <UIKit/UIKit.h> @interface AppDelegate : UIResponder <UIApplicationDelegate> @pr ...
- libmad介绍
一.简介 libmad是一个开源mp3解码库,其对mp3解码算法做了很多优化,性能较好,很多播放器如mplayer.xmms等都是使用这个开源库进行解码的:如果要设计mp3播放器而又不想研究mp3解码 ...
- 51NOD1835 完全图
传送门 分析 令f(i,j)表示i点完全图有j个联通块的方案数. 讨论有i-1个点已经固定了,我们拉出一个代表元素然后讨论它的集合大小然后组合数算一下就可以了. $$ dp(i,j) = \sum_{ ...
- ZROI2018提高day1t2
传送门 分析 考场上看错了第一个条件,于是觉得是个简单贪心,随便取了每一个点的最大收益然后算了一下,就得了40pts...看来读对题很重要呀qwq.实际的正解是这样的:我们将每一个i与f[i]连一条边 ...