CSS基础（1.选择器）

来源：互联网发布：java 图片裁剪工具类编辑：程序博客网时间：2024/06/03 16:51

先来一个小例子，告诉你什么是CSS

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title></head><body><div style="background-color: gold; height: 66px;">1</div><!--style里就叫做CSS，可以设置很多，比如第一个设置颜色，第二个设置高度--><div style="background-color: olivedrab; height: 66px;">1</div><div></div></body></html>

接下来我们就深入了解：

CSS里面的注释，和C++有相同之处！

/*xxxxxxx*/

选择器：（其实可以理解成函数）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #i1{            background-color: rebeccapurple; height: 66px;        }        .c1{            background-color: olivedrab;            height: 10px;        }    </style></head><body><div id="i1">1</div><!--id属性是寻找#号这种很罕见，因为id是不可以重复的！如果后边要只用i1的内容，再次写id="i1"是错误的必须要重新写一个#号的内容，id="i2"--><div class="c1">1</div><!--class属性是寻找.c号class是可以重复使用的这种是很常用的--><div></div></body></html>

还有一种写法：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        #i1,#i2,#i3{            background-color: olivedrab;            height: 10px;        }    </style></head><body><div id="i1">1</div><div id="i2">1</div><div id="i3">1</div><div></div></body></html>

这里也可以用.c1,.c2一样的方法

接下来呢：

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        div{            background-color: blue;            color: black;        }        /*找到所有的div标签，使他们的背景为蓝色，字体颜色为黑色*/    </style></head><body><div>1</div><span>这里不是div<div>    嵌套在span里面的div</div>这里也不是div</span><div >1</div></body></html>

那么，如果只想给span里面的div加上style呢？

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        span div{            background-color: blue;            color: black;        }        /*当然也可以写成 .c1 div  表示，找所有class="c1"标签内所有的div*/        /*也可以套很多层，不过如果你套的太多，是不妥当的*/  </style></head><body><div>1</div><span>这里不是div<div>    嵌套在span里面的div</div>这里也不是div</span><div >1</div></body></html>

还有一种：属性选择器（在头里定义好，身体里使用的时候，用头定义的即可）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        input[type="text"]{width: 100px; height: 100px;}        input[type="password"]{width: 100px; height: 100px;}    </style></head><body><input type="text"><input type="password"></body></html>

另外：这里还有一个问题，就是当属性有相同的时候，存在

优先级：

1.标签上的style优先

2.编写顺序，越往下越优先（就近原则）

阅读全文

0 0