CSS的基本知识
CSS样式基础知识
CSS样式的注释符合： /* ---------- */
CSS样式有三种关联方式
1.外部
为标签生成一个后缀为css样式的文件，用link去关联
<link rel="stylesheet" href="index.css">
2.内部
在HTML <head>体内方式如下标签
<style>
span{
font-size:20px;
}
</style>
3.内联
在标签本身里面加css样式
<span style="font-size:30px"></span>
4.CSS样式优先级 注：优先级样式离标签越近优先级越高
内联>内部或外部
在精确与模糊来设定的话
ID号样式>class号样式>标签样式>模糊*号来设定的样式
5.CSS长度，通常用px,em来标示
1.px 像素
2.em 倍数
6.CSS颜色可以用英文或者16进制数来表示：
1. #ff00
2. red
7.CSS选择器
1.标签选择器-----用标签来设定样式
2.ID选择器--------用#+ID号来设定样式,ID的值必须唯一
3.Class选择器-----用.+CLASS号来设定样式，多个标签设定同一种样式时
4.组合选择器
把前几种方式用,号隔开一起设定
span,#id,.classid{}
5.关联选择器------用前面所的几种方法+标签名，如#id span{} 则设定了id号下的span标签
6.伪元素选择器.控制A标签的几种访问状态
a:link{color:red;} -----有链接的颜色
a:active{} --------点击时的颜色
a:visited{} --------点击后的颜色
a:hover{color:red} -------当鼠标放上去的颜色
8.CSS常见的样式属性和值
1.字体与颜色
font
font-family:字体类型 -----设定字体类型
font-size:30px; ------设定字体大小
font-style:italic; ------设定字体样式
color:red; ----------设定字体的颜色
2.背景属性
background
background-color:red ----设定背景颜色
background-image:url("hehe.gif") ----设定背景图片
background-repeat:no-repeat ----设定背景图片不重复（repeat,repeat-x,repeat-y 这几个属性）
background-postion:right top ----设定背景图片的定位(随屏幕滚动)
background-postion:x坐标 y坐标 ---设定背景图片所在位置
background-attachment:fixed -----设定背景图片位置（定位，不滚动）
3.文本属性
text-decoration:none ----设定文本有没有下划线|上划线|删除线
text-align:center; ------设定文本对齐
line-height:30px; ----------设定文本的行高，可设置文字垂直居中
text-indent:30px; --------设定<p>标签的文本缩进
word-break:break-all; ----------碰到DIV右侧自动换行
letter-spacing:10px; -----------设定字母之间的间距
word-spacing:20px; ------设定单词之间的间距
4.边框属性
border:1px solid #f00 ------设定边框属性，默认四个框
solid 实线 dotted 虚线 inset 凹进去的线 outset 突出的线
5.鼠标光标属性
cursor:pointer | wait |help -------设定鼠标的属性样式
6.列表样式
list-style-type:none -------设定列表的样式
有如下属性
disc ---默认值，实心圆
circle ----空心圆
square ----空心方块
decimal ---阿拉伯数字
尺寸属性
width:30px ---设定宽度
height:30px ---设定高度
min-width ----设定最小宽度
7.textarea文本框
resize:none ----让文本框不能拖动
8.表格属性
border-collapse:separate| -----设定表格的边框合并或分离
9.外边距属性
margin-left:1px;
margin-right:1px;
margin-top:1px;
margin-bottom:1px;
可以缩写
margin:0 auto ; ----写两个值，代表上下，左右的值。
如果是四个值，依次顺序为：上，右，下，左
10.内边距属性
padding-left:1px
padding-right:1px
padding-top:1px
padding-bottom:1px
基本属性等同于外边距
11.定位的基本属性
position:absolute ----绝对定位
left:1px;
top:300px;
position:relative ------相对定位
top:50%;
left:50%;
margin-left:-30;
margin-top:30;
z-index:13; ---自定义的z轴坐标。
12.漂浮属性
float:left; ---定义左漂浮
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
