CSS之选择器与列表
来源:互联网 发布:火影忍者ol精炼数据 编辑:程序博客网 时间:2024/05/17 03:59
选择器:
列表:
list-miage:url(“”),将列表项前面的圆点改成图片
派生选择器:
就是使用有多层标签时候将标签依次用空格列出从而使得特定部分产生效果
类选择器:
在css样式中使用 .classname{}来定义class
id选择器:
在css样式中使用 #IDname{}来定义id选择器
coding:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div>div标签 <a href="http://www.baidu.com"> baidu</a></div>
<a id="aid"> baidu</a>
<div class="divclass"> divclass</div>
</body>
</html>
CSS:
div a{
color: aqua;
}
#aid{
color: brown;
}
.divclass{
color: darkmagenta;
} 列表:
list-miage:url(“”),将列表项前面的圆点改成图片
表格里面一般要使用多个选择器组合达到美观的效果
如:ID选择器与派生选择器一起使用
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body>
<table id="tb" border="1px">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr >
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
<tr class="a">
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
<tr class="a">
<td>张三</td>
<td>男</td>
<td>23</td>
</tr>
</table>
</body>
</html>
CSS:
#tb{
background-color: aliceblue;
width: 500px;
height: 400px;
border: 1px;
border-collapse: collapse;
}
#tb th{
background-color: aqua;//id选择器与派生选择器一起用以空格隔开
}
#tb tr.a{
background-color: chartreuse; //元素里面的一个类用点隔开
}
#tb tr{
text-align: center;
}
0 0
- CSS之选择器与列表
- css选择器与jquery选择器
- CSS选择器之【组合选择器】
- JQuery选择器之CSS选择器
- CSS选择器之属性选择器
- CSS:CSS选择器之【基本选择器】
- CSS:CSS选择器之【组合选择器】
- css选择器与权重
- CSS选择器“~”与“+”
- 定位与css选择器
- css选择器与优先级
- CSS选择器与层叠
- CSS属性之边框与列表
- CSS/jQuery之选择器
- Jquery之CSS选择器
- css学习之选择器
- CSS之选择器
- CSS选择器之二
- App Store上传手机屏幕截图 尺寸
- 记录ubuntu14安装jdk的过程
- HDU 1009 FatMouse' Trade(贪心)
- Android 使用Android Studio + Gradle 或 命令行 进行apk签名打包
- 大家好
- CSS之选择器与列表
- 4.类型安全和类型推断
- C++程序员对c 说的话
- 给tabBar设置图片和字体颜色的几种方法
- CSS之盒子模型
- java中的length属性和length()方法和size()方法
- DT_大数据梦工厂 第18课 RDD持久化、广播、累加器
- 禁止在Handler、Ui线程中使用第三方控件ImageLoader.loadImageSync函数,缓存问题,很痛苦
- CSS背景;链接;文本