Java小白起步_S3(CSS)

来源：互联网发布：iis php mysql 编辑：程序博客网时间：2024/05/16 06:36

CSS 指层叠样式表(Cascading Style Sheets)

样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一

外部样式表

如果想要在多个页面使用同一个样式表，可以使用外部样式表来导入。

可以在html页面上使用<link>标签来导入外部样式表。

例如:

<html>

<head>

</head>

浏览器会从mystyle.css文件中读取样式，并对页面上的html进行修饰。

外部样式表，应该以css为后缀来保存，可以使用任意文本编辑器对css文件进行编辑。

优先级问题

内嵌样式表>内部样式表>外部样式表

css选择器

css选择器主要是用于选择需要添加样式的html元素。

对于css来说，它的选择器有很多，我们主要介绍以下几种:

id选择器

Id选择器使用#引入，它引用的是id属性中的值。

<head>

#d{

border:1px solid black;

color:red;

}

</style>

</head>

类选择器

类选择器使用时,需要在类名前加一个点号(.)

<head>

.d{

border:1px solid black;

color:red;

}

</style>

</head>

元素选择器

这是最常见的选择器，简单说，文档中的元素就是选择器

<head>

div{ //定义块或者<p><tr>都可以

border:1px solid black;

color:red;

}

</style>

</head>

Id>类>标签

伪类

css伪类用于向某些选择器添加特殊效果。。

在支持css的浏览器中，链接的不同状态都可以不同的方式显示，这些状态包括：活动状态，已被访问状态，未被访问状态，和鼠标悬念状态。

a:Link {} 未访问的链表;

a:visited{} 已访问的链表

a:hover{} 鼠标移动到链表上的状态

a:active{} 选定的链表

这四种伪类存在着一定的顺序，成为LVHA顺序。各个样式之间的顺序很有讲究，一旦出现排列错误就很有可能形成覆盖，导致其中某个样式无法显示。
比如，link与visit的位置是随意的。但hover，focus，active则必须按照focus--hover--active这个顺序。

css属性

字体

Css字体属性定义文本的字体系列，大小，加粗，风格(如斜体)和变形(如小型大写字母)

常用属性:

font:简写属性，作用是把所有针对字体的属性设置在一个声明中。
font-family:定义字体系列
font-size:定义字体的尺寸
font-style:定义字体风格

文本

CSS文本属性可定义文本的外观。通过文本属性，您可以改变文本的颜色、字符间距，对齐文本，装饰文本，对文本进行缩进，等等。

常用属性

color:定义文本颜色
text-align:定义文本对齐方式
letter-spacing:定义字符间隔
word-spacing:定义字间隔
text-decoration:定义下滑线位置

背景

CSS 允许应用纯色作为背景，也允许使用背景图像创建相当复杂的效果。CSS 在这方面的能力远远在 HTML 之上。

常用属性:

background:简写属性，作用是将背景属性设置在一个声明中
background-color:定义背景颜色
background-image:定义背景图片
background-position:定义背景图片的起始位置
background-repeat:定义背景图片是否及如何重复。

尺寸

CSS 尺寸 (Dimension) 属性允许你控制元素的高度和宽度。

常用属性:

width:设置元素的宽度
height:设置元素的高度

列表

CSS 列表属性允许你放置、改变列表项标志，或者将图像作为列表项标志。

常用属性:

list-style:简写属性。用于把所有用于列表的属性设置于一个声明中。
list-style-image:定义列表项标志为图象
list-style-position:定义列表项标志的位置
list-style-type:定义列表项标志的类型。

定位

CSS定位 (Positioning) 属性允许你对元素进行定位。

定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置

CSS有三种基本的定位机制：普通流、浮动和绝对定位。

常用属性:

position:把元素放置到一个静态的,相对的，绝对的，或固定的位置中。
top:定义了定位元素的上外边距边界与其包含块上边界之间的偏移量
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移
bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。

分类

CSS分类属性允许你控制如何显示元素，设置图像显示于另一元素中的何处，相对于其正常位置来定位元素，使用绝对值来定位元素，以及元素的可见度。

常用属性

clear:设置一个元素的侧面是否允许其它的浮动元素
float:定义元素在哪个方向浮动
cursor:当指向某元素之上时显示的指针类型
display:定义是否及如何显示元素
visibility:定义元素是否可见或不可见。

阅读全文

0 0