HTML学习笔记(CSS)NO.3

css指层叠样式表
css样式表极大地提高了工作效率

属性选择器
selector{
	property:value;
}

如h1{
	color:red;
	front-size:14px;
}

选择器分组
如
h1,h2,h3{
	color:red;
}
将h1,h2,h3的标签属性设置成相同的属性

继承:
如
body{
	color:red;	
}


派生选择器:通过依据元素在其位置的上下文关系来定义样式


id选择器:可以为有id的HTML元素指定特定的样式,以#来定义
目前比较常用的方式是id选择器常常用于建立派生选择器

如
#在html中通过id属性来定义的标签{
	属性:值;
}


#在html中通过id属性来定义的标签  内部嵌套的子标签名称{
	属性: 值;
}


类选择器:类选择器以一个点显示
class也可以作为派生选择器
如
首先在表现中以class关键字指定其class名称
然后在CSS中使用如下方式:

.指定的class名称{
	性质:值;
}


属性选择器:对带有指定属性的HTML元素设置样式
属性选择器,属性和值选择器在IE6一下版本是不支持的


方式:
<style type="text/css">
        [title]{
            color:blue;
        }
        [title=te]{
            color:red;
        }
    </style>


然后在指定的标签内指定title属性值即可改变颜色



CSS样式->字体、连接、列表、表格、轮廓

CSS背景:CSS允许应用纯色作为背景,也允许使用背景图像创建相当复杂的效果

background-attachment		背景图像是否固定或者随着页面的其余部分滚动
background-color		设置元素的背景颜色
background-image		把图片设置为背景
background-position		设置背景图片的起始位置
background-repeat		设置背景图片是否及如何重复
background-size			规定背景图片的尺寸
background-origin		规定背景图片的定位区域
background-clip			规定背景的绘制区域


CSS文本:CSS文本属性可以定义文本外观
通过文本属性,可以改变文本的颜色、字符间距、对齐文本、装饰文本、对文本缩进
*表示比较常用的
color		文本颜色*
direction	文本方向
line-height	行高
letter-spacing	字符间距
text-align	对齐元素中的文本*
text-decoration	想文本添加修饰
text-indent	缩进元素中文本的首行*
text-transform	元素中的字母*


unicode-bidi	设置文本方向
white-space	元素中空白的处理方式
word-spacing	字间距


text-shadow	向文本添加阴影
word-wrap	规定文本的换行规则


CSS的字体:css可以定义文本的字体系列、大小、加粗、风格和变形

font-family	设置字体系列
font-size	设置字体的尺寸
font-style	设置字体风格
font-variant	以小型大写字体或正常字体显示文本
font-weight	设置字体的粗细


CSS的连接:四种状态
a:link		普通的、未被访问的连接
a:visited	用户已访问的连接
a:hover		鼠标指针位于连接的上方
a:active	正在被点击

常见的连接样式:text-decoration属性大多用于去掉连接中的下划线


CSS列表:
CSS列表允许防止、改变列表标志,或者将图像作为列表标志
list-style		简写列表项
list-style-image	列表项图像
list-style-position	列表标志位置
list-style-type		列表类型

一般以ID方式进行标记的话用在框架级别上,而class方式用在具体内容细节方面,一些数据的构造等方式

CSS的表格:表格属性可以帮助我们极大的改善表格的外观
boder-collapse		折叠边框(即只有一条线)
border			边框显示

CSS的轮廓:主要是用来突出元素的作用
outline			设置轮廓属性
outline-color		设置轮廓颜色
outline-style		设置轮廓的样式
outline-width		设置轮廓的宽度

CSS盒子模型:
盒子模型包括margin(外边距)、border(边框)、padding(内边距)、content(包含宽和高width、height)部分

内边距属性(内边距在content外,边框内)
padding			设置所有的边距
padding-bottom		设置底边距
padding-left		设置左边距
padding-right		设置右边距
padding-top		设置上边距

CSS边框:可以创建出效果出色的边框,并且可以应用于任何元素

边框样式:
通过关键字border-style关键字可以定义10中不同非继承样式(包括none)

可以进行单边框样式的更改:上下左右四个方向
border-top-style
border-bottom-style
border-left-style
border-right-style

边框的宽度:
border-width
border-上下左右-width

边框颜色
border-color
border-上下左右-color

CSS3边框:
border-radius		:圆角边框
box-shadow		:边框阴影
border-image		:边框图片

对于阴影效果有四个参数:
1、向右移动几个像素
2、向下移动几个像素
3、阴影的透明度
4、颜色

外边距margin:
margin
margin-上下左右
外边距具有叠加的性质,如果两个样式的东西挨着设计margin则margin选择最大值得那个样式的margin值


CSS定位:
改变元素在页面上的位置

定位机制:
普通流->元素按照在其HTML中的位置顺序决定排布的过程
浮动
绝对布局


CSS的定位属性:
position		把元素放在一个静态的、相对的、绝对的活固定的位置中
top			元素向上偏移量
bottom			元素向下偏移量
right			元素向右偏移量
left			元素向左偏移量
overflow		设置元素一处其区域发生的事情
clip			设置元素显示的形状
vertical-align		设置元素垂直对齐方式
z-index			设置元素的堆叠顺序

position属性:static/relative/absolute/fixed
absolute效果是不再占用页面的位置
static时任何偏移量的关键字对齐都不产生影响
fixed当内容可以进行滚动时,fixed的内容不会滚动

CSS的浮动:
float属性->
left		元素向左浮动
right		元素向右浮动
none		元素不浮动
inherit		从父级继承浮动属性

clear属性:去掉浮动属性(包括继承来的属性)
clear属性值:
left/right:去掉元素向左向右的浮动
both:左右两侧均去掉浮动
inherit:从父级继承来的clear的值

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。