您的位置：首页 > Web前端 > CSS
css02

2016-02-06 00:00 411 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<style type="text/css">
/*
“*”代表所有元素，一般情况下会提前定义全局选择符
*/
* {
color: pink;
font-size: 12px;
border: 1px solid blue;
}
/*类选择符链：只有同时出现 www dreamdu com的类才可以使用*/
.www.dreamdu.com {
color:blue;
}
/*一一个元素可以有多个类选择符*/
.dreamdu-red
{
color:red;
}
p.dreamdu-12px
{
font-size:12px;
}
p.dreamdu-bold
{
font-weight:bold;
}

#btw{
border: 2px;
width: auto;
/*定义边框宽度*/
border-top-width: 10px;
border-right-width: 5px;
border-left-width: 2px;
border-bottom-width: 7px;
/*定义边框颜色*/
border-top-color: #006486;
border-right-color: #F8AE11;
border-left-color: #3080CB;
border-bottom-color: #464646;
/*定义边框样式*/
border-right-style: solid;
border-left-style: double;
border-bottom-style: dashed;
border-top-style: groove;
/*border属性 是以上几个属性的集合 但是他也分为 top,right,left bottom*/
/**border: border-width border-style border-color;*/
}
#mg{
border-style: solid;
border-color: red;
/*margin:表示外边框外面可以有一层补白，他可以把块级元素分开，边外补白定义了围绕某种元素的空白*/
margin-top: 10px;
}
#pdp{
border-style: solid;
border-color: #3080CB;
margin-top: 10px;
/*padding:表示一个边框的的内部补白区，边内补白*/
padding-left: 40px;
/*相对于当前对象单位，相对长度单位可以随着当前为本属性进行调整*/
font-size: 2em;
/*相对百分比*/
width: 10%;

}
h1:before{
/**/
content: "test";
display: inline;
}
h1:after{
content: "背景";

}
/*
选择符是从上往下执行的，并向下覆盖属性
选择符1，选择符2{
color:red;
}
*/
h2{
color: #3080CB;
}
h1,h2,h3{
color: #FF0000;
border-style: solid;
}
/*只要是 p 被 div包含时候，无论p是他的什么子类，还是孙类 只要是后裔就行*/
div p{
font-size: 40px;
color: saddlebrown;
}
/*定义某一个或某一类元素的子类样式，仅仅限于子类*/
#son>p{
color: #FF0000;
}
#brother+p{
color: #FF0000;
}
/*属性选择器表示具有某种属性的选择器*/
/*表示具有type属性的input元素*/
input[type]{
color: #FF0000;
}
/*表示input标签某一个类的,某一个值*/
input[class='cd']{
color: #3080CB;
}
/*表示匹配input标签中class属性中其中具有某一个值的元素*/
input[class~='cd']{
color: #3080CB;
}
/*表示匹配input标签class属性值为cd或者跟在cd后面的链接符是-的*/
input[class|='cd']{
color: #3080CB;
}
/*表示匹配input标签class属性值中以cd开头的所有元素*/
input[class^='cd']{
color: #3080CB;
}
/*表示匹配input标签class属性值中以cd结尾的所有元素*/
input[class$='cd']{
color: #3080CB;
}
/*表示匹配input标签class属性值中具有cd值的所有元素*/
input[class*='cd']{
color: #3080CB;
}
</style>
<!--标签元素等级之间是有继承关系的，或兄弟关系的-->
<!--祖类元素-->
<body>
<p class="dreamdu-bold dreamdu-12px dreamdu-red">梦之都 红色12px的粗体</p>
<!--父类元素-->
<h1>dfafa</h1>
<h2>dsfaf</h2>
<h3>dsfafsdaf</h3>
<!--父类元素-->
<div id="btw">
<!--子类元素-->
<span>
<!--孙类元素-->
<p id="p">在乎</p>
</span>

</div>
<div id="mg">
<p id="pdp">在乎</p>
</div>

<div id="son">
<div>
<p>在乎地方</p>
</div>
<p>你是</p>
</div>
<div>
<span id="brother">fafa</span>
<p>兄弟</p>
<p>隔离</p>
</div>
<input type="text">
<input>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理
标签：
相关文章推荐
新的分享
章节导航