首页 > 其他分享 >CSS概念与CSS选择器

CSS概念与CSS选择器

时间:2023-02-21 00:12:08浏览次数:34  
标签:样式 标签 元素 概念 color 选择器 CSS

CSS简述 CSS被称为级联样式表或者CSS样式表。CSS也是一种标记语言。 CSS主要用于设置HTML页面中的: 1.文本内容(字体,大小,对齐方式等), 2.图片的外形(宽高,边框样式,边距等), 3.版面的布局和外观显示样式。   它的使用分两步 1.定义: .red {color: red} 2.调用:

<div class="red">

 

CSS语法规范 CSS既然是一种编程语言,则就有它自己的编程规范。 CSS规则由两个主要的部分构成:选择器+一条或多条声明。 0 选择器用于指定CSS样式的HTML标题,花括号内是对该对象设置的具体样式。 选择器 {样式} 属性和属性值以“键值对”的形式出现,并使用分号";"结束。   CSS选择器的作用 选择器就是根据不同需求把不同的标签选出来,这就是选择器的作用。简单来说,就是选择标签用的。 上面截图的CSS做2件事: 1.找到所有的h1标签 2.设置这些标签的样式,比如把颜色设置成红色   选择器的分类 选择器分为基础选择器和复合选择器两大类。 基础选择器是由单个选择器组成的。 基础选择器包括:标签选择器,类选择器,id选择器,通配符选择器。   基础选择器 标签选择器 标签选择器是指使用html标签作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。作用是标签选择器可以把某一类标签全部选择出来,比如所有的p标签和所有的div标签。 优点:能快速为页面中同一类标签统一设置样式。 缺点:不能差异化样式,只能选择全部的标签类型。   类选择器 类选择器(开发最常用)是指差异化选择不同的标签,单独选一个或某几个标签,有某种意义的一组标签。 选择器在html中以class属性表示,在CSS中,类选择器一个点“.”号显示。
<style type="text/css">
        /* 样式点定义,结构类定义,一个或多个,开发最常用 */
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .green {
            width: 100px;
            height: 100px;
            background-color: green;
        }
</style>
    
<body>
    <div class="red"></div>
    <div class="green"></div>
    <div class="red"></div>
</body>
类选择器-多类名 我们可以给一个标签指定多个类名,从而达到更多的选择目的。这些类名都可以选择出这些标签。 标签属性中写多个类名,多个类名用空格分开。 给一个标签写多个类名,那么这标签就分别有多个类名的样式,从而节约CSS代码,方便统一修改。
<style>
        .red {
            width: 100px;
            height: 100px;
            background-color: red;
        }
        .font20 {
            font-size: 20px;
        }
</style>

<div class="red font20">红色</div>
id选择器 id选择器可以为特定id的html元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS中id选择器以“#”来定义。 /* id选择器的口诀:样式#定义,结构id调用,只能调用一次,别人切勿使用 */ #pink { color: pink; } <div id="pink">迈克尔*杰克逊</div> id选择器与类选择器的区别 拿身份证来举例子 类选择器好比人的名字,一个标签可以有多个名字,一个名字又能被多个标签使用。 id选择器好比人的身份证号,全国唯一,不得重复。 id选择器与类选择器最大的区别是使用次数上,id选择器只能被使用一次,类选择器可以被使用多次。 类选择器在修改样式时用的最多。 id选择器一般用于页面唯一元素,经常和JS搭配使用。   通配符选择器 *表示页面里所有的标签, 只需要定义,不用调用就会自动添加到页面中的所有标签上 标签包括:html, body, ul, li等。 * { font-weight: 800; }   复合选择器 CSS中,可以把选择器分为两类:基础选择器和复合选择器。 复合选择器是建立在基础选择器之上的,是多个基础选择器的组合。 通过复合选择器可以更准确的选择目标元素。 常有的复合选择器:后代选择器,子选择器,并集选择器,伪类选择器等。   后代选择器 后代选择器的定义: 元素1 元素2 { 样式声明 } 元素1和元素2中间用空格隔开 元素1,元素2可以是任意基础选择器,如:标签选择器,id选择器,class选择器等。 元素1是父级,元素2是子级,最终选择的是子级 元素2可以表示是儿子,孙子..., 如:ul a {} 会把ul标签下的 子元素a/ 孙子元素a都选中。建议将完整的父子关系元素写全,不用省略中间元素,便于阅读。
<head>
  <style>
    ol li {
      color: red;
    }
    ul li a {
      color: blue;
    }
    ul li .a0 {
      color: cadetblue;
    }

  </style>
</head>

<body>
  <ul>
    <li>孩子标签</li>
    <li>孩子标签</li>
    <li>
      孩子标签
      <a href="">孙子标签</a>
    </li>
    <li>
      孩子标签
      <a href="" class="a0">孙子标签</a>
    </li>
  </ul>

  <ol>
    <li>孩子标签</li>
  </ol>
</body>
子选择器 只选择父元素最近一级的子元素,不包含孙子,重孙子元素。 语法表示为:元素1>元素2 { 样式声明 } 如下:只会选择“子元素链接
<style>
    div>a {
      color: darkkhaki;
    }
</style>

<body>
  <div>
    <a href="">子元素链接</a>
    <p>
      段落内容
      <a href="">孙子元素链接</a>
    </p>
  </div>
