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

前端之Css

时间:2019-12-07 23:26:13      阅读:149      评论:0      收藏:0      [点我收藏+]

标签:strong   src   gre   style   color   内容   utf-8   class选择器   image   

一、初识Css

1、概念

  • 用于修饰标签。
  • 使用css选择器需要关注两点:1、选择哪个选择器 2、如何选择需要使用css样式的标签。
  • 在head中添加style标签,在style标签中添加css选择器,就可以将css样式附着到body中的标签上了。

二、选择器

1、选择器种类

(1)id选择器

  • head中使用#号定位,在body中的div标签添加id属性,head中写入对应id属性的值,即可将css样式定位到标签上。 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--样式标签-->
    <style>
        /*id选择器*/
        #div1{
            background-color: red;
        }
    </style>
</head>
<body>

    <div id="div1">我是个人</div>
</body>
</html>

技术图片

 

 

(2)class选择器

  • head中使用英文.号定位,在body中的div标签添加class属性,head中写入对应class属性的值,即可将css样式定位到标签上。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .c1{
            background-color: green;
        }
    </style>
</head>
<body>
    <div class="c1">我是绿色</div>
</body>
</html>

技术图片

 

 

(3)标签选择器

  • head中使用标签名div定位,在body中写入标签内容,head中写入对应div标签的值,即可将css样式定位到标签上。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>lrx</div>
</body>
</html>

技术图片

 

 

(4)标签层级选择器

  • head中使用标签名div里面的span标签定位,在body中写入标签内容,head中写入对应span标签的值,即可将css样式定位到标签上。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div span{
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div>
        <span>123</span>
    </div>
</body>
</html>

技术图片

 

 

(5)属性选择器

  • 在body里面的div标签中加入自定义属性,然后head中通过使用标签名div加中括号,中括号中写全自定义属性名和值的方式,将css样式与标签进行关联。
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div[abc="哈哈哈"]{
            background-color: burlywood; 
        }
    </style>
</head>
<body>
    <div abc="哈哈哈">哦哦哦</div>
</body>
</html>

 技术图片

 

 

 

前端之Css

标签:strong   src   gre   style   color   内容   utf-8   class选择器   image   

原文地址:https://www.cnblogs.com/brf-test/p/12003776.html

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