html5的高级选择器,web@css高级选择器(after,befor用法),基本css样式

1.高阶选择器:子代后代,相邻通用兄弟,交集并集,属性,伪类,伪元素

子代后代选择器

div>p{}  div p{}

相邻通用兄弟

div+p{}  div~p{}理解:div同学的同桌p  div同学的【同学(有p的)】

交集并集选择器

div,p    div.div注意:类选择写后面

属性选择器

[id] [class='div'] [class^*$='d']

伪类选择器,伪元素选择器(重点讲解)

定义:伪类用于向某些选择器添加特殊的效果(添加样式)

伪元素用于向某些选择器设置特殊效果。(改变样式)

总结区别:

伪类本质上是为了弥补常规CSS选择器的不足;

伪元素本质上是创建了一个 有内容的 虚拟容器;

css3中:伪类和::伪元素;

可以同时使用多个伪类,而只能同时使用一个伪元素;

常用伪类: :not() :focus :link :visited :hover :active :first-child       :nth-child():nth-last-child():nth-of-type(n):only-child :only-of-type

结构性伪类选择器

:root()选择器等同于元素

:not()选择器称为否定选择器

:empty()选择器表示的就是空。是一点内容都没有,哪怕是一个空格

:target()选择器 点击a标签#111目标id为111的标签

sadadas

123

:lang()项目需要做国际化,并且中英文环境下,样式会有不同。

a:lang(en){color:'red'}选中3个以en开头的

phpstudy

HTML

511遇见

常用伪元素: ::first-letter,::first-line,::before,::after

用途1

.app:before{

content: '';

border: 1px #df147f solid;

width: 50px;

position: absolute;

left: 25px;

top:-5px;

}

.app:after{

content: '';

border: 1px #ff102c solid;

width: 50px;

position: absolute;

left: 25px;

bottom:-5px;

}

用途2 清浮动

css3中新加了个 ::selection

css3中新写法::

2.基本样式:长度颜色,字体样式,文本样式,背景样式

长度颜色

body {

background-color: yellowgreen;

}

div {

/*长度单位*/

/*px in pt mm cm em rem vw vh*/

width: 100px;

/*width: 720pt; 10in*/

/*width: 10em; 通常160px 10rem*/

/*width: 50vw; 50% view width*/

height: 100px;

/*颜色单位*/

/*单词 rgb() rgba() #六个十六进制位*/

色光三原色:红、绿、蓝。

/*background-color: cyan;*/

/*background-color: rgb(255, 0, 0);*/

/*background-color: rgba(255, 0, 0, 0);*/

/*满足AABBCC形式可以简写为abc*/

background-color: #a0c

}

字体样式

span {

/*大小*/

font-size: 30mm;

/*字重: bold粗 (normal标准 lighter较淡的) 100~900*/

font-weight: 900;

/*行高: 行高设置大于等于字体大小,字体在行高中垂直居中显示*/

line-height: 50mm;

/*样式: 一般不关心*/

font-style: normal;

/*字族:可以自定义字族当Segoe UI Emoji不存在,或不起作用,再选取 微软雅黑 */

font-family: "Segoe UI Emoji", "微软雅黑";

/*css语法: 空格隔开为多个值赋值(加粗,style,size/hight,famil), ,隔开为一个值多值赋值*/

font: lighter 50mm/80mm "Segoe UI Emoji", "微软雅黑";

}

文本样式

span {

color: red;

/*水平居中方式:left center right*/

text-align: center;

/*字划线: underline line-through overline none*/

text-decoration: overline;

/*字间距*/

letter-spacing: 3px;

/*词间距*/

word-spacing: 10px;

}

div {

width: 300px;

/*显示方式*/

display: inline-block;

}

div {

font-size: 12px;

/*垂直排列方式: top baseline bottom*/

vertical-align: baseline;

/*缩进*/

text-indent: 2em;

}

/*遇到连体的英文,html将其解析为一个单词(作为一个整体)*/

.div {

/*按标签的设定宽度强行换行,可以在单词(整体)内部换行*/

word-wrap: break-all;

}

abcdefabcdefabcdefabcdeabcdefabcdef

背景样式

