初识css

CSS （Cascading Style Sheets）重叠样式表

css通过选择器来控制html标记，让html标记不再“光着身子”，使它好看一点，甚至让它有动起来的“错觉”。

名词解释：选择器顾名思义就是用来选择的东西，选择什么？当然是选择html标记啦。

html标记有都都会设置 class、id 两个属性，用于对应css的class选择器、id选择器。

css一般有一下几种选择器：

标记选择器： div{}

class（类）选择器： .{}  //选择 class为A的标记

联合选择器： p.A{} //选择 class为A的标记里面的所有p标记

id选择器： #C{} //选择id值为C的标记

伪类选择器（常用的）：link(标记未被访问前的样式)，hover(标记在鼠标悬停时的样式)，active(标记未激活时的样式)，visited(标记被访问后的样式)

标记名：伪类名{}

派生选择器（上下文选择器）

li  strong{}       //选择 li 标记下的 strong 标记

css3新增的常用的选择器

一、关系选择器：E>F 可以称之为子代选择器，选择E标记的子标记为F的标记

二、属性选择器：E(attr=”val”) 选择 E标记中有 attr属性且等于val的标记。

三、伪类选择器：E:first-child 选择父标记的第一个子标记E

E:last-child  选择父标记的最后一个子标记E

E:nth-of-type(n) 选择父标记的第n子标记E

css的盒模型

 

margin :只有盒子的边界距离边框的距离这一个属性

border: 有边框距离填充的距离、颜色、形状（border-ridus//设置边框的曲率）三个主要属性

padding:只有盒子的填充距内容的距离这一个属性

 

css的字体样式

一、字体样式 font //是一个复合属性

font-size:字体的大小 单位像素（px）

font-style:  normal | italic | oblique

normal:表示使用默认，italic:表示使用斜体，oblique:使用倾斜体

font-family: “字体名称” //设置字体风格

font-variant:normal | small-caps //主要用于设置英文字体，是否为小型的大写字母

font-weight:normal | bold | bolder | lighter | 100 | 200 | ........ | 900

bold:粗体，bolder:特粗体 lighter:细体，整数表示粗细程度

二、文本样式

letter-spacing: normal | 长度单位 //设置字符与字符之间的距离

line-height: normal | length //用于设置行与行之间的距离

text-indent: 长度单位 | 百分比单位 //首行缩进

text-decoration: none | underline | overline | line-through

underling加下划线，overline加上划线，line-through:表示文字加贯穿线。

text-transform: capitalize | uppercase | lowercase | none

capitalize: 首字母大写

uppercase: 转换成大写

lowercase: 转换成小写

text-align: left | right | center | justify //水平对齐

vertical-align: top | middle | bottom | text-top | text-bottom

三、css颜色与背景

color: rgba(red,green,blue,透明度) | #XXXX | color name //设置字体颜色

background-color:   //用来设定背景颜色

background-image:url(“图像文件名称”) //设置背景图片

background-repeat: no-repeat| repeat-x | repeat-y //用以设定背景图片重叠覆盖的方式

background-attachment: scroll | fixed // scroll 表示文字页面滚动时，背景附件一起滚动

background-position: left | center | right | top | center | bottom | X Y

四、列表样式

list-style-style:

disc	实心园
circle	空心园
square	实心方块
decimal	阿拉伯数字
lower-roma	小写罗马数字
upper-roma	大写罗马数字
lower-alpha	小写英文字母
upper-alpha	大写英文字母
none	不使用项目符号

 

list-style-image: url(“图像文件名称”) | none //替换列表项前面的符号或编号

list-style-position: outside | inside

outside :标记放在文本外，且换行不在标记下对齐

inside: 标记放在文本内，且换行在标记下对齐

五、标记的定位

position: static | fixed | relative | absolute

static: 默认值

fixed: 固定在屏幕上不随屏幕移动而移动

relative: 相对定位，图层不可重叠

absolute: 绝对定位

z-index: 设置图层，数字越大图层越高

display: block | inline | none

float: 可以将块级元素移到一行并且对齐

overflow: scroll | visible | auto | hidden //分别表示显示滚动条、不显示滚动条，但超出部分可见、超出显示滚动条、超出时隐藏。

 

重点：只有块级元素才可以设置 width,height