html第六章格式化之css

来源:互联网 发布:手机淘宝多图变大代码 编辑:程序博客网 时间:2024/03/28 19:37
样式是一种格式化规则
级联样式表(CSS)是用于指定基于样式网页格式的一段代码。
你可以将CSS代码段放到网页的<head>中,用于规范整个网页。
为了一个无序列表,我们使用方点字符采用style=属性,如:
<ul style="list-style-type: square">


理解样式
---------------------------------------分割线君--------------------------------------
我们可以在<head>部分写:
<style type="text/css">
ul{
list-style-type: square
}


</style>


又如:
<style type="text/css">
ol{
list-style-type: lower-alpha;
}
ul{
list-style-type:square;
}
</style>
-----------------------------------------------分割线君---------------------------------


创建样式
<style>
h1,h2,h3,h4,h5,h6
{
color:red;
font-size:14px;//字体14px大
}




hr{
color:green;
background-color:red;
height:10px;
width:50%;//屏幕百分之50%
text-align:left;///最左
}


</style>




<style>
hr{
color:green;
background-color:green;
height:3px;
}
ul{
list-style-type:square
}
ul ul{
list-style-type:disc
}
ul ul ul{
list-style-type:circle
}
</style>




------------------------------------------------------------分割线君-------------------------------------------------------------------------------------------------
创建类
假设我有一个无序列表的各种产品,我想让新产品显示为红色。一种方法是手动添加<li style="color:red">Spraying Techniques for Fruit Trees</li>


get:如何在字体换颜色.
但这不是一个最佳的方法,如果想让新产品改为蓝色就很烦了。手动各处改。所以创建一个类:
如:在<style>部分
<style>
.new{
color:red
}
</style>
之后
<li class="new">Spraying Techniques for Fruit Trees</li>


创建标识
<style>
#special{
color:red
}
</style>
之后
<li id="special">Sparaying Techniques for Fruit Trees</li>


---------------------------------------------------------分割线君---------------------------------------------------------------------------------------------------
超文本链接样式应用
比如:为了让所有访问过的链接呈品红色,而所有未访问过的链接变成黑色代码如下:
<style>
a:link{color:black}
a:visited{color:magenta}


还有其他
a:link{color:blue}
a:visited{color:green}
a:hover{color: lime}------被指向就会变绿色
a:active{color:red}-------激活后变红色
-----------------------------------分割线君--------------------------------------------------------------------------------------------------------------
创建外部列表:
嵌套式样式列表单一网页比较好;
外部列表运用于多个网站,
和html一样,外部链接表也是纯文本文件,结尾为.css多用default
接下来偏是链接文件在head中
<link rel="stylesheet"type="text/css" href="default.css"/>


真的是纯文本连<style>和</style>都没
0 0
原创粉丝点击