首页 > web前端 > css教程 > CSS样式选择器

CSS样式选择器

高洛峰
发布: 2017-02-14 15:04:32
原创
1736 人浏览过

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

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

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

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

在页面中嵌入:

引入外部css文件


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


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

1、在标签中使用

<!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、在页面中嵌入

<!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=&#39;logo&#39;>123456</div>
    <div class=&#39;logo&#39;>aaa</div>
</body>
</html>
登录后复制

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


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=&#39;text&#39;]{
    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中文网!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板