web前端进阶_CSS基础_基础篇2

web前端css内容

一、css基础

1. 什么是CSS(样式表)

CSS(Cascading Style Sheets) - 层叠样式表

CSS是web标准中的表现标准,主要用来设置网页内容的样式和布局(给标签化妆)

2.CSS代码写在哪儿

位置方法
内联样式表将样式表(css代码)写在标签的style属性中(样式只能作用于一个标签)
内部样式表将样式表写在style标签中(样式只能作用于当前html文件中的所有标签)
外部样式表将样式表写在外部的css文件中,然后在html文件中用link导入(样式可作用域所有的html中所有的标签)

优先级: 内联样式表 > 内部样式表、外部样式表(谁后写谁的优先级高)

3.CSS怎么写

语法:
选择器{属性名1:属性值1;属性名2:属性值2;属性名3:属性值3;…}

说明:
1)选择器 - 选择器是用来选中当前需要设置样式的标签。(写内联样式表 ‘选择器{}’ 需要省略)
2)属性 - 以属性名:属性值 的形式存在,多个属性之间必须用 ; 隔开
    a.常用属性: color(文字颜色);background-color(背景颜色); font-size(文字大小); width(宽度);height(设置高度)
    b.常用的值: A.数字(数字如果是用来表示,那么值后面必须加单位:px) 100px 100%
          B.颜色:颜色的英文单词,例如:red, green, yellow、pink
          rgb值(通过调节红色、绿色和蓝色的值来调出不同的颜色,值的范围是0~255)
gb(red, green, blue) rgb(255, 0, 0) rgb(0, 255, 0)
rgb(255,255,255) rgb(0,0,0) rgb(200,100, 45)

          rgba(red, green, blue, 透明度), 透明度的取值范围是0~1 rgba(255,0,0,1)
          16进制颜色值:#6位的16进制数 #ff0000
#00ff00 #ffffff

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
        
 </head>
 <body>
        <!-- 1.内联样式表 -->
        <h1 style="background-color: #ffff00;">内联样式表</h1>
        <p style="color: green;">内联样式表</p>
        
        <!-- 3.外部样式表 -->
        <div id="div1">
            
        </div>
        <link rel="stylesheet" type="text/css" href="css/06-css基础.css"/>
        
        <!-- 2.内部样式表 -->
        <a id="a1" href="">刷新</a>
        <style type="text/css">
            /* 这儿写的css代码 */
            #a1 {
                color: darkmagenta;
                font-size: 30px;
            }
            h1{
                width: 200px;
                color: green;
            }
        </style>
        
 </body>
</html>

在这里插入图片描述

二、选择器

选择器是用来选中指定标签来添加样式
常用的选择器:

1.id选择器:

在标签的id属性值前加#作为一个选择器,选中id属性是指定值的标签。(注意:同一个id值在当前页面中只有一个标签)
#p1{} - 选中id是p1的标签

2.类选择器:

在标签的class属性值前加.作为一个选择器,选中class属性是指定值的标签。
.c1{} - 选中class是c1的所有的标签
注意:同一个class可以作用于不同的标签,同一个标签可以同时拥有多个class值(有多个的时候中间用空格隔开)

3.元素选择器:

直接将标签名作为选择器,选中当前页面中所有指定的标签
p{} - 选中所有的p标签
div{} - 选中所有的div标签

4.通配符:

将  *  作为选择器, 选中当前页面中的所有的标签

5.群组选择器:

将多个其他的选择器用逗号隔开作为一个选择器,选中每个独立的选择器选中所有的标签
p,.c1,#p1{} - 选中所有的p标签和class是c1标签,以及id是p1的标签
a,img{} - 选中所有的图片和超链接

6.后代选择器:

将多个选择器用空格隔开作为一个选择器
div p{} - 获取所有是div后代的p标签
div .p1 - 选中div中所有class是p1的标签(div 和 .p1的标签是后代关系)

