您的位置：首页 > 编程语言 > PHP开发

学习PHP过程记录（8）

2015-03-08 11:41 260 查看

css各种样式选择器的学习

<head>
<head>
<title>样式选择器 </title>
<link rel="stylesheet" type="text/css" href="mycss.css">
<style>
/*类选择器*/
/*
同一个选择器能有不同的类，因而允许同一个元素有不同的样式
*/
p{/*对标签<p>有用*/
background-color:#112233;
}
p.cla1{/*对标签<p>中的cla1这个类有用*/
color:red;
}
p.cla2{
font-size:3cm;
}
.cla3{/*对所有的cla3类有效*/
border:1px solid blue;
}

/*ID选择器,一个HTML文件中只能有唯一的ID*/
/*ID属性常常结合javascript结合使用*/
#id1{
color:#546576;
background-color:white;
border:10px solid black;
font-size:5cm;
}

/*关联选择器只是一个用空格隔开的两个或更多的单一选择器给成的字符串。因为层叠顺序的规则，它们的优先权比单一的选择符大。必须按关联关系使用，不能有反顺序。只要能保持关联关系就可以，不管是在多少层。
*/
div #one .two p{
color:green;
font-size:3cm;
}
/*组合样式选择器*/
/*为了减少样式表的重复声明，组合是允许的.只要使用英文逗号（,）隔开每个选择符就可以了 */

/*伪元素选择器*/
/*
伪元素选择器定义了HTML标签在不同状态下的表现形式
只有a和p这两个HTML元素可以使用
*/
/*
使用语法：
标签[.类名]:伪元素
a:link 没有任何动作前的状态
a:hover 光标移到超链接上的状态
a:active 选择超链接的状态
a:visited 访问过超链接的状态

p:first-letter 一个段落中首个字母的状态
p:first-line 一段落中首行的状态
*/
a:link{
color:yellow;
font-size:1cm;
}
a:hover{
color:green;
font-size:2cm;
}
a:active {
color:blue;
font-size:3cm;
}
a:visited {
color:red;
background-color:green;
font-size:4cm;
}

/*所有嵌套在某个HTML标签中的HTML标签都会继承外层标签设置的样式规则。 */
/*
优先级：
关联>ID选择器>CLASS选择器>HTML标签选择器*/
</style>
</head>



<body>
<h1>好好学习，天天向上！</h1>
<h3>---Zedong Mao</h3>
<p> aaaaaaaaaa <p>
<p class="cla1"> abbbbbbbbbbbb </p>
<p class="cla2 cla1"> ccccccccccccc </p>
<p class="cla2 cla3"> dddddddddddddddd </p>
<p id="id1"> eeeeeeeeeeeeeeee </p>

<div>
<div id="one">
<div class="two">
<p>ffffffffffffffffffffffffffffffff</p>
</div>
</div>
</div>

<a href="http://www.baidu.com"> 百度 </a><br />
<a href="http://www.jd.com"> 京东 </a><br />
<a href="http://www.taobao.com"> 淘宝 </a><br />

</body>

</head>

css文件
/*h1的样式设置*/
h1{
background-color:grey;
color:#F00;
border:10px solid green;
text-align:center;
}
/*h3的样式设置*/
h3{
background-color:grey;
color:#F00;
border:10px solid green;
text-align:right;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： css html php stylesheet 标签

相关文章推荐

新的分享

章节导航