关系选择器是指根据与其他元素的关系选择元素的选择器,常见的符号有空格.>.~,还 有+等,这些都是非常常用的选择器. 后代选择器:选择所有合乎规则的后代元素.空格连接. 相邻后代选择器:仅仅选择合乎规则的儿子元素,孙子.重孙元素忽略,因此又称“子 选择器”.>连接.适用于 IE7 以上版本. 兄弟选择器:选择当前元素后面的所有合乎规则的兄弟元素.~连接.适用于 IE7 以上 版本. 相邻兄弟选择器:仅仅选择当前元素相邻的那个合乎规则的兄弟元素.+连接.适用于 IE7 以上版本. 并列选择器:使…

认识css中所有的选择器 什么是选择器 每一条样式申明(定义)由两部分组成 选择器{ 样式:    } 标签选择器 p{ font-size:12px:  line-height:1.6em;     } 类选择器 .类选择器的名称{ css样式代码:   } 需要注意的是 1.英文圆点开头  2.其中类选择器可以任意起名(不用中文) 使用方法 1.使用合适的标签把修饰的内容标记起来. <span>OA</span> 2.使用class="类选择器的名称"为标签…

1.伪类选择器 在CSS中,最常用的伪类选择器是使用在a(锚)元素上的几种选择器,它们的使用方法如下: a:link{color:#FF0000;text-decoration:none} a:visited{color:#FF0000;text-decoration:none} a:hover{color:#FF0000;text-decoration:none} a:active{color:#FF0000;text-decoration:none} 2.伪元素选择器 伪元素选择器不是针对真…

点击上方蓝色字体,关注我 最详细的css3选择器解析 ​ 选择器是什么? 比较官方的解释:在 CSS 中,选择器是一种模式,用于选择需要添加样式的元素. 最常见的 CSS 选择器是元素选择器.换句话说,文档的元素就是最基本的选择器. 看代码,元素选择器就是这个: h1作为一个元素标签,是最基本的选择器,这样可以对h1标签设置属性. 选择器有哪些? 常见的选择器:元素选择器,类选择器,ID选择器,属性选择器,派生选择器,本文的思路就是先讲讲最常用的选择器,再讲讲用得比较少的选择器.如果你觉得能学到…

一.标签选择器:直接将HTML标签(Tag)作为选择器,可以是p.h1.dl.strong等HTML标签.如: p { font:12px;}em { color:blue;}dl { float:left; margin-top:10px;} 二.id选择器:我们通常给页面元素定义id.例如定义一个层 <div id="menubar"></div> 然后在样式表里这样定义: #menubar{margin:0 auto;background:#ccc;col…

属性选择器 结构性伪类选择器 UI状态伪类选择器 CSS其他选择器…

css常用的选择器:类选择器,id选择器,元素选择器,伪类选择器,伪元素选择器,属性选择器. 选择器的优先级由四个部分组成:0,0,0,0 一个选择器的具体优先级如下规则确定: ID选择器 加 0,1,0,0 类选择器,伪类选择器,属性选择器 加0,0,1,0 元素和伪元素选择器 加0,0,0,1 结合符和通配符对优先级没有贡献 例子 h1{color:red;} /* 优先级为 0,0,0,1 */ p em{color:purple;} /* 优先级为 0,0,0,2 */ p.bright…

很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来实现相同效果罢了. HTML: <div id="box"> <p>pppppppp</p> <span></span> </div> CSS: div,p{ margin:0; padding:0; } #box{…

css中常用的选择器有: 1.元素选择器:h1{}  如<h1></h1> 2.类选择器:.test{}或者h1.test{} 如<h1 class="test"></h1> 3.ID选择器:#test{}  如<h1 id="test"></h1>  id的值在页面中是唯一的 4.包含选择器: h1 .test{}  如<h1><span class="test&q…

主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择器.伪类选择器 CSS样式优先级 CSS 概述 CSS:Cascading Style Sheet,层叠样式表.CSS的作用就是给HTML页面标签添加各种样式,定义网页的显示效果.简单一句话:CSS将网页内容和显示样式进行分离,提高了显示功能. 接下来我们要讲一下为什么要使用CSS. HTML的缺陷…

          国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢?         PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核).   px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册)   em是相…

前段时间,终于仔仔细细的把pt.px.em.rem了解了一遍,简单整理了一下做个记录. pt.px.em.rem都是什么 pt单位名称为点(Point),绝对长度单位.现在网页中出现得很少甚至不出现,常用于印刷行业. 单位换算:1in = 2.54cm = 25.4 mm = 101.6q = 72pt = 6pc = 96px px单位名称为像素,相对长度单位,像素px是相对于显示器屏幕分辨率而言的.像素的使用性特别广. em单位名称为相对长度单位.它没有一个固定数值,相对于当前对象内文本的字…

px 相对长度单位,像素px 是相对于显示器屏幕分辨率而言的.是我们网页设计常用的单位,也是基本单位. 通过 px 可以设置固定的布局或者元素大小,缺点是没有弹性.用 px 设置字体大小时,比较稳定和精确.但是这种方法存在一个问题,当用户在浏览 Web 页面时,如果改变了浏览器的缩放,这时会使得 Web 页面布局被打破. em  相对长度单位,相对于当前对象内文本的字体大小,相对于其父元素的 font-size 而计算的.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.也就…

本文最初于2015-10-03发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 本文主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS几种扩展选择器:后代选择器.交集选择器.并集选择器.伪类选择器 CSS样式优先级 前言 现在的互联网前端分三层: HTML:超文本标记语言.从语义的角度描述页面结构. CSS:层叠样式表.从审美的…