7.子代选择器:

将多个选择器用>隔开作为一个选择器
div>p{} - 选中所有div标签子标签中的p标签
div>.p1{} - 选中所有div标签子标签中class是p1的标签

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
      <!-- ============1.id选择器 ============-->
      <!-- <h1 id="title1">id选择器</h1>
      <p id="p1">我是段落1</p>
      <p>我是段落2</p>
      
      <style type="text/css">
          #p1{
              color: #FF69B4;
              font-size: 25px;
          }
          #title1{
              color: #8B008B;
              width: 200px;
              background-color: yellow;
          }
      </style> -->
      
      
      <!-- ============2.class和元素选择器 ============-->
      <!-- <h1 class="c1">class选择器</h1>
      <p class="c1">我是段落1</p>
      <p class="c2">我是段落2</p>
      <p class="c1">我是段落3</p>
      <a class="c1 c2" href="">我是超链接1</a>
      <a class="c2" href="">我是超链接2</a>
      
      <style type="text/css">
          /* 元素选择器 */
          p{
              color: red;
          }
          
          /* class选择器 */
          .c1{
              background-color: seagreen;
          }
          
          .c2{
              font-size: 25px;
          }
          
          /* 通配符 */
          *{
              border: 1px solid firebrick;
          }
          
      </style> -->
      
      
      <!-- ============3.群组选择器 ============-->
      <!-- <h1 class="c1">class选择器</h1>
      <p class="c1">我是段落1</p>
      <p class="c2">我是段落2</p>
      <p class="c1">我是段落3</p>
      <a class="c1 c2" href="">我是超链接1</a>
      <a class="c2" href="">我是超链接2</a>
      <style type="text/css">
          p,a{
              color: red;
          }
          h1,.c2{
              background-color: yellow;
          }
      </style> -->
      
      <!-- ============4.后代选择器 ============-->
      <p>我是段落1</p>
      <div id="">
          <p>我是段落2</p>
          <span>
              <p>我是段落3</p>
          </span>
          <a href="">我是超链接1</a>
      </div>
      <div id="">
          <p>我是段落4</p>
          <div id="">
              <p>我是段落5</p>
          </div>
      </div>
      
      <style type="text/css">
          /* 后代选择器 */
          div p{
              color: red;
          }
          /* 子代选择器 */
          div>p{
              background-color: skyblue;
          }
      </style>
      
      
</body>
</html>

在这里插入图片描述

三、伪类选择器

1. 什么是伪类选择器

普通选择器选中的是标签(选中一个标签的所有状态)

伪类选择器选中的是标签的状态

语法:
选择标签的选择器:伪类选择器{}

常用的伪类选择器:

伪类选择器名称伪类选择器功能
link链接未被成功访问对应的状态(只针对超链接有效)
visited链接已经被成功访问对应的状态(只针对超链接有效)
hover鼠标悬停在标签上对应的状态(针对所有可见标签有效)
active鼠标按住标签不放对应的状态(针对所有可见标签有效)
focus鼠标点击选择后,出现一种设置的颜色,但是点击其他区域,颜色会消失

代码举例如下:

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
 </head>
 <body>
        <a href="https://www.baidu.com">我是超链接1</a>
        <br>
        
        <style type="text/css">
            a:link{
                color: red;
            }
            
            a:visited{
                color: green;
            }
            
            a:hover{
                color: #0000FF;
                font-size: 30px;
            }
            a:active{
                color: #FF69B4;
            }
        </style>
        
        
        <div id="div1" style="width: 100px; height: 100px;"></div>
        <style type="text/css">
            #div1{
                background-color: #008000;
            }
            #div1:hover{
                background-color: aqua;
            }
            #div1:active{
                background-color: #8B008B;
            }
        </style>
        
        
 </body>
</html>

鼠标没有放在超链接上的显示效果为:
在这里插入图片描述
鼠标放在超链接上的显示效果为:
在这里插入图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值