css样式示例,CSS样式代码

什么是CSS样式？并列举CSS样式的类型。作业要求

CSS（Cascading Style Sheet，可译为“层叠样式表”或“级联样式表”）是一组格式设置规则，用于控制Web页面的外观。通过使用CSS样式设置页面的格式，可将页面的内容与表现形式分离。页面内容存放在HTML文档中，而用于定义表现形式的CSS规则则存放在另一个文件中或HTML文档的某一部分，通常为文件头部分。将内容与表现形式分离，不仅可使维护站点的外观更加容易，而且还可以使HTML文档代码更加简练，缩短浏览器的加载时间。定义内部样式块对象 你可以在你的HTML文档的HTML和BODY标记之间插入一个STYLE.../STYLE块对象。 定义方式请参阅样式表语法。示例如下： html head title文档标题/title style type="text/css" !-- body {font: 10pt "Arial"} h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} p {font: 10pt/12pt "Arial"; color: black} -- /style /head body 请注意，这里将style对象的type属性设置为"text/css"，是允许不支持这类型的浏览器忽略样式表单。 内联定义 (Inline Styles) 内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下： p style="color: sienna; margin-left: 20px"This is a paragraph/p 导入样式（Import Styles） 与链入外部样式的功能基本相同，只是语法和实现方式上有差别 head title文档标题/title style @import url(css.css); @import url("csss.css") ;//单引号也可以 @import css,css; @import "css.css";//单引号也可以 /style /head 以上几种形式都可以。

创新互联专注于企业成都全网营销推广、网站重做改版、伽师网站定制设计、自适应品牌网站建设、H5场景定制、商城系统网站开发、集团公司官网建设、成都外贸网站建设公司、高端网站制作、响应式网页设计等建站业务，价格优惠性价比高，为伽师等各大城市提供网站开发制作服务。

css 样式的应用举例

比如做一个导航条

首先搭建基本机构：

div id="menu"

ul

lia href="#"首页/a/li

lia href="#"年表/a/li

lia href="#"作品/a/li

lia href="#"文章/a/li

lia href="#"画廊/a/li

lia href="#"留言/a/li

lia href="#"地图/a/li

/ul

/div

这时候看到的一个纵列文字前带圆点的列表

然后用css进行美化：

#menu {

background-color: #6282ac;

height: 35px;

width: 570px;

position: relative;

}

定义菜单的宽，高，颜色及定位方式。

#menu ul {

list-style-type: none;

}

去掉文字下划线。

#menu li {

float: left;

display: block;

width: 60px;

height: 31px;

margin-top: 2px;

margin-right: 6px;

margin-bottom: 2px;

margin-left: 6px;

line-height: 31px;

text-align: center;

background-repeat: repeat-x;

border: 1px solid #FFFFFF;

}

定义“float: left;”使列表项横向排列，设置高与行高使链接文字垂直居中。

menu a {

font-family: Arial, Helvetica, sans-serif;

font-size: 10px;

background-image: url(../images/b.gif);

display: block;

background-repeat: repeat-x;

}

定义链接的字体及背景

#menu a:hover{

background-image: url(../images/a.gif);

display: block;

background-repeat: repeat-x;

}

定义a的伪类实现鼠标点击时的背景变化

CSS样式表怎么做

1、创建使用css样式表有三种，分别是外部样式表，内部样式表和内联样式。下面通过一个小demo演示它们的用法，首先新建一个html文件，放入3个button按钮，给前两个按钮分别设置class属性为btn1和btn2：

2、接着准备一个css文件，命名为demo.css，在文件内写入按钮A的样式，保存css文件：

3、回到刚才的html文件，在style标签中用link标签引入上一步创建的css文件，这就是外联样式的用法，总结就是创建好的css文件内写好样式，然后在html文件中用link标签引入即可，这也是大部分网站使用的方法，因为其引入方便，管理起来也比较方便：

4、接着是内部样式表的使用，这里直接在head标签里创建style标签，在里面加入btn2的样式。对于内部样式表简单的html文件，内部样式是很方便的，但是结构复杂的html文件使用它就会让文件显得很混乱：

5、最后是内联样式的使用，直接在第三个标签内使用style属性加入样式就可以了：

6、最后保存html文件，打开浏览器可以看到三个按钮的样式都出现了。以上就是css样式表的制作方法：

关于CSS样式

