首页 > 其他分享 >二、css语法

二、css语法

时间:2022-11-25 17:22:58浏览次数:42  
标签:元素 class 语法 选中 选择器 css 属性

style标签

css中的注释

/*这是注释*/

css的基本语法:

选择器 声明块

选择器,通过选择器可以选中页面中的指定元素,比如 p 的作用就是选中页面中的所有的p元素

​ 声明块,通过声明块来指定要为元素设置的样式,声明块由一个个声明组成

​ 声明是一个名值对结构

一个样式名对应一个样式值,名和值之间以:连接, 以;结尾

一、常用选择器

元素选择器

​ 作用:根据标签名来选中指定的元素

​ 语法: 标签名{ }

​ 例子 :p{ } 、 h1{ } 、 div{ } 、

1、id选择器

​ 根据id属性值来选中元素

​ 语法:#id属性值{ }

​ 例子:#box{} 、 #red{}

class是一个标签的属性,和id类似,但是class可以出重复使用,可以通过class属性来为元素进行分组

2、类选择器

作用:根据元素的class属性值 选中一组元素

语法:.class属性值{}

可以同时为一个元素指定多个class属性

3、通配选择器

作用:选中页面中的所有元素

语法: *

二、复合选择器

1、交集选择器

作用:选中同时符合多个条件的元素

语法:选择器1选择器2选择器3选择器n{}

注意:交集选择器中如果有元素选择器,必须使用元素选择器开头

2、选择器分组(并集选择器)

作用:同时选多个选择器对应的元素

语法:选择器1,选择器2,选择器3,选择器n{} 其中的逗号相当于“或”

三、子元素选择器

作用:选中指定父元素的指定子元素

语法:父元素>子元素

image-20221124204138182

注释:选择div的子元素span

标签:元素,class,语法,选中,选择器,css,属性
From: https://www.cnblogs.com/dajiang001/p/16925780.html

相关文章

  • 一些有用的CSS样式
    /*1.垂直对齐容器中的元素*/.verticalcenter{  position:relative;  top:50%;  -webkit-transform:translateY(-50%);  -......
  • CSS 基础属性篇组成及作用
    ####学习目标-css属性和属性值的定义-css文本属性-css列表属性-css背景属性-css边框属性-css浮动属性#####一、css属性和属性值的定义>属性:属性是指定选择符所具有......
  • 012:前端学习-CSS动画
    CSS动画动画是使元素从一种样式逐渐变化为另一种样式的效果您可以改变任意多的样式任意多的次数请用百分比来规定变化发生的时间,或用关键词"from"和"to",等同于0%和100%0%......
  • 【 Makefile 编程基础之四】详解Makefile 函数的语法与使用!
    本站文章均为​​ 李华明Himi ​​​原创,转载务必在明显处注明使用函数:在Makefile中可以使用函数来处理变量,从而让我们的命令或是规则更为的灵活和具有智能。make所支持......
  • 【 Makefile 编程基础之二】Makefile 书写规划以及语法规则!
    本站文章均为​​ 李华明Himi ​​​原创,转载务必在明显处注明:书写规则:规则包含两个部分,一个是依赖关系,一个是生成目标的方法。在Makefile中,规则的顺序是很重要的,因为,Mak......
  • 一文熟悉 Go 的基础语法和基本数据类型
    耐心和持久胜过激烈和狂热。前言快速上手一门新的语言,首先要做的就是熟悉新语言的基本语法和基本数据类型,本文将对Go语言的基础语法和基本数据类型进行介绍。Hello,World!记......
  • 小程序的前端代码语法
    首先是基于html、css、js的语法,更确切的说,小程序借鉴了vue的语法,小程序并不是在浏览器中实现的,所以没有Dom和Bom方法,只能借用vue的数据绑定方法显示数据。同时也......
  • 网安——CSS
    一、CSS基础概念CSS有两个重要的概念,分为样式和布局CSS的样式分为两种,一种是文字的样式,一种是盒模型的样式CSS的另一个重要的特质就是辅助页面布局,完成HTML不能完成的功......
  • cmake的几个常用语法整理
    1、​​find_library​​寻找库此命令用于查找库。<VAR>创建名为的缓存条目以存储此命令的结果。如果找到库,则结果存储在变量中,除非清除变量,否则不会重复搜索。如果找不到......
  • MySQL数据库:6、约束的概述及语法
    Python基础之MySQL数据库目录Python基础之MySQL数据库一、约束概述1、为什么要约束2、什么是约束3、约束的分类4、查看当前表已有的约束二、约束语法及用法1、无符号2、......