CSS笔记--选择器
CSS笔记--选择器
mate的使用
<meta charset="UTF-8">
<title>Document</title>
<meta name="keywords" content="java培训,大前端培训">
<meta name="description" content="据说中国口碑最好的IT培训机构!">
<meta http-equiv="refresh" content="5; http://www.itcast.cn">
<link rel="stylesheet" href="1.css">
<link rel="icon" href="favicon.ico">
keywords:为了可以方便速索
description:是网站的描述信息
refresh:页面刷新,内容是数字;地址,多久之后跳转到这个地址。
css的外部引入
<link rel="stylesheet" href="1.css">
<link rel="icon" href="favicon.ico">
表格
<table width="400" height="400" border="1" cellspacing="0" align="center" bgcolor="pink">
<tr>
<th colspan="2">京东会员</th>
<!-- <td></td> -->
</tr>
<tr>
<td>用户名:</td>
<td><input type="text" value="请输入用户名" maxlength="6"><font color="red" size="2">最多输入6个字符</font></td>
</tr>
<tr>
<td>密 码:</td>
<td><input type="password" maxlength="6"><font color="red" size="2">最多输入6个字符</font></td>
</tr>
<tr>
<td>验证码:</td>
<td><input type="text"><br><br><img src="作业/yzm.jpg" width="100"></td>
</tr>
<tr>
<td align="center" colspan="2"><a href="dl.html">登录</a>|<a href="zc.html">注册用户</a></td>
<!-- <td></td> -->
</tr>
</table>
介绍:
- table:设置长和高
- 背景色(bgcolor)
- colspan:合并列
选择器
- 标签选择器
- 类选择器
- id选择器
案例
<style type="text/css">
类选择器
.G{
font-size: 200px;//字体大小和颜色
color: #000099;
}
.o1{
font-size: 200px;
color: #990000;
}
.o2{
font-size: 200px;
color: orange;
}
.g1{
font-size: 200px;
color: #000099;
}
.l{
font-size: 200px;
color: #009900;
}
.e{
font-size: 200px;
color: #990000;
}
</style>
</head>
<body>
<span class="G">G</span>
<span class="o1">o</span>
<span class="o2">o</span>
<span class="g1">g</span>
<span class="l">l</span>
<span class="e">e</span>
</body>
通配符选择器
*{
font-size: 100px;
color: red;
}
交集选择器
div.test[标签+类选择器]
div#test[标签+id选择器]
后代选择器
类选择器
/*.box{
font-size:40px;
color:red;
}
后代选择器[标签+标签]
div span{
font-size: 50px;
}*/
类+标签
/*.box span{
background-color: blue;
}*/
/* .box .miss{
color:red;
}*/
.box span{
color:red;
}
子代选择器
div>span{
color:red;
font-size:40px;
}
p>span{
color:green;
font-size:60px;
}
子代和后带的区别就是,后代不论隔了多少代,子代仅仅是一代。
并集选择器
.box,#miss,span,h1{
font-size:100px;
color: #fff;
background-color: green;
}
CSS笔记--选择器的更多相关文章
- CSS 笔记——选择器
1. 选择器 (1)类型选择器(标签选择器) 基本语法 E { sRules } 使用说明 类型选择器.以文档对象(Element)类型作为选择器. 选择面较大,适合做某种标签元素外观的常规设置. 代 ...
- 【CSS复合选择器、元素显示模式、背景】前端小抄(3) - Pink老师自学笔记
[CSS复合选择器.元素显示模式.背景]前端小抄(3) 本学习笔记是个人对 Pink 老师课程的总结归纳,转载请注明出处! 一.CSS的复合选择器 1.1 什么是复合选择器 在 CSS 中,可以根据选 ...
- CSS笔记——属性选择器
1.存在和值(Presence and value)属性选择器这些属性选择器尝试匹配精确的属性值:[attr]:该选择器选择包含 attr 属性的所有元素,不论 attr 的值为何.[attr=val ...
- 前端学习笔记之CSS后代选择器、子元素选择器、相邻兄弟选择器区别与详解
派生选择器用的很多,派生选择器具体包括为后代选择器.子元素选择器.相邻兄弟选择器,我们来理解一下他们之间的具体用法与区别. 1.css后代选择器语法:h1 em {color:red;} 表示的是从h ...
- CSS 笔记之 CSS 选择器
/*先设置背景再设置前景*/ pre{ background-color: #f8f8f8; border: solid 1px #ccc; border-radius: 3px; overflow: ...
- HTML+CSS笔记 CSS笔记集合
HTML+CSS笔记 表格,超链接,图片,表单 涉及内容:表格,超链接,图片,表单 HTML+CSS笔记 CSS入门 涉及内容:简介,优势,语法说明,代码注释,CSS样式位置,不同样式优先级,选择器, ...
- CSS系列(7)CSS类选择器Class详解
这一篇文章,以笔记形式写. 1, CSS 类选择器详解 http://www.w3school.com.cn/css/css_selector_class.asp 知识点: (1) 使用类选择 ...
- CSS的选择器
<div id="demo"> <div class="inner"> <p><a href="#" ...
- JS实战 · 仿css样式选择器
代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/ ...
随机推荐
- sql中使用正则查询
- window安装MQTT服务器和client
http://activemq.apache.org/apollo/download.html 官方下载地址 MQTT目录: MQTT简单介绍 window安装MQTT服务器和client ja ...
- sublime 编辑器汉化
一.下载Sublime编辑器 官网下载地址:http://www.sublimetext.com/3 二.下载汉化包 汉化包下载地址:http://files.cnblogs.com/akwwl/su ...
- Yeslab华为安全HCIE七门之-防火墙UTM技术(5篇)
课程目录: 华为安全HCIE-第四门-防火墙UTM技术(5篇)\1_内容安全_内容过滤.avi 华为安全HCIE-第四门-防火墙UTM技术(5篇)\2_内容安全-url过滤.avi 华为安全H ...
- wc---计算字数。
Linux wc命令用于计算字数. 利用wc指令我们可以计算文件的Byte数.字数.或是列数,若不指定文件名称.或是所给予的文件名为"-",则wc指令会从标准输入设备读取数据. 语 ...
- tac---反转输出文件
tac命令用于将文件已行为单位的反序输出,即第一行最后显示,最后一行先显示.
- Redis 数据持久化的方案的实现
原文:Redis 数据持久化的方案的实现 版权声明:m_nanle_xiaobudiu https://blog.csdn.net/m_nanle_xiaobudiu/article/details/ ...
- 转:关于ios 推送功能的终极解决
刚刚做了一个使用推送功能的应用 遇到了一些问题整的很郁闷 搞了两天总算是弄明白了 特此分享给大家 本帖 主要是针对产品发布版本的一些问题 综合了网上一些资料根据自己实践写的 不过测试也可以看看 首先要 ...
- 从Java到C++——常量的使用规则
常量是一种标识符,它的值在执行期间恒定不变.C语言用 #define来定义常量(称为宏常量). C++ 语言除了 #define外还能够用const来定义常量(称为const常量). 一.为什么须要常 ...
- solr 亿万级数据查询性能測试
废话不多说,我电脑配置 i7四核cpu 8G内存 插入数据文档中有5个字段,当中有两个分词.一个int,一个date 批量插入測试一次10万循环10次总共100万用时85秒 批量插入測试一次10万循环 ...