CSS 基础知识点汇集 版权声明:这篇博客是别人写的,大神博客地址 : https://www.cnblogs.com/Mtime/p/5184685.html 1.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),是一种用来表现 HTML 文档样式的语言,样式定义如何显示 HTML 元素,是能够真正做到网页表现与结构分离的一种样式设计语言.样式通常存储在样式表中,外部样式表通常存储在 CSS 文件中,多个样式定义可层叠为一. HTML 标签被设计为用于定义文…

国内的设计师大都喜欢用px,而国外网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如…

首先,px.em.rem都是相对单位: px(pixel像素)是相对于显示器屏幕分辨率的,IE无法调整那些使用px作为单位的字体大小: em是相对于当前对象内文本字体的尺寸,如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.(引自CSS2.0手册),不过需要注意的是em单位会继承父级元素的字体大小: 而rem是CSS3新增的一个相对长度单位(root em,根em):那么这个单位与em有什么区别与联系呢?rem和em单位一样,都是一个相对单位,不同的是em是相对于父元素的fo…

[CSS简介.基础选择器.字体属性.文本属性.引入方式]前端小抄(2) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS简介 CSS 的主要使用场景就是布局网页,美化页面的. 1.1 HTML的局限性 HTML 只关注内容的语义,虽然 HTML 可以做简单的样式,但是带来的是无尽的臃肿和繁琐-- 1.2 CSS网页的美容师 CSS 是 层叠样式表 的简称. 有时我们也会称之为 CSS 样式表 或 级联样式表. CSS 也是一种 标记语言. CSS 主要用于设置 HT…

欢迎大家去博客冰山一树Sankey,浏览效果更好.直接右上角搜索该标题即可 博客园主页:博客园主页-冰山一树Sankey CSDN主页:CSDN主页-冰山一树Sankey 前端学习:学习地址:黑马程序员pink老师前端入门教程,零基础必看的h5(html5)+css3+移动,下面这些都是一些学习笔记.临渊羡鱼,不如退而结网!!愿我自己学有所成,也愿每个前端爱好者学有所成 一. CSS简介 1.1 HTML的局限性 1.2 CSS-网页的美容师 CSS 是层叠样式表 ( Cascading Sty…

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? px :像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) px 特点: 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). em :是相对长度单位.相对于当前对象内文本…

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 -1. IE无法调整那些使用px作为单位的字体大小: -2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: -3. Firefox能够调整px和em,rem,但是有大部分的国产浏览器使用IE内核. px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前…

PX特点: 1 IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸.(引自CSS2.0手册) 任意浏览器…

概念介绍: 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在扫描打印时一般都有DPI可选.Windows系统默认是96dpi,Apple系统默认是72dpi. 2.em(相对长度单位,相对于当前对象内文本的字体尺寸):是一个相对长度单位,最初是指字母M的宽度,故名em.现指的是字符宽度的倍数,用法类似百分比,如:0.8em, 1.2em,2em等.通常1em=16px…

id 和 class 选择器 如果你要在HTML元素中设置CSS样式,你需要在元素中设置"id" 和 "class"选择器. id 选择器 id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式. HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 "#" 来定义. 以下的样式规则应用于元素属性 id="para1": #para1 { text-align:center; color:red; }…

在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; } h1 { font-size:44px; } @media (min-width: 768) { body { font-size: 17px; } h1 { font-size:24px; } } 除此之外,我们还可以通过下面的方式让字体自适应屏幕分辨率. 1vw = viewport宽度的1…

一个CSS中Z-index的用法 CSS教程:彻底掌握Z-index属性     大多数的CSS属性都很容易使用.常常,当您对标记语言的元素使用CSS属性时,产生的结果会随着您刷新页面而立即呈现.而另一些CSS属性,却会有一些复杂,且只能在给定的环境下才会工作. Z-index属性便属于上面所说的后面的那一组.Z-index无疑的比其他任何属性都会频繁的导致(兼容性)上 的混乱和(开发者心理上)的挫败感.但滑稽的是,一旦你真正理解了Z-index,你会发现它却是一个非常容易使用的属性,并且会为解…

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em和rem,那么三者有什么区别,又各自有什么优劣呢? PX特点 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em或rem作为字体单位: 3. Firefox能够调整px和em,rem,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.…

在刚接触CSS时,px用的比较多,也很好理解,可是用久了就会发现有些缺陷,特别是在做响应式开发的时候. 那这么多单位到底在什么时候用什么单位合适呢?今天就来探讨一下. 先大致解释一下这些单位的意思: 1.px px单位名称为像素,像素是固定大小的单元,用于屏幕媒体(即在电脑屏幕上读取).一个像素等于电脑屏幕上的一个点 (是你屏幕分辨率的最小分割).许多网页设计师在web文档使用像素单位以生产浏览器渲染的像素完美呈现的网站. 像素单元的一个问题是,它没有为视障读者的扩展,以适应移动设备. 2.em…

国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了em作为字体单位: 3. Firefox能够调整px和em,但是96%以上的中国网民使用IE浏览器(或内核). px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的.(引自CSS2.0手册) em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为…

1,px像素(Pixel).相对长度单位.像素px是相对于显示器屏幕分辨率而言的. 2,em是相对长度单位.相对于当前对象内文本的字体尺寸.如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸 3,rem为元素设定字体大小时,仍然是相对大小,但相对的只是HTML根元素 4,任意浏览器的默认字体高都是16px.所有未经调整的浏览器都符合: 1em=16px.那么12px=0.75em,10px=0.625em. 12px/16px=0.75em 5,为了简化font-size的换算…