
CSS层叠样式表 (Cascading Style Sheets)基础
一、CSS样式表创建:
CSS注释:/* */
1、内联样式:
内联嵌入HTML标签之中
如:<div style="color blue;width: 100px;height: 100px; background: black;">demo2</div>
2、外部样式:
css代码存放在.css文件中
通过中使用标签来引用。
如:<link rel="stylesheet" href="css/style.css" />
可以在一个css文件中引入另一个css文件。
@import url(" ")
**3、嵌入样式表: **
在标签之间,使用<style></style>标签定义css样式。
二、样式选择器:
1、css规则:
有两个主要部分构成:样式选择器、以及一条或多条声明。
选择器{属性:值; 属性:值;}
选择器通常是您需要改变样式的 HTML 元素。
每条声明由一个属性和一个值组成,以分号结束。
属性是您希望设置的样式属性。每个属性有一个值。属性和值被冒号分开。
2、样式选择器:
元素选择器 HTML元素标签{属性:值} 选择文档中指定元素。
ID选择器 #id{属性:值} ID属性不要以数字开头,数字开头的ID在 Mozilla/Firefox 浏览器中不起作用。
class选择器 .类名{属性:值} 类名的第一个字符不能使用数字!它无法在 Mozilla 或 Firefox 中起作用。
属性选择器 元素[属性]{} 选择指定元素的属性。
通配符选择器 *{属性:值} 选择文档中所有元素。
三、CSS背景:用于定义HTML元素的背景
颜色值的定义:
十六进制 - 如:“#ff0000”
RGB - 如:“rgb(255,0,0)”
颜色名称 - 如:“red”
background-color 规定要使用的背景颜色。
background-position 规定背景图像的位置。
left top
left center
left bottom
right top
right center
right bottom
center top
center center
center bottom
x% y%
xpos ypos 可以混合使用%和positions
background-size 规定背景图片的尺寸。
background-repeat 规定如何重复(平铺)背景图像。
repeat 默认。背景图像将在垂直方向和水平方向重复。
repeat-x 背景图像将在水平方向重复。
repeat-y 背景图像将在垂直方向重复。
no-repeat 背景图像将仅显示一次。
inherit 规定应该从父元素继承 background-repeat 属性的设置。
background-origin 规定背景图片的定位区域。
background-clip 规定背景的绘制区域。
background-image 规定要使用的背景图像。
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。
fixed 固定,不随内容的滚动而滚动
scroll 默认滚动,随内容的滚动而滚动
简写背景属性:background。
如:body {background:#ffffff url(‘img_tree.png’) no-repeat right top;}
写的顺序:
background-color
background-image
background-repeat
background-attachment
background-position
三、文字、文本属性:
1、文字属性:
color:red; 文字颜色 #ffeeees
font-size:12px; 文字大小
font-weight:bold; 文字粗细(bold/normal/lighter/bolder)
font-family:”宋体”; 文字字体
font-variant:small-caps; normal默认,small-caps显示小型的大写字母体(小写字母会被转换为大写)
font-style 字体样式 normal正常 italic斜体
2、文本属性:
text-align:center; 文本对齐(right/left/center)
line-height:10px; 行间距(可通过它实现文本的垂直居中)
text-indent:20px; 文本首行缩进
text-decoration:none; 文本修饰(none/underline/overline/line-through)
定义文本上的下划线/上划线/中划线,主要用来删除链接的下划线。
letter-spacing: 字间距
text-transform 文本转换,指定文本中的大小写
uppercase/lowercase/capitalize 大写、小写、单词首字母大写