CSS系列知识(一)

css的语法

selector {property: value}

即 选择器{属性:值}

学习css即学习有哪些选择器,哪些属性以及可以使用什么样的值

例如:选择所有的p元素,并且设置文字颜色为红色

<style>

p{

   color:red;

}

</style>

<p>这是一个P</p>

<p>这是一个P</p>

<p>这是一个P</p>

<p>这是一个P</p>

也可以直接在元素上增加style属性,直接在某一个元素上增加style属性即可达到css一样的效果

<p  style="color:red">这是style为红色的</p>

<p>这是一个没有style的p</p>

CSS选择器

选择器主要分3种

元素选择器

id选择器

类选择器

元素选择器

元素选择器通过标签名选择元素

在实例中,所有的p都被设置成红色

<style>

p{

  color:red;

}

</style>

<p>p元素</p>

<p>p元素</p>

<p>p元素</p>

id选择器

通过id选择元素

注: 一个元素的id应该是唯一的。另一个元素不应该重复使用

<style>

p{

  color:red;

}

#p1{

  color:blue;

}

#p2{

  color:green;

}

</style>

<p>没有id的p</p>

<p  id="p1"> id=p1的p</p>

<p  id="p2"> id=p2的p</p>

类选择器

当需要多个元素,都使用同样的css的时候,就会使用类选择器

<style>

.pre{

  color:blue;

}

.after{

  color:green;

}

</style>

<p  class="pre">前3个</p>

<p  class="pre">前3个</p>

<p  class="pre">前3个</p>

<p  class="after">后3个</p>

<p  class="after">后3个</p>

<p  class="after">后3个</p>

更准确的选择 

同时根据元素名和class来选择

<style>

p.blue{

  color:blue;

}

</style>

<p  class="blue">class=blue的p</p>

<span  class="blue">class=blue的span</span>

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 一、CSS入门 1、css选择器 选择器的作用是“用于确定(选定)要进行样式设定的标签(元素)”。 有若干种形式的...
    宠辱不惊丶岁月静好阅读 5,559评论 0 6
  • CSS基础 本文包括CSS基础知识选择器(重要!!!)继承、特殊性、层叠、重要性CSS格式化排版单位和值盒模型浮动...
    廖少少阅读 8,546评论 0 40
  • 学习CSS的最佳网站没有之一 http://www.w3school.com.cn/tags/index.asp ...
    Amyyy_阅读 4,744评论 0 1
  • 基本常识与实践 css的每一个语句包括一个场所,以及这个场所的一个属性,还要应用到这个属性一个样式,一个典型的cs...
    丁俊杰_阅读 4,680评论 0 0
  • 1.CSS简介 Cascading Style Sheet 层叠样式表 主要用来定义页面中的表现,HTML 描述页...
    hyt222阅读 4,438评论 0 0

友情链接更多精彩内容