今天继续学习盒模型的相关内容,页面就是由一个个盒模型堆砌起来的,每一个html元素都可以叫做盒模型。CSS盒模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒模型(Box Modle)可以用来对元素进行布局,由内到外包含实际内容、内边距、边框、和外边距四个部分。一个盒子中主要的属性就5个:width、height、padding、border、margin。如下: width、height:内容的宽度、高度。 padding:内边距。 border:边框。 margin:外边距。 还学习了css的一些选择器,要使用css对HTML页面中的元素实现一对一,一对多或者多对一的控制,这就需要用到CSS选择器。
㈠什么是选择器?
每一条css样式定义由两部分组成,形式如下: [code] 选择器{样式} [/code] 在{}之前的部分就是“选择器”。
“选择器”指明了{}中的“样式”的作用对象,也就是“样式”作用于网页中的哪些元素。
㈡CSS的五大选择器
⑴标签选择器(元素选择器)
⑵ID选择器(唯一性,一次引用)
⑶类选择器(单类选择器,多类选择器)
⑷属性选择器(简单属性选择,具体属性选择,部分属性选择, 特定属性选择)
⑸派生选择器(后代选择器(descendant selector),子元素选择器(child selector),相邻兄弟选择器(Adjacent sibling selector)
㈢元素选择器(标签选择器)
一个完整的HTML页面是由很多不同的标签组成。标签选择器:指用HTML标签名称作为选择器,按标签名称分类,为页面中某一类标签指定统一的CSS样式。
如果设置 HTML 的样式,选择器通常将是某个 HTML 元素,比如 p、h1、em、a,甚至可以是 html 本身。
㈣ID 选择器
⑴ID 选择器允许以一种独立于文档元素的方式来指定样式。
⑵ID 选择器可以为标有特定 ID 的 HTML 元素指定特定的样式。 根据元素ID来选择元素,具有唯一性,这意味着同一id在同一文档页面中只能出现一次。
⑶id 选择器以 "#" 来定义。
例如:在css中,下面的两个 id 选择器,第一个可以定义元素的颜色为红色,第二个定义元素的颜色为黄色。