css笔记

来源：互联网发布：editplus怎么运行java 编辑：程序博客网时间：2024/05/29 18:09

1.什么是css?
cascading stylesheet 级联样式表(层叠样式表)
按照W3C规范,网站的数据和结构有html来负责.
页面的外观展示给用户的效果由css来负责.

2.css的基本语法
选择器的名称{
属性1:属性值1;
属性2:属性值2;
....
}
--样式引入:<head></head>
内部:<style></style>
外部:<link rel="stylesheet" type="text/css" href="css文件路径"/>
--标签的分类?
块级标签:独占一行. 如:div,table,tr,ul,li,h1~h6....
行内标签:不需要独占一行.如:font,span,input....
3.选择器
施加样式:将样式施加到指定的html标签上
a.标签选择器
标签名{}
对具有相同标签名的所有标签起作用.
b.class选择器
.选择器名称{}
标签的class属性值与选择器名称相同就会起作用
c.id选择器
#选择器名称{}
标签的id属性值与选择器名称相同就会起作用
d.选择器的分组
选择器1,选择器2,...{}
表示对选择器1,2指定的标签施加同样的样式.
e.选择器的派生
选择器1 选择器2 ..{}
表示给选择器1指定标签中通过选择器2选择的标签施加样式
f.样式的继承
子标签会继承父标签的样式
4.样式的优先级
浏览器默认样式
外部样式:使用link标签引入
内部样式:使用style标签定义样式
内联样式:标签中使用style属性定义样式
优先级从低到高.
注意:
外部和内部:
如果是同名选择器,施加的样式以加载顺序决定(以后加载的顺序为准).
2.几个重要的属性:
1)位置相关的属性
margin:外边距
margin-left/right/top/bottom

margin:10px 10px 10px 10px
顶部右边底部左边
margin:10px auto;左右居中,顶低各10px;
--2014.04.19 am
padding:内边距
padding-left/right/top/bottom

padding:20px 10px;上下内边距20px;左右内边距10px;
注意：使用内边距时，子标记会撑开父标记的宽高。

2)边框
border-left/right/top/bottom
border:1px solid blue;
大小实线蓝色
3)背景
background-color:背景色
background-image:url(图片路径); 背景图片
background-repeat:no-repeat|repeat-x|repeat-y;
不平铺横坐标平铺纵坐标平铺
background-attachment:scroll|fixed; 滚动|固定
background-position:100px 200px; 位置
左顶

background:cyan url('../html/images/nba.jpg') no-repeat fixed 100px 200px;
背景色背景图片不平铺固定左顶
4)字体
font-size:文字大小
font-style:风格 italic(斜体)/normad
font-weight:粗细 100-900
font-family:字体
--文本
text-decoration:none|underline 下划线
text-align:left|center|right 文字水平位置
cursor:pointer(小手)|wait(进度条) 光标
5)列表
list-style-type:none; 去掉小圆点
list-style-image: url('图片路径');加前缀图片
6)浮动
使指定标签跳出当前页面流.
float:left|right 浮动
clear:both 取消浮动
7)链接伪样式
a:link {} /*未被访问*/
a:visited {} /* 访问后 */
a:hover {} /* 鼠标移上 */
a:active {} /* 鼠标点击但没有放开 */
注意:
a:hover 必须被置于 a:link 和 a:visited 之后，才是有效的
a:active 必须被置于 a:hover 之后，才是有效的
8)display属性
规定元素应该生成的框的类型
display值:
none:不显示该标记
block:按块级标记方式显示
inline:按行内标记方式显示
9) position属性 left top right bottom
规定元素的定位类型.
position值:
static(默认值):浏览器默认情况下,会按照从左到右,从上往下依次摆放各个标记.
absolute:可被定位于相对于包含它的元素的指定坐标。
relative:可将其移至相对于其正常位置的地方.
注意:
标记使用absolute定位类型,不占正常位置.
------

0 0