第二章选择符和属性

1.类别选择符(Class selectors)：你要给网页施加规则，首先你要选择给什么施加规则

类别选择符让你对一个给定的类别应用CSS，如果我们有下面这条CSS规则：

 p.bold{ font-weight:bold;} //1：p表示段落  2：p.bold表示是bold类别的段落  3：整句话的意思是 给bold类别的段落施加规则

再加上下面的HTML:

 <p class="bold">这个段落应用的是粗体</p> //class="bold" 定义的一个bold类别

看到的结果应该是：这个段落应用的是粗体

2.ID选择符：id选择符有点像类别选择符，只不过每一页只能用在一个元素上，如果给定一下CSS规则

p#bold { font-weight:bold} //#是id选择符的标识

加上这个HTML:

<p id="bold">这个段落应用的是粗体</p> //id="bold" 定义的一个id为bold的p标签

看到的结果应该是：这个段落应用的是粗体

3.群选择符:你可以为多个选择应用一套选择符

 <style type="text/css">p,h1 {     //p和h1是群选择符，指定所有的段落和1号标题 应用这套规则 text-align:right;}//指定段落，标题的对齐方式</style>

每个选择符之间用逗号隔开

甚至你还可以在群选择符中惨杂ID选择符，类选择符

<html><head><title>first_rule演示</title><style type="text/css">p,h1 {      text-align:right;}</style></head><body><h1>群选择符演示</h1><p class="red">这是个<em>段落</em>。</p>

    <p class="red">第二个段落。</p>

  </body>
</html>

4.颜色：在CSS中你可以用颜色属性来指定任意元素的颜色

1) p { color：red;} 设置段落的字体颜色为红色，直接用关键字red来改变color的属性值

2) h1 { color: rgb(255,0,0)}} 用RGB方式

5.背景颜色

p{background-color:green;}//设置段落的背景颜色为绿色

6.布局四属性：用CSS做布局，有几个属性之间的关系，你一定要明白，要不然很容易混淆

Content:它可以是图片，文本，可以是任何元素

Padding：

Margin：指一个border与另一个border之间的距离，即边间距

7.边框(比如在网页中插入一个图片，图片四周就有个边框)

在CSS中你可以用关键字来指定边框宽度

border-width:thin border-width:medium border-width:thick 其中thin，medium，thick是关键字

也可用具体的数值来指定边框宽度

border-width:10px

转载于:https://www.cnblogs.com/SpringSmallGrass/archive/2013/04/16/3024040.html

第二章选择符和属性相关推荐

选对池塘钓大鱼（[美]雷恩·吉尔森）第二章选择的困境
第二章选择的困境人无时无处不在选择之中,但是,一旦承担起选择的责任,我们就会体味到选择的困境 --选择的两难.譬如我选择"职业生涯规划"这一主题,我就必须放弃以宏大叙事的方式 ...
初窥JQuery(一)-选择符【转】
JQuery强大的选择符可以让我们获得页面中任何元素进行操作,并且使用简单方便,可读性强.本章内容根据本人在开发中常用到的选择符作为例子来进行讲解,如有更多常用的简单的例子可回复提供,参与讨论,一起学 ...
好程序员web前端CSS选择符（选择器）:表示要定义样式的对象
好程序员web前端CSS选择符(选择器):表示要定义样式的对象 1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; backgro ...
css语言基础--css的选择符语法
1 基本的选择符包括通用选择符.类选择符.属性选择符.ID选择符.伪类选择符等. 2 3 4 1简单选择符(类型选择符和通用选择符被统称为简单选择符) 5 1.1类型选择符 6 类型就是指HTML语言 ...
Ruby学习-第二章
第二章类继承,属性,类变量 1.如何声明一个子类 class Treasure < Thing 这样Thing类中的属性name,description都被Treasure继承 2.以下三种方 ...
web前端CSS选择符:表示要定义样式的对象
1) 元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} 语法:元素名称{属性:属性值:} 说明: a ...
CSS选择符（选择器）
CSS选择符(选择器): 表示要定义样式的对象 1.元素选择符/类型选择符(element选择器 ) 如:div{width:100px; height:100px; background:red;} ...
Python计算机视觉：第二章图像局部描述符
第二章图像局部描述符 2.1 Harris角点检测 2.1.2 在图像间寻找对应点 2.2 sift描述子 2.2.1 兴趣点 2.2.2 描述子 2.2.3 检测感兴趣点 2.2.4 描述子匹配 ...
Kotlin学习笔记第二章类与对象第二节属性
参考链接 Kotlin官方文档 https://kotlinlang.org/docs/home.html 中文网站 https://www.kotlincn.net/docs/reference/p ...

第二章选择符和属性

第二章选择符和属性相关推荐

最新文章

热门文章

第二章 选择符和属性

第二章 选择符和属性相关推荐

最新文章

热门文章

第二章选择符和属性

第二章选择符和属性相关推荐