div {

width: 300px;

height: 300px;

background-color: red;

}

div {

/*背景图片*/

background-image: url("data/bg_repeat.gif");

/*平铺: no-repeat repeat-x repeat*/

background-repeat: no-repeat;

/*定位*/

/*10px == 10px center 设置一个值,第二个值默认为center*/

/*10px 10px 第一个值控制水平位置,第二个值控制垂直位置*/

/*background-position: right center;*/

/*定位相关的涉及到滚动时的效果: scroll fixed*/

background-attachment: fixed;

}

div {

/*整体设置*/

background: url("data/bg_repeat.gif") 10px 10px no-repeat red;

}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/527258.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

rrt算法流程图_RRT算法移动机器人路径规划(快速扩展随机树).pdf

( )第 34 卷 第 5期 南京理工大学学报 自然科学版 Vo l. 34 No. 520 10年 10 月 Journal of N anj ing Un iversity of Science and Techno logy (N atu ral Science) O ct. 20 10基于模糊滚动 RRT算法的移动机器人路径规划康  亮 ,赵春霞 ,郭剑辉(南京理工大学 计算机科学与技…

yui3 html属性,YUI Rich Editor + invalidHTML + style

问题I am trying to insert an inline style tag into the editor content. When I call saveHTML it strips out the style block when Im in rich editor view. I have tried changing the style property of invalidHTML to false, but it still seems to strip the style b…

hhkb mac设置_把 HHKB 放在 MacBook 上使用的解决方案

我现在用的是一台 15 寸带 Touch Bar 的 MacBook Pro 🧑🏻‍💻。我一直是把 HHKB 键盘架在 MacBook 键盘 ⌨️ 上面使用的,就像下面这样。HHKB 放在 MacBook 上尺寸刚刚好,缺点就是挡住了 Touch Bar,不过对…

五年一贯制专转本计算机网络真题,金陵科技学院2017年五年一贯制专转本考试大纲(计算机网络基础)...

一、参考书目:《计算机网络技术与应用(第2版)》,段标、张玲主编,电子工业出版社,出版时间:2011年12月。二、考试形式:闭卷,考试时间90分钟三、考试内容和要求(一)考试要求1.计算机网络理论知识●…

带电检测必要性_接地电阻检测分析的必要性

无论是为保障电力系统正常运行所需要设置的接地,如三相系统的中性点接地等;还是为了人身安全将电气设备的金属外壳等接地,保证金属外壳固定为地电位,一旦设备绝缘损坏使外壳带电时不致产生危险的电位升高,引起工作人员…

html中basefont标签,HTML的basefont标签

HTML 标签只有 Internet Explorer 支持 标签。应该避免使用该标签。定义和用法 ( 推荐学习:html教程 )标签定义基准字体。该标签可以为文档中的所有文本定义默认字体颜色、字体大小和字体系列。HTML 与 XHTML 之间的差异在 HTML 4.01 中,不赞成使用 ba…

python隐式等待_selenium中隐式等待和显示等待的区别

Selenium显示等待和隐式等待的区别1、selenium的显示等待原理:显示等待,就是明确的要等到某个元素的出现或者是某个元素的可点击等条件,等不到,就一直等,除非在规定的时间之内都没找到,那么久跳出Exception…

中山大学计算机类专业分数线,中山大学计算机类专业2016年在广东理科高考录取最低分数线...

类似问题答案中山大学计算机类专业2016年在天津理科高考录取最低分数线学校 地 区 专业 年份 批次 类型 分数 中山大学 天津 计算机类 2016 一批 理科 629 学校 地 区 专业 年份 批次 类型 分数 中山大学 天津 计算机类 2016 一批 理科 629 中山大学 天津 计算机类 2015 一批 理…

hbase 按时刻查询_Hbase查询工具类,根据时间查询数据

1,需求:已知空气监测数据在hbase中存储,要求按照时间,查询citycode为110000(北京)一个月的数据,数据为每日的监测数据ID ,CITYCODE,SO2 ,CO,NO2 ,O3, PM10,PM2_5,AQI,MEASURE, TIMEPOINT13110000020141120, 110000,31…

17计算机应用,计算机应用基础17129.ppt

计算机应用基础17129.ppt计算机应用基础课件 第一章 计算机基础知识 1946年第一台数字电子计算机ENIAC诞生在美国。 1、电子计算机发展四个阶段: 第一代特征:用电子馆作为主要电子元器件 第二代特征:以晶体管作为主要电子元器件 第三代特征&a…

linux mv 保持目录结构_(三)Linux系统目录结构

点击蓝字 关注我们Linux系统目录结构:所有的类Unix系统根分区下的文件系统都基本一致。分别介绍一下功能:/bin:所有常用的可执行的二进制文件,就是“命令”,这些命令是所有用户都可以使用的。(存放系统命令的目录&…

d3.js html显示图片,d3.js v4:如何在鼠标点击节点后显示图像

在使用d3.js时仍然相当缺乏经验,我碰到了一个障碍。 希望有人能帮助我。d3.js v4:如何在鼠标点击节点后显示图像我试图在鼠标单击图形中的节点时显示图片。 理想情况下,我想单击几个节点并显示图像。双击节点应该删除图像。点击背景将删除所有…

语言速算24点的小窍门_4秒钟1道题!12岁少年三夺24点大赛冠军

数学文化节上,参加大赛的孩子们。夺得24点大赛冠军的华跃麟。本报讯 (重庆晨报上游新闻记者 秦健)“哇,太厉害了。”“快快快,超过他们俩了!”昨天下午,“第二届重庆数学文化节”在重庆市德普外国语学校体育活动中心举…

用计算机表白我不喜欢你了,隐藏式表白,表白不一定要用“我喜欢你”这几个字...

要知道女生都是喜欢浪漫的,浪漫不失为一种提升表白成功率的方式。但表白的时候,如果只是一束鲜花,一句简单“我喜欢你”,难免显得太过乏味,而且不够浪漫。那该怎么给表白添加一点新意和浪漫呢?下面,是小编…

总线制和多线制示意图_主机总线线 总线制和多线制示意图

消防主机总线不能上电是什么原因?一般回路线出现短路,开路,接地故障,还有回路卡损坏都会引起报总线故障的,排除方法:怀疑是短路故障引起的可用以下方法,在主机回路接线端把回路线的正负极线拆下…

有大学生双修计算机专业和数学专业的吗,南开大学再现学霸班

财务管理专业作为一个文理兼收的专业,系里鼓励学生建立复合的知识结构,培养学生多元的学习兴趣。在王永进、张晓农等多位教师的鼓励下,2014级财务管理专业的许多学生选择了双修和辅修其他专业。全班6个同学取得了数学双学位,两个同…

切片分析报告格式_社科论文写作101-APA数据分析结果报告格式

什么比写论文更惨?改论文!!特别是搞量化数据的,少个数据或报告格式不正确的话,重新搞数据和格式吧——又要打开spss,又要在网上看数据分析步骤,又要在熟悉的word界面花上一天。所以,…

计算机user用户的密码存储在,windows存放用户密码的文件

密码丢失的解决的办法提起Windows 2000密码丢失,确实是件令人头痛的事了,不管是自己不小心忘了密码也好,被别人恶意修改也好,一般都是重装系统,不但浪费时间,而且可能自己辛辛苦苦存储的资料也随之烟消云散…

如何关闭借呗订阅开通通知_支付宝花呗借呗隐藏规则,芝麻分600以上,花呗3.6万,借呗12万!...

阅读本文前,请您先点击上面的“蓝色字体”,再点击“关注”,这样您就可以继续免费收到文章了。每天都有分享,完全是免费订阅,请放心关注。 注:本文转载自网络,侵删经常遇到网友反馈,…

对外经贸大学计算机应用基础,对外经贸大学计算机应用基础试题.doc

对外经贸大学计算机应用基础试题1、计算机中数据的表示形式是A)八进制 B)十进制 C)二进制 D)十六进制2、硬盘工作时应非凡注重避免A)噪声 B)震动 C)潮湿 D)日光3、针式打印机术语中,24针是指A)24x24点阵 B)信号线插头有24针 C)打印头内有24x24根针 D)打印头内有24根…