动手 - 修改更多CSS样式

动手 - 修改更多CSS样式

  • 在 css 文件夹中添加一个新文件 custom.css, 并在 index.html 文件中的元素引用,如下图

  • 使用 类选择器id选择器派生选择器index.html 中的元素添加样式:
    如下图,下面会通过一个小栗子来带大家认识各种选择器的用法:
    动手 - 修改更多CSS样式_第1张图片
    先观察html中的元素(仅截取body标签中的内容):

  • 图中黑色大框的对应代码中的外层div,它具有id属性,值为“container”;class属性,值也为“container”

  • 三个颜色各异的正方形小框对应内层div,有共同的class属性值“box”
  • 各下框具有各自不同的id属性值
<body> 
    <div id = "container" class = "container">
        <div id = "box1" class = "box">div>
        <div id = "box2" class = "box">div>
        <div id = "box3" class = "box box3">div>
    div>
body

然后我们来看看CSS中如何使用选择器(注意阅读注释内容):

/*这里的“*”是通配符,意思是该页面中所有的元素都会被加上*后面大括号里的样式,
对应图中页面中所有的标签都有红色的上边框*/
*{
    margin: 10;
    padding: 10;
    border-top:2px solid red;
}
/*类选择器:这里使用.box的方式选中所有具有类名为box的元素,三个小正方形框都具有class属性值“box”,这里的样式使他们大小一样,都有绿色的右边框*/
.box{
    width: 100px;
    height: 100px;
    background-color: #777;
    border-right: 10px solid green;
}
/*id选择器:这里使用#container的方式选中具有id属性值为container的元素,即图中黑色大矩形,添加样式*/
#container{
    width: 200px;
    height: 400px;
    background-color: #222
}
/*id选择器:这里使用#box2的方式选中具有id属性值为box2的元素,即图中第二个正方形框,添加样式,改变它的背景色为白色*/
#box2{
    background-color: #FFF;
}

/*派生选择器:这里的空格代表元素层级关系,选中了id属性值为“container”的元素包含原数中具有class属性值为“class的元素,使用派生选择器会使得你的css代码层次更清晰,更有可读性”*/
#container .box3{
    background-color: blue
}
  1. 对一些属性

你可能感兴趣的:(css)