CSS样式选择器

高洛峰 原创: 2017-02-14 15:04:32 1289浏览

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

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

语法：style='key1:value;key2:value2;'

在标签中使用style='xx:xxx;'

在页面中嵌入：<style type='text/css'> </style>块

引入外部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样式选择器相关文章请关注PHP中文网！