CSS2.0-1

来源：互联网发布：安畅网络个人用户编辑：程序博客网时间：2024/05/17 04:56

1、什么是CSS? 使用CSS有什么好处？

1、CSS层叠样式表2、好处：    A：样式表能实现内容与样式的分离，方便团队开发。    B：样式复用，方便网站后期的维护。    C：页面把你的精准控制，实现精美，复杂页面。

2、 CSS的基本语法

    <head>    <style type="text/css">    选择器（即修饰对象）{    对象的属性1: 属性值1;    对象的属性2: 属性值2;    }    </style>    </head>

3、选择器

示例1，：    <head>    <style type="text/css">    标签声明标签内为CSS    选择器（即修饰对象）{    对象的属性1: 属性值1;  多条样式声明    1.多条声明间用分号分隔    2.每条声明由一个属性和一个值组成，用冒号隔开    对象的属性2: 属性值2;       }    </style>    </head>示例2，：    li {     color: red;     font-size: 30px;     font-family: 隶书;    }1，标签选择器2，类选择器3，ID选择器4，群组选择器5，派生选择器6，伪类选择器（1）标签选择器    示例：    <style type="text/css">    li{  标签选择器：用于修饰同类HTML标签的共性风格    color:red;     font-size:28px;    font-family:隶书;     }    </style>    … …    <div>    <ul>    <li>家用电器</li>        … …    </ul>    </div>简单的文本属性：    font-family：字体名称、font-size：字号大小、color：文本颜色、text-align：文本对齐方式、text-indent：首行缩进等。（2）类选择器（class）希望部分li标签采用其他样式    <style type="text/css">     .blue{color:blue;}     定义样式，注意类名有点号               ……    </style>     ……    <ul>    <li class="blue">家用电器</li>   应用类样式，其他元素也可以使用    <li>各类书籍</li>    <li class="blue">手机数码</li>    <li>日用百货</li>    </ul>(3)ID选择器（控制某个DIV块样式，并且要求块元素唯一）    <style>    #menu{    width:200px; background:#ccc;    font:bold 14px 宋体;    }    </style>    … …    <div id="menu">    <ul>    <li>家用电器</li>    ……    </ul>    </div>  （4）群组选择器（把几个 ID、class 或者标签选择器中具有相同的CSS取出，来减少代码的冗余）    <style type="text/css">    p,h2 { color:#0000ff;  }    群组选择器    p {    font-size:12px;    font-family:"宋体";    text-align:left;    text-indent:2em;    }    h2 {  text-align:center;  }    </style>（5）派生选择器（以实现给一个元素里的子元素定义样式。）    <style type="text/css">    p b {    color:#ff0000;  派生选择器    }    </style>    ……    <b>我是粗体字</b>    <p>我不是粗体字<b>我也是粗体字</b></p>

4、编码规范

1，代码全部小写。2，可以添加注释说明：同C#,单行//，多行/*......*/注意：写样式表时<style>标签内不要写<!——>注释，否则样式表不起作用样式规则CSS的语法很简单，它使用一组英语词来表示不同的样式和特征。一个式样表由一组规则组成。每个规则由一个“选择器”（selector）和一个定义部分组成。每个定义部分包含一组由半角分号（;）分离的声明。这组声明放在一对大括号（{ }）之间。每个声明由一个属性，一个半角冒号（:）和一个值组成。

5、字体属性设置

