首页 > Web开发 > 详细

前端之CSS介绍

时间:2017-07-24 23:24:01      阅读:361      评论:0      收藏:0      [点我收藏+]
一、CSS简介
  • 介绍

css我们称呼层叠样式表(英文全称:Cascading Style Sheets)。它是一种用来表现HTML标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。如果html是一个人,那么CSS就相当于衣服,有了它我们可以让HTML样式丰富多彩。

  • 语法

css语法主要由两部分组成:选择器和声明。选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。

selector  { 
    property1:value1    
    property2:value2  
    ……
}
  • 存在方式

元素内联:直接在元素中置顶CSS

页面嵌入:通过在head标签中定义,提供后续使用

外部引入:通过外部文件,是head标签中使用link引入,本质引入都是一样。

  •  注释
/*代码块*/
/*.c1{

height: 30px;
}*/

 

二、CSS选择器

分类:

  • 元素选择器
  • id选择器
  • class选择器

 

1.元素选择器

通过不同的元素定义选择器,如p、div、span、hr、table等等,只要定义了元素选择器,所有该元素都会引用定义的样式

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <style>
        p{
            background-color: aqua ;
            height: 20px;
        }
        div{
            background-color: red;
            height: auto;
        }
    </style>
</head>
<body>
<div>wd</div>
<p>name</p>
<!--head中定于了p、div标签的样式,body中所有的div和p都会引用到其样式-->
</body>
</html>

2.id选择器

 通过使用#+名字定义样式,引用使用id=“名字”引用该样式。

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello wd</title>
    <style>
        #i1{
            background-color: red;
            height: 50px;
        }
    </style>
</head>
<body>
<div id="i1">python</div>
<!--引用i1中的样式-->
</body>
</html>

3.class选择器

通过.+名字定义,使用class=“名字”来引用样式

demo:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>hello wd</title>
    <style>
        #i1{
            background-color: red;
            height: 50px;
        }
    </style>
</head>
<body>
<div id="i1">python</div>
<!--引用i1中的样式-->
</body>
</html>

 

前端之CSS介绍

原文:http://www.cnblogs.com/wdliu/p/7231412.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!