码迷,mamicode.com
首页 > Web开发 > 详细

CSS样式选择器

时间:2017-01-16 23:10:18      阅读:250      评论:0      收藏:0      [点我收藏+]

标签:css样式选择器

css是英文Cascading Style Sheets的缩写,称为层叠样式表,用于对页面进行美化。存在方式有三种:

元素内联、页面嵌入和外部引入。比较三种方式的优缺点。

语法:style=‘key1:value;key2:value2;‘

  1. 在标签中使用style=‘xx:xxx;‘

  2. 在页面中嵌入:<style type=‘text/css‘> </style>块

  3. 引入外部css文件


必要性:美工会对页面的色彩搭配和图片的美化负责,开发人员必须知道是如何实现的。


分别看下上面三种方式怎么使用:

1、在标签中使用<style type=‘text/css‘> </style>块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>页面一</title>
    <link rel="stylesheet" href="commom.css" />
</head>
<body>
    <div style="background-color:red;">123</div>
    
</body>
</html>


2、在页面中嵌入 <style type=‘text/css‘> </style>块

<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/css"; charset="UTF-8">
    <title>页面一</title>
    <link rel="stylesheet" href="commom.css" />
    <style>
        .logo{
            background-color:red;
        }
    </style>
</head>
<body>
    <div class=‘logo‘>123456</div>
    <div class=‘logo‘>aaa</div>
</body>
</html>

即在代码中添加一个<style></style>代码块,自定义一个样式,然后在后面的代码中可以反复调用



3、引入外部css文件

如果有多个html文件需要引用自定义的css样式,那么按照第二种方式的做法就需要在每一个html文件中定义一个样式,为了解决这个问题,可以定义一个文件,写入自定义的样式,然后从文件中调用这个样式即可。




style的写法:

<style>
    .logo{
        background-color:red;
    }
    #logo{
        background-color:red;
    }
    a,div{
        color:red;
    }
    a div{
        color:red
    }
    input[type=‘text‘]{
    color:blue
    }
    .logo a,.logo p{
        font-size:56px;
    }
</style>

1、class选择器

.logo表示class=‘logo‘时,引用该样式


2、id选择器

#logo表示id=‘logo‘时,引用该样式


3、组合选择器选择器

a,div表示所有的a标签和div标签引用该样式


4、关联选择器

a div表示层级关系,即所有a标签下面的div标签应用该样式。


5、属性选择器

input[type=‘text‘],属性标签,表示所有的type为‘text‘的标签引用该样式


6、.logo a,.logo p表示class=‘logo‘时,下面的所有a标签和class=‘logo‘时下面所有的p标签,引用该样式





CSS样式选择器

标签:css样式选择器

原文地址:http://zengestudy.blog.51cto.com/1702365/1892346

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!