前言：这是我第二次写博客，记录自己所学的点点滴滴，希望大家一起共勉！

说到选择器大家都不陌生，估计用的最多的还是id选择器和类选择器，至于其他的选择器，今天在这里我避而不谈。

类选择器：将html元素取一个响亮的名字，用class来标记，就可以使用类选择器了，如<p class="p1">这是段落1</p>,这里我将p元素class设置
为"p1",然后再写css样式就可以直接使用了，

举个栗子：

<style type="text/css">

　　p.p1{color:red;}

</style>

</head>

<body>

　　<p class="p1">

　　　　This paragraph will also be center-aligned.

　　</p>

</body>

</html>

运行上一段代码，就将类名为p1的p元素的文字颜色设置为红色了，是不是很简单，说明一下，非p元素的类名为p1时没有效果哦，要想所有
的class类名为p1的元素有效果，则需要把前面的结构元素名去掉。现在的项目都是敏捷开发，所以用类名就得小心了，刚开始大家经常抱怨的
就是类名冲突，结果就是样式相互冲突了，所以我们项目上定下了约定，以页面功能来命名类名，从而避免类名冲突。

另外要提一下的就是多类名：如上面的

<p class="p1 center">

This paragraph will also be center-aligned.

</p>

一个class值中是可以有一个此列表了，各个词之间用空格来分开。然后写样式就一个个写就ok了，这里估计会有人会问：如果多个类之间有
相同的css样式会出现什么情况！这里就要阅读后面的有关css层叠的问题了！今天的文章就到这里了，第一次写的可能语无伦次，可能是想到
什么就写什么，期待以后慢慢提高吧！

css常用属性初总结第一弹:id和class选择器的更多相关文章

  1. css常用属性初总结：font

    平时在做项目时,UX常说的一句话就是“这里的字体不对吧,字体大小也不太对,你们前端有没有按规范来”,今天,我们就一起来看看这折磨人的font属性. 字体属性font-family 允许值 系列名 初始 ...

  2. css常用属性初总结:伪元素和伪元素

    前面几遍中我们分别说到了id选择器和class选择器,以及它们的区别和联系,下面大家一起来探究一下神奇的为类和伪元素吧. 其实以前我对伪类和伪元素也是搞得稀里糊涂的,现在决定剥开它神秘的外衣,首先,究 ...

  3. 好程序员web前端分享css常用属性缩写

    好程序员web前端分享css常用属性缩写,使用缩写可以帮助减少你CSS文件的大小,更加容易阅读.css缩写的主要规则如下: 颜色 16进制的色彩值,如果每两位的值相同,可以缩写一半,例如: #0000 ...

  4. 1+x证书学习日志——css常用属性

     ## css常用属性:             1:文本属性:                 文本大小:  font-size:18px;                 文本颜色    colo ...

  5. 02: css常用属性

    目录: 1.1 设置样式的七个选择器 1.2 css常见属性浅析 1.3 css布局中常用方法 1.1 设置样式的七个选择器返回顶部 1.其中选择器介绍 1. 直接在标签里的style标签写样式 2. ...

  6. CSS常用属性-xy

    一.文本Text CSS text-align 属性 文本对齐方式 CSS text-decoration 属性 text-decoration 属性规定添加到文本的修饰 CSS line-heigh ...

  7. css常用属性总结第二弹:id选择器

    承接上一篇class选择器,这一篇我们来说说css的id选择器. id选择器类似于类选择器,不过也有一些重要的差别,首先,id选择器前面有一个#号----称它为棋牌号吧,class为点号,用法就和cl ...

  8. css常用属性总结之 id和class的区别，使用类还是ID?

    前面两篇文章我们分别谈到了class和id的相关知识和如何使用,但是在实际项目中,我们该如何抉择,class还是id? 先回顾下两者的区别吧! 1.id具有唯一性,class具有普遍性,所以一个页面同 ...

  9. 23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

    01 复习内容 复习之前的知识点 02演示VS创建元素 03div和span区别 通过display属性进行DIV与Span之间的转换.div->span 设置display:inline   ...

随机推荐

  1. MySQL 百万级分页优化(Mysql千万级快速分页)

    以下分享一点我的经验 一般刚开始学SQL的时候,会这样写 : SELECT * FROM table ORDER BY id LIMIT 1000, 10; 但在数据达到百万级的时候,这样写会慢死 : ...

  2. MAC OS、Windows 、HTML，CSS，font-family：中文字体的英文名称

    宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 Ming ...

  3. 关于rs编码的理解

    1,rs编码首先是线性循环编码,所谓线性循环编码就是说编码后的码组T(x)左移或右移都必然还是有限组码组中的一组,并且T(X)码组能够被g(x)整除,g(x)为生成多项式. 2,由信息码m(x)得到T ...

  4. 借助CustomBehaviorsLibrary.dll写出水印效果（转）

    在项目中载入这个dll 之后引用 使用方法具体如下图: 在这里需要注意到是项目中对interactivity的引用 :       好文要顶 关注我 收藏该文  

  5. c++中重载，重写，覆盖

    1.重载 重载从overload翻译过来,是指同一可访问区内被声明的几个具有不同参数列表(参数的类型,个数,顺序不同)的同名函数,根据参数列表确定调用哪个函数,重载不关心函数返回类型. 相同的范围(在 ...

  6. 【译】GNU Radio How to write a block 【如何开发用户模块及编写功能块】

    本文讲解如何在GNU Radio中添加用户开发的信号处理模块,译文如有不当之处可参考原文地址:http://gnuradio.microembedded.com/outoftreemodules Ou ...

  7. windows + python3.5.2 + anaconda3 + dlib 安装配置

    首先下载boost库,根据提示:1)运行 bootstrap.bat.  生成三个文件,其中包括b2  --  bootstrap.bat2)运行b2  --     b2 install3) 利用b ...

  8. Unit02： JSON 、 使用JSON实现数据交换 、 jQuery对AJAX的支持，编码问题

    Unit02: JSON . 使用JSON实现数据交换 . jQuery对AJAX的支持 1. 编码问题 (1)发送get请求 为什么会产生乱码? ie浏览器提供的ajax对象,对中文会使用gbk来编 ...

  9. 关于PIPELINE，也许你应该知道

    所谓流水线(pipeline)设计,通常来说是流水生产线. 同样,组合逻辑路径可以看作是一条生产线,路径上的每个逻辑单元都可以看作是一个阶段,都会产生时延. 如果不采用流水设计,前后级组合逻辑依次工作 ...

  10. postman md5加密例子

    引用方法 {{md5}} 参考:https://www.jianshu.com/p/5a49d1deaf69 实例: