CSS学习总结（一）

不知道大家对CSS的印象是怎么样的呢？也许有些模糊，也许根本不清楚。其实它跟我们密切相关，一旦我们浏览网页，都在与它打交道。没有它，我们看不到现在如此丰富多彩的网页效果。那么它到底是什么呢？又该如何使用呢？

一、什么是CSS？

CSS (Cascading Style Sheets) 层叠样式表。采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。目前主流浏览器chrome、safari、firefox、opera、甚至360都已经支持了CSS3大部分功能了。但出于考虑浏览器的兼容性问题，不同的浏览器可能需要不同的前缀。

二、CSS能做什么？

1、简化代码。以前也许有些网页效果时需要用到脚本或其他图片等来实现一些特别的效果。但CSS却能只用简单的几条语句就能搞定。如圆角，图片边框，文字阴影和盒阴影，过渡、动画等。

2、高效。我们通过一个CSS文件，就能控制整个网页风格。只要修改了CSS中的文件，整个站点的网页都会随之改变。这样的好处是大大减少了前端人员的开发工作量，提高工作量。

3、多终端适应。CSS可以支持多种设备,比如手机,PDA,打印机,电视机,游戏机等。

三、不同浏览器对应的前缀

前缀	浏览器
-webkit	chrome和safari
-moz	firefox
-ms	IE
-o	opera

四、CSS语法结构

CSS的语法结构由三部分组成：选择符、属性、值。

选择符{属性:值;}

注：属性和值被冒号分开,分号结束，而且是英文状态下冒号与分号。

说明

选择符：通常是需要改变样式的 HTML 元素。

属性：是您希望设置的样式属性

值：每个属性有一个值。

<style type="text/css">
       p { background-color:#cccccc;}
 </style>

在上面例子中，主要看中间的一行代码。意思是将p段落的背景颜色设置为灰色。其中p为选择符，background-color为属性，#cccccc为值。

五、如何引入CSS

1、行内引用

行内引用是指将CSS样式编码直接写在HTML 标签中的style属性里。注意这种方式的引入CSS，是不需要写选择器的。

例：

<body>    
    <h2 style="color: #0000FF;font-size="10px">标题2</h2>
　  <h3 style="color: red;">标题3</h3>
</body>

标题2

标题3

2、页内引用

页内引用作为页面中的一个单独部分，由<style></style>标签定位在<head></head>之中。

 <head>
        <style type="text/css">
       h1{
            background-color:blue;
        }
　　　　　a {color:red;}

    </style>
</head>

3、页外引用

外部样式表是CSS应用中最好的一种形式，它将CSS样式代码单独放在一个外部文件中，再由网页进行调用。如我创建了一个名为demo.css的文件。

<head>
<link rel="stylesheet" type="text/css" href="demo.css" />
</head>

/*demo.css文件内容*/
div
{
    width:50px;
    height:100px;
    background-color:red;
}

注：三种引入CSS的方式是有优先级之分的。其排序是就近原则，即行内>页内>页外。也就是说用三种方式来对某元素进行设置时，最先引用的将会是离元素最近的那种方式。

六、CSS的注释

css 代码注释，以 /* 开始 */ 结束。如

/*p段落的设置*/
p{background-color:green;}
/*h1{font-size:10px;}*/

七、CSS选择符

1、通配选择符*

* 号表示所有的对象。凡是在html文件中的元素，都会被选中。

<html>
    <head>
        <style>
            *{
                background-color:blueviolet ;/*h2,h3,a，body均被选中，背景色都改变了*/
            }
        </style>    
    </head>
    <body>    
        <h2 >标题2</h2>
        <h3 >标题3</h3>
        <a>这是个链接</a>    
    </body>
</html>

2、元素选择符

指以网页中已有的标签名作为名称的选择符。

<html>
    <head>                
        <style>
            h2{
                background-color:blueviolet ;
            }
            h3{
                font-family: "微软雅黑";
            }
        </style>
    </head>
    <body>    
        <h2 >标题2</h2>
        <h3 >标题3</h3>        
    </body>    
</html>

3、群组选择符

除了可以对单个标签进行样式指定外，还可以对一组标签进行相同的样式定义。这样一来，我们可以快速地对相关的元素进行整体调节。

<html>
    <head>                
        <style>
            h4,h5{
                background-color:blueviolet ;
                font-family: "微软雅黑";
            }
        </style>
    </head>
    <body>    
        <h4 >标题4</h4>
        <h5 >标题5</h5>        
    </body>    
</html>

4.关系选择符

关系选择符可以分为:

选择符	名称	描述
E F	包含选择符	选择所有被E元素包含的F元素
E>F	子选择符	选择所有作为E元素的子元素F
E+F	相邻选择符	选择紧贴在E元素之后F元素。
E~F	兄弟选择符	选择E元素所有兄弟元素F。

（1）、包含选择符（E F）

<html>
    <head>        
        <style>
            div h3{ 
                font-family: "微软雅黑";    
                background-color: blue;
            }
            
        </style>
    </head>
    <body>    
        <div>
            <h3>标题3</h3>  /*div包含h3*/
        </div>
    </body>
</html>

（2）、子选择符(E>F)

<html>
    <head>                
        <style>        
            ul li>a{
                font-family: "微软雅黑";
                font-size: 20px;
                background-color: indianred;
            }            
        </style>
    </head>
    <body>    
        <ul>
            <li><a href=#>我是链接</a></li>
        </ul>
    </body>
    
</html>

（3）、相邻选择符(E+F)

html>
    <head>
        <meta charset="utf-8" />
        <title>我的网站</title>        
        <style>
            h1+a{  /*选择与h1相邻的a*/
                color: #0000FF;
            }
        </style>
    </head>
    <body>    
        <div>
            <h1>这是大标题</h1>
            <a href="#">点击链接</a>
            <h2>我的网页</h2>
        </div>
    </body>
</html>

（4）、兄弟选择符(E~F)

<html>
    <head>    
        <style>
            p~p{
                background-color: orangered;                
            }
        </style>
    </head>
    <body>    
        <div>    
            <h1>标题1</h1>
            <h2>标题2</h2>
            <p>我是段落1</p>        
            <p>我是段落2</p>
        </div>
    </body>
</html>

posted @ 2016-08-08 22:27 ly婠婠阅读(653) 评论(0) 编辑收藏举报

ly婠婠

CSS学习总结（一）

标题2

标题3

公告