scrollbar-highlight-color : color 参数： color : 指定颜色。请参阅颜色单位和附录：颜色表 说明： 设置或检索滚动条3D界面的亮边（ThreedHighlight）颜色。 请参阅overflow属性 。 对应的脚本特性为scrollbarHighlightColor。请参阅我编写的其他书目。 示例： div {scrollbar-highlight-color :threedhighlight; } 语法3： scrollbar-face-color : color 参数： color : 指定颜色。请参阅颜色单位和附录：颜色表 说明： 设置或检索滚动条3D表面（ThreedFace）的颜色。 请参阅overflow属性 。 对应的脚本特性为scrollbarFaceColor。请参阅我编写的其他书目。 示例： div {scrollbar-face-color : threedface; } 语法4： scrollbar-arrow-color : color 参数： color : 指定颜色。请参阅颜色单位和附录：颜色表 说明： 设置或检索滚动条方向箭头的颜色。当滚动条出现但不可用时，此属性失效。 请参阅overflow属性 。 对应的脚本特性为scrollbarArrowColor。请参阅我编写的其他书目。 示例： div {scrollbar-arrow-color : buttontext; } 语法5： scrollbar-shadow-color : color 参数： color : 指定颜色。请参阅颜色单位和附录：颜色表 说明： 设置或检索滚动条3D界面的暗边（ThreedShadow）颜色。 请参阅overflow属性 。 对应的脚本特性为scrollbarShadowColor。请参阅我编写的其他书目。 示例： div {scrollbar-shadow-color :ThreedDarkShadow; } 语法6： scrollbar-dark-shadow-color : color 参数： color : 指定颜色。请参阅颜色单位和附录：颜色表 说明： 设置或检索滚动条暗边框（ThreedDarkShadow）颜色。 请参阅overflow属性 。 对应的脚本特性为scrollbarDarkShadowColor。请参阅我编写的其他书目。 示例： div {scrollbar-dark-shadow-color :threeddarkshadow; } 语法7： scrollbar-base-color : color 参数： color : 指定颜色。请参阅颜色单位和附录：颜色表 说明： 设置或检索滚动条基准颜色。其它界面颜色将据此自动调整。 请参阅overflow属性 。 对应的脚本特性为scrollbarBaseColor。请参阅我编写的其他书目。 示例： div {scrollbar-base-color : buttonface; } 很详细你看看吧！！希望对你有益

简单CSS样式表的写法

html

head

style type="text/css"

a.top:link {font-family: 宋体} /*链接字体*/

a.top:link {font-weight: normal;} /*设置链接文字中的字符粗细*/

a.top:link {font-size: 12} /*设置链接文字的大小*/

a.top:link {text-decoration: none;} /*设置链接文字没有下划线*/

a.top:hover {text-decoration: underline;} /*鼠标放在链接上时有下划线*/

a.top:link {color: #000000} /*设置链接文字的颜色*/

a.top:visited {color: #000000} /*访问过的链接*/

a.top:hover {color: #B50000} /*鼠标放在链接上字体的颜色*/

a.tj:link {font-family: 宋体}

a.tj:link {font-weight: normal;}

a.tj:link {font-size: 12}

a.tj:link {text-decoration: none;}

a.tj:hover {text-decoration: none;}

a.tj:link {color: #000000}

a.tj:visited {color: #0000ff}

a.tj:hover {background: #FFFFCC}

h1 {font-size:12px} 

h1 {font-family: "宋体"} 

h1 {font-weight: normal;}

h1 {color: #000000}

h2 {font-size:14px} 

h2 {font-family: "宋体"} 

h2 {font-weight: normal;}

h2 {color: #000000}

h3 {font-size:24px} 

h3 {font-weight: 1;}

h3 {color: #000000}

body {

margin-top: 1px; /*上边距*/

margin-bottom: 1px; /*下边距*/

}

/style

meta http-equiv="Content-Type" content="text/html; charset=gb2312"/head

body

pMouse over the links to see them change layout./p

pba href="default.asp" target="_blank" class="top"电脑对怀孕其实没啥影响/a/b/p

pba href="default.asp" target="_blank" class="tj"电脑对怀孕其实没啥影响/a/b/p

h1电脑对怀孕其实没啥影响/h1

h2电脑对怀孕其实没啥影响/h2

h3电脑对怀孕其实没啥影响/h3

/body

/html