CSS_02

1  CSS

1.1    div、span、p标签

这三个标签都可以看作是一个容器, 可以用来包裹其他的 html内容, 被包裹起来的内容形成了一个组, 可以通过css样式对这一组的内容统一设置样式.

元素的类型:

    块级元素: 默认情况下独占一行的元素, 如: div p h1~h6 br hr

    行内元素: 默认情况下, 多个行内元素可以处在同一行。如：span，input，font。。。

1.2    CSS概述

CSS：层叠样式表，可以用来美化html页面， 通过CSS设置样式， 可以实现展示数据的html代码和设置样式的CSS代码的分离，增强了网页的显示能力！

1.3    在html页面中引入css样式的方式

(1) 通过标签上的style属性引入css样式

大多数标签都可以具有style属性, 可以通过style属性为当前标签设置样式

这种方式设置样式不推荐大量使用, 会造成页面结构的混乱, 不利于后期的维护及扩展.

 

(2) 通过style标签引入css样式

在head标签内部, 可以提供一个style标签, 在style标签内部可以选中元素进行修饰!

这种方式是将所有的css代码放在一个style标签内部统一进行管理, 初步的实现了html代码和css代码的分离.

 

(3) 通过链接引入外部的css文件

通过head标签下的link标签可以引入外部的css文件

这种方式是将所有的css代码放在一个独立的文件中进行统一管理, 真正的实现了html代码和css代码的分离.

1.4    选择器

所谓的选择器是可以帮助我们在html中选中想要修饰的标签进行样式修饰的技术

1.4.1   基本选择器

(1) 标签名(元素名)选择器

通过标签的名称选中指定名称的标签进行样式的修饰

格式: 元素名{}, 如: span{}

<span></span>

<span></span>

 

(2) 类(class)选择器

通过标签上的class属性, 可以为标签设置所属的类(组), 所有class值相同的标签则为一类(组), 可以通过标签名选择器选中这一类的标签进行修饰.

格式: .类名{ css属性 }, 如: .c1{}

 

<div class=”c1”></div>

<p class=”c1”></p>

<span class=”c1”></span>

 

(3) ID选择器

通过标签上的id属性, 可以为标签设置所属的编号, id值的特点是在整个html中是独一无二的. 可以通过id值选中想要修饰的标签

格式: #id值{ css属性 }, 如: #d1{}

<div id=”d1”></div>

 

1.4.2   扩展选择器

(1) 后代选择器

在父选择器选中的元素内部, 再选中指定的后代元素进行修饰

格式: 父选择器 后代选择器{  }

如: 选中div下所有的后代span à #d1 span{}

 

(2) 子元素选择器

在父选择器选中元素的内部, 选中指定的子元素进行样式的修饰

格式: 父选择器>子元素选择器{  }

如: 选中div下所有的子元素span à #d1>span{}

(3) 分组选择器

可以将多个选择器选中的元素统一来设置样式

选择器1,选择器2,选择器3,…选择器n{}

 

(4) 属性选择器

可以通过属性条件选中元素进行修饰

格式: 选择器[属性条件..]{}

如: 选中所有的普通文本输入框 à input[type=’text’]{}

<input type=”text” name=”xx”/>

<input type=”submit” name=”xx”/>

 

(5) 相邻兄弟选择器

如果两个元素具有相同的父元素, 并且是紧挨着的, 这两个元素就是相邻兄弟, 可以通过相邻兄弟选择器选中A元素后的B元素.

格式: 大哥+小弟{  }

 

(6) 伪元素选择器

伪元素选择器选中的不仅仅是元素本身, 还包括元素的状态

状态分为如下几种:

:link   表示元素未被点击时的状态

:hover  表示光标(鼠标)悬停时的状态(掌握!)

:active 表示元素被点击时的状态

:visited   表示元素被点击之后的状态

 

1.5    外边距/边框/内边距

margin – 外边距

    margin-top:30px;

    margin-left: 30px;

    margin-bottom: 30px;

    margin:10px 20px 30px 40px;/* 上 右 下左 */

    margin:10px 20px 30px;/* 上 左右 下*/

    margin:10px 20px;/* 上下 左右 */

    margin:10px;/* 上下左右 */

 

  注意: 垂直外边距合并的现象:

外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

 

border – 边框

    border: 1px solid red;

   

border-width:10px;

    border-style:solid;

    border-color:blue;

 

    border-top-width:10px;

    border-right-width:5px;

    border-bottom-width:15px;

    border-left-width:5px;

    border-width:10px;

    border-style:solid double dotted dashed;

 

padding – 内边距

 

padding:10px 20px 30px 40px;/* 上 右 下 左 */

    padding:10px 20px 30px;/* 上 左右 下*/

    padding:10px 20px;/* 上下 左右 */

    padding:20px;/* 上下左右 */

1.6    常用的css属性

1.6.1   元素类型的补充

块级元素:

    默认情况下, 块级元素可以独占一行

    块级元素可以设置宽和高

    如果不设置宽度: 其中宽是默认填满父元素, 高是由内容决定(由内容撑起来)

    如果设置, 就是设置的宽和高.

    给块级元素设置的外边距/边框/内边距都会起作用

行内元素:

    默认情况下, 多个行内元素可以处在同一行

    不可以设置宽和高, 其中宽和高由内容决定

    给行内元素设置的左右外边距/边框/内边距都会起作用, 但是上下外边距将不会起作用!

1.6.2   display属性 -- 设置元素的显示方式

block: 块级元素的默认值

inline: 行内元素的默认值

inline-block: 既具备行内元素的特性(可以同行显示), 也具备块级元素的特性(可以设置宽高)

none: 用来隐藏一个元素, 这种方式的隐藏是真的隐藏了, 元素在原位置不再占用空间

visibility:hidden 这种方式也可以隐藏一个元素,但是这种隐藏只是元素不显示了, 在原位置仍然占用空间

 

1.6.3   text-align 设置元素中文本水平对齐方式

left: 默认值。左对齐

right: 右对齐

center: 居中对齐

justify: 两端对齐

 

1.6.4   list列表属性

list-style-type:none/disc/square/circle...

 

1.6.5   字体属性

font-size

font-weight

font-family

color

line-height

text-decoration

          

1.6.6   背景属性

background-color

背景色设置

background-image

背景图片设置

background-repeat

    设置或检索对象的背景图像是否及如何铺排

background-position

    设置或检索对象的背景图像位置

1.6.7   其他

width  设置宽度

height 设置高度

 

1.7    框架标签

frameset – 定义一个框架集合

frame – 定义框架集中的一个窗口

            

1.8    综合练习    

略