css入门

css介绍

css:层叠样式表；用来修饰HTML，核心是层叠。

CSS引用：

1：外部样式：使用link来引入外部的css文件。

2：嵌入式：是将CSS样式集中写在网页的<head></head>标签的<style></style>标签中

3：内联式：把css代码写在标签的style属性中。

 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>引用CSS</title>
    <!-- 第一种:外部样式 -->

<link rel="stylesheet" href="style.css">
    <!-- 第二种:嵌入式 -->
    <style>
        p {
            color: pink;
        }
    </style>
</head>
<body>
    <!-- 第三种:内联式 -->
    <p style="color: red">内联式</p>
</body>
</html>

 





CSS2选择器
一 ：三大基础选择器 ：
                1：HTML 标签选择器。
               2：class 选择器。
               3：id 选择器。

       优先级：id > class > 标签
 








<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    /*标签选择器*/
    /*所有标签是div的都变了*/
    div{
        font-family: 华文彩云;
    }
    /*id选择器*/
    /*给id='c2'的设置样式，id一般不常用。因为id是不能重复的。*/
    #c2{
        background-color: blueviolet;
        font-size: larger;
    }
    /*calss类选择器*/
    .a1{
        color: red;
    }
</style>
<body>
<div id="c1">
    <div id="c2">
        <p>hello haiyan</p>
        <div class="a1">大家好！</div>
    </div>
    <p>hi haiyan</p>
</div>
<span>今天很开心</span>
<p>p2</p>
<div class="a1">
    <p class="a2">你好啊</p>
    <h1>我是h1标签</h1>
</div>
</body>
</html>









二：高级选择器

1：* 通配符选择器






* {margin:0;padding:0;}







2：群组（并集）选择器； 同时选中多个元素，每个元素中间使用逗号分隔





<!DOCTYPE html> 
<html>
   <head> 
 <title></title> 
   <style type="text/css"> 
　　　p,div { color:red; } 
  </style>
    </head> 
 <body>
      <p class="op">hello,world </p> 
      <div> change the world! </div> 
 </body>
 </html>

上面的代码中，在选中p标签的同时还选中了div标签。









3：交集选择器；通过交集这样的概念来选中具体的某一个元素





<!DOCTYPE html> 
<html> 
  <head> 
<title></title> 
    <style type="text/css">
　　　　 p.ap { color:red; }
   </style> 
   </head>
 <body> 
　　　　<p class="ap"> hello,world </p>
　　　　<p> pppppppp </p>
 </body>
 </html>






在上面的案例中，选择器要找的是p标签，并且这个标签的类名是ap。





4：后代选择器；可以通过后代选择器选中所有的后代元素。





<!DOCTYPE html> 
<html> 
<head> 
<title></title>
 <style type="text/css"> 
     div p { color:red; } 
</style>
 </head>
 <body>
 <div> 
      <div> 
          <div> 
        　　　　  <div> 
    　　　　　　　　 <p>hello,world</p> 
   　　　　　　　　</div> 
         </div> 
    </div> 
</div> 
</body>
 </html>






5：子元素选择器：​ 可以通过子元素选择器>来选中子元素。




<!DOCTYPE html> 
<html> 
<head> 
  <title></title> 
    <style type="text/css"> 
       div > p { color:red; } 
    </style>
 </head> 
<body> 
   <div>
     <p> hello,world </p>
  </div> 
 </body>
 </html>




 


 


















            

            
posted @ 
2019-08-24 16:42 
ZL_light 
阅读(509) 
评论(0) 
编辑 
收藏 
举报