</body>
并集选择器 并集选择器可以同时选中多组标签,同时为它们定义相同的样式。用于集体声明。 并集选择器是各选择器通过英文逗号(,)连接,任意形式的选择器都可以作为并集选择器的一部分,包含(基础选择器,复合选择器),并集选择器约定竖着写 语法:元素1, 元素2 { 样式声明 } 元素1和元素2中间用英文逗号隔开 逗号可以理解成和的意思 并集选择器用于集体声明。
  <style>    
    p,
    div,
    span,
    .pig>li {
      color: darkslategrey;
    }
  </style>
  
<body>  
      <div>熊大</div>
      <p>熊二</p>
      <span>光头强</span>
      <ul class="pig">
        <li>佩奇</li>
        <li>乔治</li>
      </ul>
</body>
伪类选择器 伪类选择器用于向某些选择器添加特殊的状态,通俗讲:为某一状态的元素添加样式。如鼠标悬停时的a元素,或第1个,第n个元素。 伪类选择器最大的特点是用冒号(:)表示,比如::hover, :first-child。 伪类选择器比类选择器厉害,厉害在伪类有两个点,类只有一个点。
<style>
    /* 伪类选择器 */
    /* a:hover:鼠标悬停时 */
    div p a:hover {
      color: red;
      text-decoration: none;
    }
    /* a:hover:鼠标按下时 */
    div p a:active {
      color: blue;
      text-decoration: none;
    }

  </style>
  
<body>  
    <div>
    <a href="">子元素链接</a>
    <p>
      段落内容
      <a href="">孙子元素链接</a>
    </p>
  </div>
  </body>
链接伪类选择器工作中常见用法
   /* a伪类选择器工作中常见用法 */
    a {
      color: gray;
    }
    a:hover {
      color: red;
    }
a伪类选择器使用注意 1.为了确保生效,按照lvha的顺序声明,:link, :visited, :hover, :active。记忆方法:LV包包就是hao 2.因为a链接浏览器中有默认样式,所以实际工作中单独给a指定样式,如:body{color:red}这样无法改变a样式。   input伪类选择器 input:focus用于选中form表单中光标选中的输入框,可以突出用户操作的输入框
<style>    
    input:focus {
      background-color: rebeccapurple;
    }
</style>    
<body>    
  <input type="text">
  <input type="text">
  <input type="text">

</body>

 

CSS引入方式 内部样式表 将页面标签中的样式全部抽出来,放在一个style标签中,可以方便的控制整个页面中的元素样式设置。 但是布局和样式并没有完全分离。
<head>
  <style>
    div {
      color: red;
    }
  </style>
</head>
<body>
  <div>Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。</div>
</body>
行内样式表 用于少量修改的场景使用。
<body>
  <div style="color: blue; font-weight: 700; font-size: 20px;">给我一个粉红色的回忆。</div>

</body>
外部样式表 把css样式定义在一个单独的文件中,在html的head标签中使用link引入,使用的频率最多
<head>
  <link rel="stylesheet" href="mystyle.css">
</head>

 

   

标签:样式,标签,元素,概念,color,选择器,CSS
From: https://www.cnblogs.com/zhou--fei/p/17139484.html

相关文章

  • 基本概念
    查看系统的一些指令:uname-a命令可以直接显示Linux系统架构的命令dpkg --print-architecture可以查看操作系统是32位还是64位,如果当前Linux是64位则输出amd......
  • [转]《基于图像点特征的多视图三维重建》——相关概念汇总笔记
    1.   基于图像的图像3D重建传统上首先使用Structure-from-Motion恢复场景的稀疏表示和输入图像的相机姿势。然后,此输出用作Multi-ViewStereo(多视图立体)的输入,以恢......
  • DateTimePicker 日期时间选择器 + mybatis-plus 传参后端查询 传值自定义list,后端再
    前端<el-form-itemlabel="创建时间"prop="extendate"><el-date-pickerv-model="queryParams.extendate"......
  • css像素、物理像素、设备像素比、屏幕像素密度(ppi)
    1.物理像素DP(设备像素)物理像素代表屏幕上有多少个点,比如1080x2340表示屏幕水平方向一排有1080个物理像素点,垂直方向一排有2340个物理像素点。任何设备的物理像素的数量......
  • CSS代码实现提示气泡效果
    气泡三角主要使用,border-color,把元素的前后伪元素,叠加生成气泡上方的小箭头;border-color:如果元素都是边框,则是三角形如下图  伪元素其他3边透明,留一个边(即三角形......
  • K8S的基础概念
    1.概述Kubernetes,又称为k8s(首字母为k、首字母与尾字母之间有8个字符、尾字母为s,所以简称k8s)或者简称为“kube”,是一种可自动实施Linux容器操作的开源平台。它......
  • 商法的基本概念和特征
    商法总论一、基础概念商在我国商法中,”商“在限定法律关系主体时,是指商人和企业等商事主体。在限定事业和行为时,是指盈利事业和商行为。商事商人从事的以盈利为目的的各种......
  • JSON-概念、JSON-语法定义、JSON语法-值的获取
    JSON-概念概念:JavaScriptObjectNotationJavaScript对象表示法Personp=newPerson();p.setName("张三");p.setAge(23);p.setGender("男");......
  • css的z-index和微信小程序的API及React知识点
    变量的三个基本要素:类型+名称+值 devDependencies与dependencies区别:devDependencies里面的依赖只用于开发环境,不用于生产环境。而dependencies依赖的包不仅开发环......
  • html+css图片下面小空白、图片间的间隙问题
    添加图片的时候,图片的默认样式是图片与图片之间有间隙,图片下面也有间隙,需要使用方法进行清除,列举三种方法:方法一:给图片设置对齐方式:vertical-align:top/middle/bott......