HTML5 学习之路 四

CSS的两大重点

属性

通过属性的复杂叠加才能做出漂亮的网页

选择器

通过选择器找到对应的标签设置样式

选择器的作用

选择对应的标签,为之添加样式

  • 标签选择器
    根据标签名找到标签
<div>div1</div>
<div>div2</div>
div{
   color:red;
}

这两个标签显示都是红色

  • 类选择器
    类选择器的格式 .类名
<p class="=@"higt">第一段文件</p>
<p>第二段文字</p>
<div class="higt">div1</div>
<div>div2</div>
 .higt{
            color: red;
        }

第一段文字div1 是红色的字体

  • id选择器
    id选择器的格式 #id
<p id="first">11111</p>
<p>222222</p>
 #first{
            color: red;
        }

11111是红色

id与class的区别:
id 的名字是唯一的,class可以加到多个标签中
  • 并列选择器
<p class="higt">div1</p>
<p>div2</p>
<div class="higt">1111</div>
<div>2222</div>
div,.higt{
            color: red;
        }

除了div2以外 都是红色

  • 复合选择器
<p class="higt">div1</p>
<p>div2</p>
<div class="higt">1111</div>
<div>2222</div>
div.higt{
            color: red;
        }

只有1111是红色

  • 后代选择器
<div>
       <p>11111</p>
       <span>
           <p>222222</p>
       </span>
   </div>
<p>外面的</p>
div p{
            color: red;
        }

111111222222都是红色的

常用的就这些选择器,基本可以访问所有的标签了,后面还有
直接后代选择器,属性选择器,相邻兄弟选择器

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 3,209评论 0 40
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,321评论 0 5
  • 简介浏览器可以被认为是使用最广泛的软件,本文将介绍浏览器的工 作原理,我们将看到,从你在地址栏输入google.c...
    听风阁阅读 3,316评论 0 7
  • 目录一、介绍二、渲染引擎三、解析与DOM树构建四、渲染树构建五、布局六、绘制七、动态变化八、渲染引擎的线程九、CS...
    饥人谷_米弥轮阅读 2,472评论 0 10
  • 作为前端和后台最基础可靠的神器工具JQuery,你真的对她有足够了解么? 亚非拉地区苦逼的前端er们,有时候不得不...
    扭了个妞阅读 385评论 0 0