1，font-family   字体可以同时为页面设置多个字体，当浏览器找不到第一个字体时会寻找第二个字体，依次进行，直到找到可用的字体。语法：font-family : 字体1，字体2，字体3，…常用字体类型  font-family:"宋体","微软雅黑",Arail,Tabhoma;2，字体设置建议    （1）中文页面建议以宋体为首选，其他字体次之。    （2）英文页面建议以Arail/Tahoma等字体。    （3）中英结合网站建议最好用英文字体。    （4）特殊字体一律用图片。3,font-size 字号语法:    font-size: px  | em | 百分数    1em = 16px4,font-style  字体风格定义字体的风格，属性设置使用斜体、倾斜或正常字体。语法:font-style: normal | italic | oblique normal : 常规字体italic : 斜体oblique  : 倾斜通常情况下，italic和oblique文本在web浏览器中看上去是完全一样5,font-weight 字体粗细语法:font-weight: normal | bold | bolder | lighter | number normal : 表示正常bold : 表示加粗bolder : 表示更粗的字符lighter : 表示更细的字符number : 值为100到900    整百数值6,复合属性（缩写） font使用font作为属性名称，后接各个属性值即可，各个属性值之间用空格分开。通常不采用简写的模式。语法：font: font-style | font-weight | font-size/line-height | font-family实例：.font{font:italic bold 12px/1.5em arial,verdana;注意事项：1、简写时，font-size和line-height只能通过斜杠/组成一个值，不能分开写。 2、顺序不能改变.这种简写方法只有在同时指定font-size和font-family属性时才起作用。而且，如果你没有设定font-weight、 font-style，他们会使用缺省值

7、文本属性设置

1，文本颜色属性设置Color 用于设置文本的显示颜色语法：    color : 颜色值；      颜色可以是一个名称标示的关键字，如 color : red;    也可以是一个RGB数字，如color : #ffffff；    如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为#RGB的方式，如：#FF8800 可以缩写为 #F80。2，文本行距属性设置    line - height    文本行距（行高）语法：    line-height: normal | length；normal :浏览器默认为正常行距length : 长度值，可以是像素值或百分比，允许为负值。设置数值越大，文本段落中间的行距越大ine-heigth还有一功能，它规定行高后，可以使本行内容垂直居中。 3，文本水平对齐设置text-align    文本水平对齐语法：    text-align: left | center | right | justify；    left : 左对齐    center: 中间对齐（左右居中）    right : 右对齐    justify : 两端对齐文本   针对英文单词4，文本修饰属性设置text-decoration   文本修饰语法：    text-decoration: none | underline | overline | line-through none: 无文本修饰（浏览器默认初始值）underline : 表示有下划线line-through : 表示有贯穿线/删除线overline : 表示有上划线5，文本缩进属性设置text - indent    文本缩进语法：text-indent: length；常用单位是 px 或者是 emtext-indent: px | em；em指文字的倍数，允许指定负值6，字词间隔属性设置word - spacing    字词间隔改变字（单词）之间的标准间隔语法：word-spacing: normal | length； normal : 默认值length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字词之间的间隔就会增加。设置一个负值，会把它拉近。7，字符间隔属性设置letter - spacing    字符间隔改变字符之间的标准间隔语法：letter-spacing: normal | length； normal : 默认间隔length : 接受一个正长度值或负长度值。如果提供一个正长度值，那么字符之间的间隔就会增加。设置一个负值，会把它拉近。8，空白处理属性设置white-space           空白处理是否换行显示语法：nowrap：不断行，指一行内容较多，浏览器默认会换行显示。如设置为不断行，则超过一行时也不断行。例如：本例新闻标题的链接，因从数据库读出，不知道新闻标题有多长。为了页面美观起见，可以规定新闻标题不断行，即使超过一行也不换行显示。

8、背景图片

1，背景属性background （缩写形式）background-color（背景色 ）background-image（背景图 ）background-repeat（背景图重复方式 ）background-position（位置坐标、偏移量）（1）background - color  背景颜色语法background-color: red | #ffffff； red : 英文颜色名称关键字#ffffff : 是一个RGB数字。用法跟color相似，只是代表属性不同，属性值是一样。（2）background - image    背景图片语法background-image: none | url ( url )；none : 是无背景图url : 里面跟的图片的路径。背景图片默认平铺。（3）背景图重复设置background - repeat    背景图重复语法：repeat : 重复   默认选项no-repeat : 不重复repeat-x : 横向重复repeat-y : 纵向重复（4）背景图定位设置background - position   背景图定位语法：background-position: x轴坐标值  y轴坐标值；x轴 y轴坐标值：可以是像素值。background-position：10px  30px；可以是具体的方位。left | right | center | top | bottom 可以是百分比。background-position：30%  50%；5）背景图滚动设置background - attachment   背景图滚动语法：background-attachment : scroll | fixed；scroll : 随着页面的滚动轴背景图片将移动，默认值。fixed : 随着页面的滚动轴背景图片不会移动。fixed：背景图相对于浏览器窗口固定，所以随页面滚动背景不动，相当  于背景被设置在了body上。local：背景图相对于元素内容固定，效果同scroll（6）背景图简写设置语法：background : color url( ) position repeat； 背景设置的简写，其属性值有多个值组成，值与值之间用空格隔开。      div{     设置背景图片、不重复平铺     background:url(images/bg.jpg) no-repeat;     景出现的水平和垂直位置坐标，实现各种偏移效果     background-position: -70px -60px    }

9、图标截取–背景偏移量技术

    --利用background-position的坐标偏移量，从同一张背景图中截取菜单图标

阅读全文

0 0