您的位置：首页 > Web前端 > CSS

css样式表

2016-12-28 18:09 155 查看 
一般分为三种方式：
内联式样式表
--应用内联样式嵌入到各个网页元素
主要是应用到标签<P><table><h>里面如图。
<html>
<head>
</head>
<body>
<p style="color:red">

</p>
</body>
</html>

嵌入式样式表

--在网页上创建嵌入样式表

特点：

一般css语句写在html文档中，一般写在head标记中。

仅对一个html进行设置，代码是html的一部分，没有使用浏览器的缓存机制。

style一般与div一同使用。

第一个例子

<html>
<head>
<style type="text/css">
body
{
background-color：#ff00ff
background-image：url（images/2.gif）;
}
#top
{
width：100%；
height：100%；
background-color：#00ff00
}
#right
{
width：100%；
height：100%；
background-color：#00ff00
float:left;
}
</head>
</style>
<body>
<div id="top"><img src="images/2.gif   width=100px height=50px"></div>
<div id ="right"></div>
</body>
</html>

第二个例子

<html>
<head>
<style type="text/css">
h1.intro {color:blue;}
p.important {color:green;}
</style>
</head>

<body>
<h1 class="intro">Header 1</h1>
<p>A paragraph.</p>
<p class="important">Note that this is an important paragraph.</p>
</body>
</html>


外联式样式表

--将连接到外部样式表

<link>一般写到head标记里面。

base1.html

<html>
<head>
<link  href=" base.css" rel ="stylelsheet" type="text/css"/>
</head>
<body>
<h1>we are here</h1>
<table>
<tr class="to">
you
</tr>
</table>
<p class="po">
me
</p>
<p>
they
</p>
</body>
<html>


base.css

h1{
color:red;
margin left:20px;
font-size:2;
}
tr.to
{
color:red;
margin left:20px;
font-size:2;
}
p.po
{
color:blue;
margin left:20px;
font-size:2;
}


下面来了解一下css所涉及到的标签使用

<style>样式定义

<link>资源引用

<div>定义一个块区域

<span>行内的小块区域

1.当应用到多个网页时建议使用外联式样式表

2.选择器

普通选择器

主要是任意html标记

p{color：red }

类选择器

p.po

{

color：blue

}

注：如果只写.类名那么该类名适用于html任何标签的class属性

id选择器

#top

{

width：100%；

height：100%；

}

扩展小知识：

<在html使用<；

>在html使用>；

空格在html中使用 ；

版权在html中使用©；

在css注释中使用的注释为/* */

一个无序列表

<ul type="circle">

<li>一个</li>

<li>两个个</li>

<li>三个</li>

</ul>

一个有序列表

<ol >

<li>一个</li>

<li>两个个</li>

<li>三个</li>

</ul>

常见样式属性

文本：

font-size文本大小

font-family：文本字体

color：颜色

text-align：文本对齐

边框：

boder-style：边框样式

boder-width：边框宽度

boder-color：边框颜色

定位属性

top：

left：

width：

height：
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                css
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航