CSS基础

一　　CSS显示模式

 

　　1，标签级别

　　CSS将HTML标签作了分类：文本级，容器级。

　　文本级标签只能嵌套文字，图片等信息。经常使用的文本级标签包含：span，p，em，img等。

　　容器级标签能够嵌套其余全部标签。经常使用的包含：div，ul，ol，table等全部结构化语义标签都是容器级，好比header，footer，nav，section等。

　　

　　2，元素分类

　　CSS将全部HTML元素分为三大类：块级元素，行类元素，行内块级元素。

　　块级元素：独占一行；若是没有设置宽度，将继承父元素的宽度；若是设置了宽高，将按照设置值显示。

　　行内元素：在一行内共存。不能设置宽高（margin和padding依然可使用）。默认按内容大小显示。

　　行内块级：不会独占一行，但能够设置宽高。

　　CSS对元素的这种分类，咱们称之为显示模式。

　　

　　3，显示模式转换

　　CSS使用display属性设置元素的显示模式。display属性有3个值：inline（行内），block（块级），inline-block（行内块级）。

 

二　　CSS选择器

　　

　　1，经常使用选择器

　　a)，通配符

　　　　CSS使用(*)星号表示通配符选择器，选中所全部标签。

1 *{font-size:14px;}

　　b)，特别重要

　　　　CSS能够在属性值后添加!important强调该属性，该属性必定会被应用到HTML元素上，不论是否还设置了其余样式。

1 p{color:red !important;}

　　c)，标签选择器

　　　　直接使用HTML标签名做为选择器。

1 p{}/*选中全部p元素*/

　　d)，类选择器

　　　　CSS使用(.)点表示类选择器。

1 .wrap{}/*选中全部class为wrap的元素*/

　　e)，id选择器

　　　　CSS使用(#)井号表示id选择器。

1 #firstname{}/*选中id为firstname的元素*/

　　f)，后代选择器

　　　　CSS使用( )空格表示后代选择器，左边表示父元素，右边表示后代元素。

1 div p{}/*选中div中的全部后代p*/

　　g)，子选择器

　　　　CSS使用(>)大于表示自选择器，左边表示父元素，右边表示儿子元素。

1 div>p{}/*选中div中的全部儿子p*/

　　h)，兄弟选择器

　　　　CSS使用(+)加号表示兄弟选择器。

1 div+p{}/*选中紧接在div以后的兄弟p元素*/

　　i)，属性选择器

　　　　CSS使用([])表示属性选择器。

1 input[name]/*选中全部带有name属性的元素。*/
2 input[name='ren']/*选中全部name属性值为ren的元素。*/

　　j)，并列选择器

　　　　上面的选择器直接连在一块儿，不适用任何符号隔开，便是CSS中的并列选择器。

1 div.wrap{}/*选中calss为wrap的p元素。*/

　　h)，组选择器

　　　　上面的选择器使用逗号隔开，便是CSS中的组选择器。

1 p,.wrap,div,#firstname{}/*同时选中p、class为wrap、div、id为firstname的元素。*/

　　i)，伪类选择器

　　　　伪类选择器的形式是：普通选择器+冒号+关键字，伪类用于修饰普通选择器，经常使用来设置普通选择器选中元素的特殊状态。

1 div:hover{}/*d用于设置div被鼠标滑过期的样式。*/
2 p:first-child{}/*选中在兄弟元素中做为第一个元素的p元素。*/

　　　　CSS还有不少其余的伪类选择器，详情请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes。

　　j)，伪元素选择器

　　　　伪元素选择器的形式和伪类类似，不一样点在于，它使用双冒号链接关键字。伪元素用来对普通选择器选中的元素的特殊部分单独设置样式。它会把该元素的一部分当作一个完整的元素看待，从而为其设置单独的样式。

1 p::first-line{}/*选中全部p元素的第一行文本。*/
2 p::before{}/*建立一个元素做为p的第一个子元素，该元素默认是行内元素，可使用content属性添加内容。*/

　　　　更多伪元素请参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-elements。

　　虽然W3C规范要求使用双冒号来表示伪元素，但大多数浏览器依然支持使用单冒号表示伪元素，为了避免产生混淆，推荐你们使用双冒号，加以区分。

　　

　　2，CSS选择器权重

　　　　！important：infinity。

　　　　内联样式：1000。

　　　　id选择器：100。

　　　　class||属性||伪类：10。

　　　　标签：1。

　　　　通配符：0。

　　请注意：权重值不是十进制数，极可能是256进制的。这意味着即便你使用11个calss属性选中一个元素，它的优先级仍是不及一个id选择器。

　　一般，咱们并不须要经过权重计算来判断css选择器的优先级，按照如下方式就能够简单快速的判断：　　

