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

最新推荐文章于 2024-06-18 16:37:00 发布

苏格尼塞

最新推荐文章于 2024-06-18 16:37:00 发布

阅读量278

点赞数

文章标签： css

本文链接：https://blog.csdn.net/qq_17495489/article/details/107963839

版权

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
评论
web前端进阶_CSS基础_基础篇2

web前端css内容一、css基础1. 什么是CSS（样式表）CSS(Cascading Style Sheets) - 层叠样式表CSS是web标准中的表现标准，主要用来设置网页内容的样式和布局（给标签化妆）2.CSS代码写在哪儿位置方法内联样式表将样式表(css代码)写在标签的style属性中(样式只能作用于一个标签)内部样式表将样式表写在style标签中（样式只能作用于当前html文件中的所有标签）外部样式表将样式表写在外部的css文件中，然后在htm
复制链接

扫一扫