Css技术入门笔记02
第一篇见Css入门笔记01http://blog.csdn.net/qq_32059827/article/details/51406674
4、其他选择器
4.1、关联选择器
有时在页面上会出现我们需要让CSS样式作用在某个标签中的标签上。
格式：
父标签名 子标签名
<div>
div中的数据
<span>div中的span中的数据</span>
</div>
<span>span中的数据</span>
当前的CSS要作用在div中的span标签上
div span{
color:red;
font-size: 30px;
}
4.2、组合选择器
当一个CSS样式需要作用在多个标签上，可以使用class选择器
还可以使用组合选择器：
格式：
标签名,标签名,....{
}
class或id选择器,标签名,....{
}
多个标签之间使用逗号，表示当前的CSS样式要作用多个标签上，
如果多个标签之间使用空格，标签的标签的父子关系
div span, div div,#two a
当前的CSS样式需要作用在 div下的span标签、div下的div标签，还有id为two标签中的a标签上
div span, div div,#two a{
color:red;
font-size: 30px;
}
4.3、伪元素选择器
在CSS技术中，提前给我们假定了一些元素名称的选择器名字。把这些名字称为伪元素选择器。
演示伪元素选择器
a:link 伪元素
某个标签未被访问前的样式设定
a:hover
鼠标悬停在标签上时的css样式
a:active
鼠标点击下，但没有释放时的CSS样式
a:visited
标签被点击后，被访问过之后的CSS样式
如果使用伪元素设置超链接，这4个伪元素有书写顺序。
L V H A
<style type="text/css">
a:link{
color:red;
font-size: 28px;
text-decoration:overline;
cursor: all-scroll;
}
a:visited {
font-size:18px;
text-decoration: line-through;
color: gray;
}
a:hover {
font-size: 38px;
text-decoration: none;
color: blue;
}
a:active {
font-size: 50px;
text-decoration: underline;
color: yellow;
}
div{
border: 1px solid red;
width: 200px;
height: 150px;
}
div:hover{
color:blue;
cursor: pointer;
}
input{
/*去掉文本框的四个边框*/
border: none;
border-bottom: 1px dotted blue;
color: gray;
}
input:focus{
background-color: AliceBlue ;
}
</style>
<script type="text/javascript">
function _clear(){
document.getElementById("name").value="";
}
</script>
</head>
<body>
<a href="#" >njupt</a>
<hr />
<div>数据</div>
用户名：<input type="text" value="请输入用户名" id="name" onclick="_clear();"/>
</body>
5、盒子模型(重要)
在使用CSS控制页面上的标签时，所有的标签我们都可以给其设置边框。那么当前页面上的这个标签和其他标签之间可能会有距离，本标签中封装的子标签，或者本标签中封装的数据距离本标签本身边框也可能存在距离。我们把这个标签本身称为一个盒子。盒子与盒子之间可能有距离，盒子本身和盒子中存储的内容也会有距离，把这样的模型称为盒子模型。
CSS中使用border描述标签本身的边框，使用margin描述标签本身距离其他标签的距离，使用padding描述标签本身距离其内部封装的数据的距离。这些距离都可以分别描述上右下左四个距离。
