举例css的两种选择器的定义和用法

2024-11-01

css各类选择器类型和用法

1.ID 选择器(ID selector,IS):使用 # 标识selector,语法格式:#S{...}(S为选择器名).例:id为name的标签会匹配下面的样式 <style> #name{ color:red; } </style>  <p id="name">red text</p> 2.类选择器(class selector,CS):使用 . 标识selector,语法格式:.S{...

css的两种盒子模型

css的两种盒子模型:W3C标准盒子模型.IE盒子模型两者的相同之处:都包含margin.border.padding.content 两者的不同之处:W3C标准盒子模型的content部分不包含其他部分:IE盒子模型的content部分包含border.padding部分. 举例说明:一个盒子模型margin为10px,border为2px,padding为5px,content为100px,高为50px. 1.W3C标准盒子模型盒子需要占据的位置:宽10*2+2*2+5*2+100=13

CSS的两种格式化上下文：BFC和IFC

CSS的两种格式化上下文文章包含很多个人理解,如果错误,欢迎指出~ 在看本文之前,你要对CSS的盒子模型,Block-Level元素,Inline-Level元素有所了解,具体可参考CSS的盒子模型.三种元素类型. 本文具体解读了CSS针对block-level元素和inline-level元素设计的两种格式化上下文:BFC(Block Formatting Context)和IFC(Inline Formatting Context),它们规定了block-level元素和inl

引入外部CSS的两种方式及区别

1.CSS的两种引入方式通过@import指令引入 @import指令是CSS语言的一部分,使用时把这个指令添加到HTML的一个<style>标签中: 要与外部的CSS文件关联起来,得使用url而不是href,并且要把路径放在一个圆括号里面: <html> <head> <style type="text/css"> @import url(css/styles.css); </style> <!--此处的type属性

/透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用/

