Html5与Css3知识点拾遗(五)
css3更新的颜色
RGBA:红、绿、蓝、不透明度
rgba(89,0,127,0.4);
HSL和HSLA:色相、饱和度、亮度、不透明度
hsl(282,100%,25%);
hsl(282,100%,25%,.75);
使用与媒体相关的样式表
link或style:添加属性media属性
有all、aural、braille、handheld、print、projection(投影设备)、screen、tty、tv
@media print{
body{
font-size:25pt;
}
p{
color:#000;
}
}
定义选择器
//元素的名称
h1{
color:red;
}
//元素所在上下文
h1 em{
color:red;
}
//类
.error{
color:red;
}
//ID
#gaudi{
color:red;
}
//名称和类
strong.error{
color:red;
}
//伪类
a:link{
color:red;
}
//属性
a[title]{
color:red;
}
//属性和属性值
a[href="http://xxx.com"]{
color:red;
}
只选择一代子元素:子子元素、非子子元素等不会选中
.architect > p {
color:red;
}
相邻同胞结合符:不必是同一种元素类型,只要彼此相邻就可以
//只有直接跟在同胞p元素后面的p元素显示为红色
.architect p+p{
color:red;
}
普通同胞结合符:选择并非直接出现在另一同胞元素,可以直接相邻,也可以不直接相邻
//会让任何属于同一父元素的同胞h1后面的h2元素显示为红色
h1~h2{
color:red;
}
选择某元素第一个和最后一个子元素
li:first-child{
color:red;
}
li:last-child{
color:red;
}
选择某元素第一个字母或者第一行
p:first-line{
color:red;
}
p:first-letter{
color:red;
}
第n个子元素
/*顺序*/
li:nth-child(3){
color:red;
}
/*逆序*/
li:nth-last-child(2){
color:blue;
}
/*分组设置简写*/
li:nth-child(4n+1){
color:bule;
}
奇偶
/*奇*/
li:nth-last-child(odd){
color:blue;
}
/*偶*/
li:nth-last-child(even){
color:blue;
}
/*只计算同类型的元素*/
h2:nth-of-type(odd){
color:red;
}
只有一个子元素
li:only child{
color:red;
}
伪元素、伪类
//是HTML并不存在的元素,并未在HTML中作相应的标记,是另一个元素的部分内容
::first-line/*第一行*/
::first-letter/*第一个字母*/
::before/*在某元素之前加*/
::after/*在某元素之后加*/
//应用于一组HTML元素,无需用类标记,不用写出class="first-child"
:first-child
:link
:hover
按状态选择链接
//新的、未访问的
a:link{
color:red;
}
//访问过
a:visited{
color:orange;
}
//获得焦点(通过Tab键)
a:focus{
color:purple;
}
//鼠标指针停留
a:hover{
color:green;
}
//激活时
a:active{
color:blue;
}
按属性选择元素
[attribute] //指定属性
[attribute="value"] //完全匹配属性值
[attribute~="value"] //匹配以空格分隔的多个单词,包括完全匹配指定值
artcle[class~="barcelona"]{
color:red;
}
[attribute|="value"] //以value-开头
h2[lang|="es"]{
color:red;
}
[attribute^="value"] //以value开头,为完整的单词或单词的一部分
a[href^="http://"]{
color:orange;
}
[attribute$="value"] //以value结尾,为完整的单词或单词的一部分
img[src="logo.png"]{
border:1px solid green;
}
[attribute*="value"] //至少包含value一次的元素,不必是属性值中的完整单词,为指定值的子字符串
a[href][title*="how"]{
color:red;
}
结构性伪类选择器
root,not,empty,target
允许根据文档中的结构来指定元素样式
/*根元素*/
:root{
background:red;
}
/*排除子元素*/
div *:not(h1){
coloe:red;
}
/*内容为空白时*/
:empty{
background:red;
}
/*跳转*/
:target{
background:red;
}
UI元素状态伪类选择器
css3中,有17种UI元素伪类选择器
/*鼠标浮动*/
input[type="text"]:hover{
color:red;
}
/*获得焦点*/
input[type="text"]:focus{
color:red;
}
/*鼠标按住不放*/
input[type="text"]:active{
color:red;
}
/*选中*/
input[type="checkbox"]:checkbox{
color:red;
}
enabled和disabled
input[type="text"]:enable{color:red;}
input[type="text"]:disabled{color:black}
Html5与Css3知识点拾遗(五)的更多相关文章
- Html5与Css3知识点拾遗(二)
页面title 选择能简要概括文档内容的文字作为title文字,title核心内容放在前60个字符 分级标题 1.创建分级标题时,避免跳过级别,如h3直接跳到h5,但允许从低级别跳到高级别. 2.不用 ...
- Html5与Css3知识点拾遗(八)
css5新增的元素与属性 表单内元素的属性 1. form属性 之前必须书写在表单内部.而在Html5中,可以放在任何位置,为元素指定一个form属性,属性值为该表单的id,就可以声明该元素属于指定表 ...
- Html5与Css3知识点拾遗(七)
布局 实例:规范的命名和编排 <body> <div class="page"><!--page开始--> <header class=& ...
- Html5与Css3知识点拾遗(六)
web字号 px() 百分比(较常用) em(最常用):一般1em=16px,相对单位.以父元素作参照系,父元素大小是不确定的 body{ font-size:100%; /*父元素默认为16px*/ ...
- Html5与Css3知识点拾遗(九)
css布局 控制元素的显示类型和可见性 块级元素 dispaly:block: 行内元素(不能设置宽度) display:inline: 不接受padding设置,但padding-top和paddi ...
- Html5与Css3知识点拾遗(四)
web图像 JPEG:适用于大多数照片,颜色较多,可接受质量损失的图像 PNG-8:适用标识.重复的图案以及其他颜色较少的图像或具有连续颜色的图像 PNG-24:不支持颜色更多的图像,适用与颜色丰富且 ...
- Html5与Css3知识点拾遗(三)
文本 small:包括免责申明.注意事项.法律限制.版权信息,只适用于短于,常包含在页面级的footer里 H5对i和b的重新定义 b:提醒文字.不传达任何额外的语气.文档摘要关键词.评论中的产品名. ...
- Html5与Css3知识点拾遗(一)
1.元素 空元素: 可选的空格空格和斜杠 <img src="x.jpg" width="300" alt="pic" /> & ...
- HTML5与CSS3知识点总结
好好学习,天天向上 本文已收录至我的Github仓库DayDayUP:github.com/RobodLee/DayDayUP,欢迎Star 原文链接:https://blog.csdn.net/we ...
随机推荐
- redis集群相关
1.主从数据库配置 为master数据库添加slave数据库只需要在从数据库的配置中添加配置: slaveof 主数据库地址 主数据库端口 当然,也可以通过命令: redis-server --por ...
- Redis梳理
- Maven私服(Nexus)启动创建Windows服务
sc create lutao-maven-nexus binpath= D:\maven-server\nexus--\bin\nexus.exe type= own start= auto dis ...
- JAVA Maven 安装 jar 包到本地仓库,以 Oracle11g 的访问包 为例
maven 作为 java 的首选包管理工具,使我们在创建和维护项目的时候变得十分简单,但是 maven 仓库并不是拥有的一切 jar 包的, 很多 jar 包由于收费或者版权什么的其他原因,并不存在 ...
- python接收html页面上传的文件
使用的 flask, 没有安装的先安装 pip install flask 示例代码:示例没有自动创建静态文件夹,需要自己在同级 创建一个名为 static 的文件夹来存放上传的文件 示例展示为图片 ...
- block引用外部变量原理
block在赋值时才会生成对应的block结构体实例(结构体数据结构在编译时已经生成),赋值时会扫一遍里面引用的外部变量(嵌套block中的外部变量也算,只不过嵌套block中的外部变量会被内外两个b ...
- nexus的安装和简介
下载nexus Nexus 是Maven仓库管理器,通过nexus可以搭建maven仓库,同时nexus还提供强大的仓库管理功能,构件搜索功能等. 下载Nexus, 下载地址:http://www.s ...
- 获取当前页面url
function getCurrUrl() { var url = ""; if (parent !== window) { try { url = window.top.loca ...
- spfa与dijkstra(最短路)
spfa: void spfa(){ queue<int> que; while(!que.empty()){que.pop();} que.push(s); vis[s]=; while ...
- Windows导入EOS工程
[Windows导入EOS工程] 编写 EOS 智能合约时,有许多EOS提供的结构.函数.宏.文档对这些内容的描述毕竟模糊,再多的文档也比不过看实际的代码,所以还要下载EOS代码看一下. 最好有个ID ...