CSS 样式表小结 CSS （Cascading style sheets）学完就可以写样式了

先介绍一些简单的基础知识：

什么是样式选择器：

    Selector {                          /*  Selector 是样式选择器 */
   property:value;    /* color:red;                        */
    property:value;   /* font-size:4cm;                 */
   …
}    Selector:当定义一条样式规则时，必须指定受这条样式规则作用的网页元素，在一条规则中定义的网页元素就是selector（选择器），也就是选择该样式规则作用于的网页元素。

 

关联选择器：

关联选择器只不过是一个用空格隔开的两个或更多的单一选择器给成的字符串
因为层叠顺序的规则，它们的优先权比单一的选择符大
必须按关联关系使用，不能有反顺序
只要能保持关联关系就可以，不管是在多少层

 

样式规则的继承：

所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。

 

以分号;结束
<   &lt;  &#60;   
>  &gt;   &#62;

 

CSS的四种设置方式：内联样式表：在HTML元素标签中使用style属性内联
每个HTML标签都可以加样式
嵌入样式表：通过HTML的<style>标签将CSS嵌入到HTML中使用
可以控制当前页面的所有样式
外部样式表：将样式单独定义在一个后缀名为.css的文档中，并在HTML中通过link元素连接到HTML中使用。
多个页面都可以使用
输入样式表：可以将一个样式文件输入到另外一个样式文件的中，或将一个样式文件输入到<style>元素中
@import url(css文件)
他们的优先级别：
内联的高于其它的， 其它的和加载的顺序有关

 

   

样式表小结：

     选择器的优先等级 ：联合选择器（多级的选择器 类似【#id div classA {        }】）> #id 选择器 > class 选择器 > html 标签选择器   另外

直接写在标签中的选择器 > <style>标签的  <style> 跟外联的 谁后 谁起作用；

 

     另外在网页优化方面； 一般会把多张图片显示在一张上，以达到减少请求的目的，提高网页的响应；

 

 

CSS中修饰字体的属性：font: [ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体族科>

属    性 描    述 属  性  值
font-family 字体族科 任意字体族科名称都可以使用例如Times、serif等，而且多个族科的赋值是可以使用的，中间用逗号分隔，以防止选择不存在的字体族科
font-size 字体大小 可以使用绝对大小、相对大小、长度或百分比
font-style 字体风格 normal（普通），italic（斜体）或oblique（倾斜）
font-weight 字体加粗 normal、bold、bolder或lighter等
font-variant 字体变形 normal（普通）或small-caps（小型大写字母）

 

CSS中常见的控制文本的属性：letter-spacing 字母间隔 该值必须符合长度格式，允许使用负值
word-spacing 文字间隔 该值必须符合长度格式，允许使用负值
text-decoration 文字修饰 underline（下划线），overline（上划线），line-through（删除线），blink（闪烁），或默认地使用无
text-align 横向排列 left、right、center或justify
text-indent 文本缩进 该值必须是一个长度或一个百分比，若百分比则视上级元素的宽度而定
line-height 行高 可以接受一个控制文本基线之间的间隔的值。当值为数字时，行高由元素字体大小的量与该数字相乘所得。百分比的值相对于元素字体的大小而定。不允许使用负值

 

CSS中常见的控制背景的属性：background-color 背景颜色 值和color属性值设定方式相同，或使用transparent（透明）值
background-image 背景图象 图片URL或none（无）
background-repeat 背景重复 repeat、repeat-x、repeat-y、no-repeat
background-attachment 背景附件 scroll（滚动）或fixed（固定）
background-position 背景位置 横向的关键字（left, center, right），纵向的关键字（top, center, bottom）百分比和长度也可用做安排背景图象的位置

background:  <背景颜色> || <背景图象> || <背景重复> || <背景附件> || <背景位置>

应用多个图标放到同一个图片里：

多个图标放到同一个图片里，通过定义某区块的背景定位，调用同一个图片中不同位置上的小图标，好处是可以减少对服务器的请求次数，从而加快页面的访问速度

 

边框的一些风格： 各边的风格使用的属性值

dotted：点线式边框
dashed：破折线式边框
solid：直线式边框
double：双线式边框
groove：槽线式边框
ridge：脊线式边框
inset：内嵌效果的边框
outset：突起效果的边框
可以通过边框宽度属性border-width设定上下左右边框的宽度，该属性用1到4个值来设置元素的边界，值是一个关键字或长度，不允许使用负值长度。
如果四个值都给出了，它们分别应用于上、右、下和左边框的式样。
如果只给出一个值，它将被运用到各边上。
如果两个或三个值给出了，省略了的值与对边相等。这个属性是上边框宽度、右边框宽度、下边框宽度和左边框宽度属性的略写。
也可以分别使用border-top-width、border-bottom-width、border-left-width和border-right-width属性单独设置各边的宽度。除了可以使用长度单位定值外，还可以用medium（是默认值）、thin（比medium细）或thick（比medium粗）值。

 

CSS中常见的控制列表的属性：ul 无序的列表  ol  有序的列表

 

list-style-type 设定引导列表项的符号类型，可以设置多种符号类型，值为disc、circle、square等
list-style-image 使用图像作为定制列表符号
list-style-position 决定列表项目缩进的程度