<!DOCTYPE html> /*透明度设置的两种方式,以及hover的用法,fixed,(relative,absolute)这两个一起用*/ <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .touch:hover .content{ visibility: visible;

WordPress引入css/js两种方法

WordPress引入css/js 是我们制作主题时首先面对的一个难点,任何一款主题都要加载自己的css,js,甚至很有可能还需要加载Jquery文件,网上方法特多,说法不一,我们今天借鉴wordpress官方最新的twentysixteen主题来学习总结一下WordPress引入css/js各种常用方法,以及最优化的加载方法. 其实网上的N种方法总结起来就两种:一.模板文件header.php中直接引入文件二.在主题的functions.php中通过WP自带的函数wp_enqueue_scri

CSS的两种盒模型

盒模型一共有两种模式,一种是标准模式,另一种就是怪异模式. 当你用编辑器新建一个html页面的时候你一定会发现最顶上都会有一个DOCTYPE标签,例如: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4

css中两种居中方式text-align:center和margin:0 auto 的使用场景

关于使用text-align:center和margin:0 auto 两种居中方式的比较前言:最近由于要学习后端,需要提前学习一部分前端知识,补了补css知识,发现狂神在讲这一部分讲的不是特别清楚,于是自己决定试一试 1.需要先了解块级元素和行间元素块级元素有:div(div默认是块级元素),p标签,h1-h6等: 行间元素有:a标签,img标签等两者区别就是,块级元素可以独占一行,之后的默认存在换行符,行间元素可以多个处于一行内,只有超过外部边框的时候会换行. 2.问题的引出 <!DO

css垂直居中两种方法

在前端面试的时候我们经常会被问道怎样使一个元素在页面垂直居中呢,这也是一个老生常谈的问题了. 解决的方法基本都是使用定位来实现 div{display: fixed;left: 50%;top: 50%;width: 200px;height: 200px;margin-left: -100px;margin-top: -100px;} 但是面试官可能还会问如果不使用定位,那你你会怎么做呢?也许会蒙了,也许会随便说但实现不了,这里我给大家分享另外一种垂直居中的方法. display:table;

引入css的两种方式

摘自:https://www.cnblogs.com/gyjWEB/p/4831646.html 在HTML中引入css的其中的两个方法: 1.如果使用链接式,需要使用如下的语句引入外部css文件: 2.如果使用导入式,则需要使用如下语句: @import "style.css" 使用链接式时,会在装载页面主体部分之前装载css文件,这样现实出来的页面从一开始就是带有样式效果的, 而使用导入式时,会在整个页面装载完成之后再装载css文件, 对于有的浏览器来说,在一些情况下,如果页面文

javascript基础之两种函数的定义方法

第一种方式:可以在函数定义之前调用也可以在函数定义之后调用: (0)函数的调用 add(,) //可以调用 (1)函数的定义: function add(x,y) { console.log(x+y) ; } (2)函数的调用 add(,)//可以调用第二种方式:函数的调用只能是在函数定义之后. (1)函数的定义 var add2=function (ax,ay) { alert(ax+ay) ; } (2)函数的调用 add2(,)

css的两种引用方式 link和@import

学习web开发的最大乐趣就是不断的发现自己以前不曾见过的东西,这些东西对于我来说是那么的新鲜有趣. 比如说今天偶尔研究别人的网站,就发现了有趣的东东. 当点开此网页的css时(这个css文件命名方式就有些奇怪,后来才知道文件名里的all是什么意思) 下面就是点开之后所看见的,之后又回到源代码,但是并没有找到其它的css文件,显然下面这些语句已经引用上了所有的css语句. 下面我就对link和@import这种引用方式进行了总结,和在应用方面进行了区分. 1.link语法结构<link href=

Android-PickerView【仿iOS的PickerView控件，并封装了时间选择和选项选择这两种选择器】使用

版权声明:本文为HaiyuKing原创文章,转载请注明出处! 前言本文主要演示Android-PickerView的选项选择器.时间选择器的简单运用.由于每一个版本略有不用,所以实际使用方式以github项目wiki文档为准. 效果图代码分析本文使用的版本是compile 'com.contrarywind:Android-PickerView:4.1.4': 时间选择器搭配DateTimeHelper使用: 需要执行setDecorView方法,否则底部虚拟导航栏会显示在弹出的

vue引入css的两种方式

方案1.在main.js中引入方式 import '@/assets/css/reset.css' 方案2.在.vue文件的<style/>标签里面引入 @import "../assets/css/index.css";

CSS&JS两种方式实现手风琴式折叠菜单

<div class="accordion"> <div id="one" class="section"> <h3><a href="#one">折叠栏1</a></h3> <div id="image1" class="image"><img src=""></d

[No000016A]CSS常用三种选择器

1.HTML Tag p{color:red;} 2.id #myid{color:red;} 3.class .myclass{color:red;} CSS常用文本样式属性 color font-size font-style(normal,italic,oblique) font-weight(normal,bold,100~900) line-height text-align text-decoration(underline,line-through) word-spacing

CSS基础语法(二) CSS的9种选择器

样式表的选择器 1.类选择器根据HTML标签的class属性选择样式应用的属性 .类值{ … } 2.ID选择器根据HTML标签的ID属性选择样式应用的元素 #id值{ … } 3.标签选择器根据HTML标签选择样式应用的属性标签名{ … } 4.子选择器 .food>li{ border:1px solid red; } 5.包含选择器 .first span{color:red;} 6.通用选择器 * {color:red;} 7.伪类选择器 1.静态伪类(只应用于超链接)

CSS的几种选择器

选择器目录选择器基础选择器标签选择器类选择器 id选择器通配符选择器复合选择器后代选择器子选择器并集选择器伪类选择器基础选择器标签选择器标签选择器可以把一类标签全部选择出来,能快速为同类标签统一设置样式,但是无法做出差异化设置. <style> div { color: green; } </style> <body> <div> 标签选择器 </div> </body> 类选择器可以给需要修改样式的标签

Oracle 分页 ROWNUM 两种分页方法和ROWID用法

一原因一 oracle默认为每个表生成rowmun,rowid字段,这些字段我们称之为伪列测试表 CREATE TABLE A ( AID NUMBER() primary key, ANAME VARCHAR2() ) insert into A values(,'甲骨文'); insert into A values(,'微软'); insert into A values(,'ioe'); insert into A values(,'iBe'); insert into A valu

css position 5种不同的值的用法

position属性 position属性指定用于元素的定位方法的类型(静态,相对,固定,绝对或粘性). 有五种不同的值: static relative fixed absolute sticky 然后使用top,bottom,left和right属性定位元素.但是,除非首先设置position属性,否则这些属性将不起作用.根据位置值,它们的工作方式也不同. position:static; 默认情况下,HTML元素定位为静态.静态定位元素不受top,bottom,left和right属性的影

js的call() ，apply() 两种方法的区别和用法，最白话文的解释，让枯燥滚粗！

百度了一圈calll()函数和apply()函数,感觉还是糊里糊涂正好我前几天刚又重新翻了一遍那本 600多页的圣经书,我习惯时不时的去打下基础,只是为了用来装逼,给人讲解....(我是有多蛋疼)! 好了下面针对这个问题,我看好多小朋友都不理解或者很迷惑,确实容易绕晕,毕竟是js独有的面向对象嘛,你要一下理解了才是不正常.开始: 先说call 这个东西 NO 1:我们先看一个简单的例子 1+1 = 2 你应该会吧 function add(a,b) { alert(a+b); } f

举例css的两种选择器的定义和用法

热门专题