Web开发之CSS

1.CSS主要是用于定义HTML内容在浏览器内的显示样式，如文字大小、颜色、字体加粗等。

2.CSS语法：由选择符和声明两部分组成，声明又由属性和值组成。选择符表明将要使用样式规则的元素。声明中各个属性之间一：隔开。

3.CSS注释：注释语句语法是：/*注释语句*/

4.CSS分布位置为三类：内联式，嵌入式， 外部式。 (1)内联式是将代码直接插入现有的html的前标签中，格式为<p style="属性1；属性2">内容</p>(2)嵌入式是将同一类的

多个代码简写，语法为：<style type="text/css">p{属性对1；属性对2}</style>。(3)外部式是将CSS格式写在一个单独的文件中，并以.css保存。同时在head标签但不是style标签中使用link标签将文件链接到html文件中。语法为：<link href="名字.css" rel="stylesheet" type="text/css"/>。三种分布同时使用时遵循就近原则。

5.类选择器：语法：<p class="name"> </p>。在style标签中使用.name{属性1；属性2}设置属性。

6.ID选择器：与类选择功能相似，但ID选择器的优先级更高，且在一个html文档中只能使用一次。在建立是不再是.而是#。使用规则与class选择器相同。

7.子选择器：使用>表示，用于选择是定标签元素的第一代子元素，语法为：.类名>子标签名{属性1；属性2}。效果为拥有该类属性的标签的第一代子标签设置为大括号中的属性。

8.后代选择器：功能与子选择器相似，不同之处在于后代选择器作用的是所有的后代标签，而子选择器作用的是直接的第一后代元素。

9.通用选择器：符号*，作用于所有的标签元素。

10.伪类选择符：为标签的某种状态赋属性。但并不是所有的伪类选择选择符都能在所有的浏览器中兼容。

11.分组选择符：为多个标签设置同一个属性，相当于属性的合并简略写法。

12.继承是指将某些特定的样式不仅仅应用于单个标签而且将其应用它的所后代标签。有些样式是可以继承的但是有些是不可以继承的。

13.标签的权值问题：当对于一个标签进行多种类型的样式设置，具体最终实现哪一种样式需要根据最终权值的排序.普通标签格式权值为0；类选择器权值

为10。ID选择器的权值为100。继承的权值为0.1。当多个权值相等的样式设置一个标签时，应采取就近原则，即层叠。当需要为某一种样式设置最高权值时则可以用！important关键词。

14.在css中的字体设置时尽量不要设置不常用的字体，因为最终显示在用户电脑上的字体取决于本地电脑是否安装了该对相应的设置字体，如果没有安装则会

显示默认字体。

15.对文章段落设置的样式包括：字体样式，大小，颜色，斜体，加粗，下划线，删除线，行间距，段落缩进等等。

16.在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。

   常用的块状元素有：<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>

   常用的内联元素有：<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>、<var>、<cite>、<code>

   常用的内联块状元素有：<img>、<input>

17.设置display:block就是将元素显示为块级元素。如下代码就是将内联元素a转换为块状元素，从而使a元素具有块状元素特点。

   格式为：a{display:block;}

   块级元素特点：

      (1)、每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行）

      (2)、元素的高度、宽度、行高以及顶和底边距都可设置。

      (3)、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。

18.在html中，<span>、<a>、<label>、 <strong> 和<em>就是典型的内联元素（行内元素）（inline）元素。当然块状元素也可以通过代码

   display:inline将元素设置为内联元素。

   将块状元素div转换为内联元素

   div{ display:inline;}

   内联元素特点：

   (1)、和其他元素都在一行上；

   (2)、元素的高度、宽度及顶部和底部边距不可设置；

   (3)、元素的宽度就是它包含的文字或图片的宽

19.内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点，代码display:inline-block就是将元素设置为内联块状元素。

   inline-block 元素特点：

      (1)、和其他元素都在一行上；

      (2)、元素的高度、宽度、行高以及顶和底边距都可设置。

20.盒子模型样式包括边框设置（颜色，虚实，粗细等）、填充（距离）、边界（距离）。

21.盒模型宽度和高度和我们平常所说的物体的宽度和高度理解不一样，css内定义的宽和高指的是填充以里的内容范围。元素实际宽度=左边界+左边框+左填

   充+内容宽度+右填充+右边框+右边界。

22.CSS模型包括三种：流动模型，浮动模型，层模型。

23.流动模型是html默认的网页布局模型，流动布局模型具有比较典型的特征：
     (1)块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置。

     (2)在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。

24.浮动模型：在同一行中显示块级元素。

25.层模型：类似于PS中图层的概念，在网页局部性应用较为广泛。有三种定位方式：绝对定位，相对定位，固定定位。(1)绝对定位：关键词positon：absolute，以绝对定位模      块或者浏览器窗口为基准，设置该块的位置。(2)相对定位：关键词：position：relative，该定位方式为相对于初始化时的位置移动，由Top，left，right等元素控制。(3)固定定位：广告定位方式，固定在浏览器的窗口上，上下移动滚动条对该模块无效，除非移动浏览器窗口的位置。当使用固定定位和相对定位结合时，可以实现组合效果。

   在设置CSS样式时通常会有一些小技巧，为了使页面看起来更美观更舒服，需要用到各种小工具去改变小细节，在编码过程中也会有一些简化性质的编码方式，虽然使代码量减少，但是程序的可读性下降了。同一种形式可能有不同种类的编码方式，具体使用哪一种根据网页制作者的爱好选择，如果在制作的过程中有想实现的功能但是不知道如何实现，可以查阅资料。总之一句话，尽最大可能使得页面更漂亮。