　　！important > 内联样式 > id > （class || 属性选择器）> 标签 >通配符。

　　只有在使用并列选择器时，才须要计算权重值来断定优先级，若是权重值同样，那么就按照谁写在后面谁优先级高的原则。

 

三　　CSS属性

　　

　　1，文本类属性

　　　　文本样式类：

经常使用属性	含义	可选值
font-style	字体样式	italic(斜体)，normal(正常的,默认值）
font-size	字体尺寸	全部css支持的
font-family	字体类型	各类字体名称
font-weight	字体粗细	normal，100-900，bold(粗)，bolder(更粗)，lighter(细)
text-decoration	文本装饰	none(无)，underline(下划线)，overline(上划线)，line-through(删除线)
color	文本颜色	grb值，16进制值，单词
text-shadow	文本阴影	须要四个值：1，水平偏移量；2，垂直偏移量；3，模糊半径（0表示无阴影）；4，影音颜色
text-transform	文本转换	none(不转换)，uppercase(转换为大写)，lowercase(转换为小写)，capitalize(首字母转换为大写)，full-width(转换为全角)

 

　　　　文本布局类：

经常使用属性	含义	可选值
text-align	文本对齐方式	left(左对齐)，right(右对齐)，center(居中)
line-height	行高	全部css支持的
letter-spacing	字间距	全部css支持的
word-spacing	单词间距	全部css支持的
text-indent	首行缩进量	全部css支持的
text-overflow	溢出处理	clip(不显示截断内容,默认值），ellipsis(以省略号显示被截断内容，须要配合white-space：nowrap使用才有效)
white-space	空白和换行处理	normal(合并,可换行)，nowrap(合并，不换行)，pre(保留)

 

　　2，盒子类属性

　　display：设置盒子是否显示。

1 div{
2  display:none;/*彻底隐藏，不占用空间*/
3     /*display:block;块级元素*/
4     /*display:inline;行内元素*/
5     /*display:inline-block;行内块级*/
6 }

　　content：width和height，分别定义盒子内容区域的宽高。

1 p{
2  width:200px;
3  height:200px;
4 }

　　padding：环绕在content区域以外的就是内边距（或者叫填充）。

1 p{
2  padding-top:10px;
3  padding-right:20px;
4  padding-bottom:30px;
5  padding-left:40px;
6     /*padding:10px 20px 30px 40px;简写方式，顺时针方向*/
7     /*padding:20px; 若是四周padding值相同，可这样简写*/
8 }

　　border：环绕在padding和content区域以外的便是边框。

 1 p{
 2     border-width:5px;/*边框宽度*/
 3     border-style:solid;/*边框类型，solid实线，dotted圆点虚线，dashed虚线*/
 4     border-color:black;/*边框颜色*/
 5     /*border:5px solid black;简写方式*/
 6     /*单独设置某个方向边框的方式与padding相似*/
 7     /*border-top-color:red;也能够经过该方式单独设置某一边的单个属性*/
 8     border-radius:5px;/*四角的圆角*/
 9     /*圆角也是一个复合属性，你能够单独设置某一个，例如左上角的圆角：border-top-left-radius*/
10 }

　　margin：元素最外层的包裹层就是margin区域。使用时请注意margin的折叠问题（塌陷），前一篇《CSS概述》中有详细介绍。

1 p{
2  margin:10px 20px 30px 40px;
3     /*margin设置方式同padding*/
4 }    

　　事实上CSS有两种盒子模型：标准盒模型，怪异盒模型。你可使用box-sizing设置CSS以哪一种模式解析元素。

1 div{
2  box-sizing:content-box;/*默认值,标准模型*/
3     /*box-sizing:border-box;怪异模型*/
4 }

　　他们的惟一区别是：标准盒模型解析width，height属性为内容区域的宽高，怪异模型则解析为content+padding+border区域。

　　

　　3，内容溢出

　　咱们已经知道，CSS将全部元素解析为一个个盒子，并能够经过设置width和height属性规定盒子内容区的大小。那么，当内容过多，盒子大小不足以容纳这么多内容时，CSS是怎么处理的呢？实际上，CSS为了不数据丢失（用户没法查看全部内容），会在超出设置的范围以外显示剩余内容，进而可能影响到其余元素的显示，这种现象咱们称之为内容溢出。

　　通常有两种状况会致使内容溢出，一种是子元素的尺寸大于父元素的尺寸，另外一种是文本超出行内块级元素的尺寸。你能够经过设置父元素的overflow属性来控制CSS如何处理溢出的状况。

1 div{
2  overflow:hidden;/*隐藏超出部分*/
3     /*overflow:scroll;显示滚动条*/
4     /*overflow:scroll-x/scroll-y;仅上下或左右方向有滚动条*/
5     /*overflow:auto;通常交给浏览器决定*/
6 }

 

四　　背景

　　

　　1,颜色

　　背景是修饰HTML经常使用的方式，CSS中使用background属性设置背景属性。

1 p{
2  backrgound-color:orange;/*背景颜色*/
3 }

　　

　　2，图片

　　除了能够设置背景颜色外，CSS还能够设置背景图片。

1 p{
2  backrgound-img:url('url');/*背景图片*/
3  background-repeat:no-repeat;/*不平铺(重复)*/
4     /*该属性还有几个可选值：repeat：水平垂直都平铺（默认值）；repeat-x：只在x轴平铺；repeat-y：只在y轴平铺*/
5 }

　　请注意，若是背景图像和颜色都被设置了，通常状况下图像会覆盖颜色。

　　你还能够经过设置background-size来调整背景图片的尺寸，以适应网页的须要。

1 p{
2  background-size:100px 200px;/*指定具体尺寸*/
3     /*若是你不知道具体尺寸，那么你可使用关键字，让浏览器帮你设置大小。
4　　　　cover：保证图片的宽高比，放大图片以填满整个区域，可能致使图片部份内容溢出。
5　　　contain：保证图片不溢出，尽可能填满整个区域，可能致使部分区域没法被图像覆盖。*/
6 }

　　

　　3，定位

　　在图像不须要填满整个区域的时候，你可使用background-position来定位图片，让其显示在你想要的位置，须要配合background-repeat:no-repeat使用。

　　在学习如何定位以前，咱们应该先了解一下CSS中的坐标系：

　　

 　　坐标原点即盒子的左顶点，水平向右为x轴正方向，垂直向下为y轴正方向。

1 p{
2  background-img:url('url');
3  backrgound-repeat:no-repeat;
4  background-position:50px 50px;/*设置水平和垂直偏移量*/
5 }

　　偏移量能够是正值，也能够是负值，单位可使px，百分比，em等。

　　

　　4，关联

　　一般，若是咱们设置了背景图片，且网页内容较多，出现滚动条时，当咱们滑动滚动条，背景图片也会随着网页一块儿滚动。若是你想让背景图片固定不动，即便滑动滚动条，也只是内容上下或左右移动，那么你能够经过设置背景与滚动条的关联方式来达到目的。

1 div{
2  background-img:url('url');
3  background-attachment:fixed;
4     /*另外一个取值scroll是该属性的默认值，即图片随滚动条一块儿滚动*/
5 }

 

　　5，简写

　　若是你想一次设置多个背景相关的属性，其实你大可没必要像上面那样。上面介绍的背景相关属性能够简写为：

1 /*background:颜色 图片 平铺方式 关联方式 定位方式*/ 2 div{
3  background:red url('url') no-repeat attachment relative;
4 }

 

　　6，渐变

　　你必定在网页上见过渐变色，它是那么的炫酷，如今，你也能够经过css定义本身的渐变色了。

　　使用linear-gradient()函数建立线性渐变。

　　函数须要3个或多个参数，第一个表示渐变方向（能够是关键字或角度deg），第二个表示开始颜色，第三个表示结束颜色，若是在后面添加了更多的颜色，那么这些颜色都会在渐变过程当中出现。

1 p{
2  background:linear-gradient(to right,red,blue);
3     /*建立一个从左到右的，从红色到蓝色的渐变*/
4 }
5 p{
6  background:linear-gradient(to bottom right,red,blue);
7     /*建立一个从左上角到右下角的，从红色到蓝色的渐变*/
8 }

　　使用radial-gradient()函数建立径向渐变。

　　函数须要3个或多个参数，第一个参数定义渐变的圆点，默认值为center，即元素的中心点，你也能够经过具体尺寸或关键字（top，right，bottom，left，center或他们的组合）指定其位置；第二个参数定义径向渐变的形状（circle(圆)，ellipse(椭圆，默认值)）和大小。而后是起止颜色，同线性渐变。你也能够给每一个颜色后面添加一个百分比（用空格隔开），表示该颜色在整个渐变区域中的占比。

1 p{
2  background:radial-gradient(top center,circle,orange 70%,purple 30%);
3     /*定义一个以盒子上边缘中间点为圆点，橘色占70%，紫色占30%的圆形径向渐变。*/
4 }

　　因为渐变在CSS3才被引入，全部如今各大浏览器对它的支持各不相同，而且语法也与标准语法有必定出入，在使用时请必定做重考虑他们的兼容性问题。更多渐变知识请参考https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Using_CSS_gradients。