css综述
1.css全称为层叠样式表，他主要时定义html内容在浏览器中的显示样式，如文字大小，颜色，字体加粗等
2。使用css样式的一个好处就是通过定义某种样式，使得不同网页位置有着统一的文字，字号等
3.css代码样式由选择符和声明符组成而声明符又由属性和值组成
p{
font-size：12px；
}
1.css样式的基本知识
①.内联样式
②.嵌入样式
③.外部样式
对于内联样式，css样式表就是把css代码直接写到原有的html标签中
<p style="color:red">这里文字是红色</p>
对于嵌入样式，就是把css写在style中（比较常用）
<style type="text/css">
span{
color:red;
}
</style>
对于外部css样式就是把css代码写在一个单独的外部文件中，这个文件以“.css"命名，通过link引入
<link href="base.css" rel=:"stylesheet" type="text/css“/>
对于三种方法的优先级
为内联式>嵌入式>外部式
2.css的选择器
在原来的html属性中提到过
3.继承
CSS的某些样式是具有继承性的，继承是一种规则，它允许样式不仅应用于某个特定html标签元素，而且应用于其后代。
border属性不能继承
4.特殊性
标签的权值为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*/
5.层叠
层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用
6.我们可以用!important来设置优先级
下面的例子中p就会被设置为红色
p{color:red!important;} p{color:green;}
三年级时，我还是一个胆小如鼠的小女孩。
7.CSS格式化排版
1.关于文字的各种现实属性在html标签文章中
2.用line-height属性对行高进行调整（2em代表的是段落间距为2倍）
3.用letter-spacing用来设置文字间距和字母间距
用word-spacing用来设置英语单词之间的间距
4.若想为块状元素中的文本，图片设置为居中样式要用text-align进行设置
8.CSS盒模型
1.元素分类
在css中，html中的标签元素大体分为三种基本类型：块状元素，内联元素（行内元素），内联块状元素；
常用块状元素：
<div>,<p>,<h>,<ol>,<ul>,<table>,<address>,<blockquote>,<form>,<dl>
常见内联元素
<a>,<span>,<br>,<I>,<em>,<strong>,<label>,<q>,<var>,<cite>,<code>
常见的内联块状元素
<img>,<input>
2.块状元素
块状元素可以又display:block进行转化
1.每个块状元素都独占一行
2.元素的高度宽度，行高，以及顶，和底边距都可以设置
3.元素的宽度在不设置的情况下都是100%
3.内联元素
:内联元素可以用display:inline;
1.和其他元素在一行上
2.元素的高度，宽度，及顶部底部的边距是不可设置
2.元素的宽度就是它包含的文字或图片的宽度，不可改变
4.内联块状元素
内联块状元素就是同时具备内联元素和块状元素共同的特性
1.和其他元素都在一行上
2.元素的高度宽度和·行高都可以进行设置
5.元素div的border，padding，margin
1、border-style（边框样式）常见样式有：
dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如:
border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为：
thin | medium | thick（但不是很常用），最常还是用象素（px）。
4.同样可以使用下面代码实现其它三边(上、右、左)边框的设置：
border-top:1px solid red;
border-right:1px solid red;
border-left:1px solid red;
5.盒模型宽度和高度和我们平常所说的物体的宽度和高度理解是不一样的，css内定义的宽（width）和高（height），指的是填充以里的内容范围。
因此一个元素实际宽度（盒子的宽度）=左边界+左边框+左填充+内容宽度+右填充+右边框+右边界。
9.css代码简写
外边距(margin)、内边距(padding)和边框(border)设置上下左右四个方向的边距是按照顺时针方向设置的：上右下左。具体应用在margin和padding的例子如下：
margin:10px 15px 12px 14px;/*上设置为10px、右设置为15px、下设置为12px、左设置为14px*/
1、如果top、right、bottom、left的值相同，如下面代码：
margin:10px;
2、如果top和bottom值相同、left和 right的值相同，如下面代码：
margin:10px 20px;
3、如果left和right的值相同，如下面代码：
margin:10px 20px 30px;
4.关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。
5.字体也可进行简写
10.css单位和值
1.颜色
在网页中的颜色设置是非常重要，有字体颜色（color）、背景颜色（background-color）、边框颜色（border）等，设置颜色的方法也有很多种：
1、英文命令颜色
前面几个小节中经常用到的就是这种设置方法：
p{color:red;}
2、RGB颜色
这个与 photoshop 中的 RGB 颜色是一致的，由 R(red)、G(green)、B(blue) 三种颜色的比例来配色。
p{color:rgb(133,45,200);}
每一项的值可以是 0~255 之间的整数，也可以是 0%~100% 的百分数。如：
p{color:rgb(20%,33%,25%);}
3、十六进制颜色
这种颜色设置方法是现在比较普遍使用的方法，其原理其实也是 RGB 设置，但是其每一项的值由 0-255 变成了十六进制 00-ff。
p{color:#00ffff;}
2.单位
1.px像素
2.em,1em=14px;
3.百分比
11.css布局模型
在网页中，元素有三种布局模型：
1、流动模型（Flow）
2、浮动模型 (Float)
3、层模型（Layer）
1.对于流动模型
块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100% 流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。
2.对于浮动模型
浮动模型就是float类属性
3.层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
如何让html元素在网页中精确定位，就像图像软件PhotoShop中的图层一样可以对每个图层能够精确定位操作。CSS定义了一组定位（positioning）属性来支持层布局模型。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)
网友评论