css概述
css(Cascading Style Sheets)是层叠样式表,用来定义网页的显示效果,
对
html
标签进行操作
(
标签中文本内容设置
)。
W3C指定的标准:
针对html:结构化标准
针对css:样式化标准 美化网页
css的使用方式
1.行内样式:
在每个html标签里面都会有style属性:
<a href="" style="font-size:24px;color:#F00">超链接</a>
缺点;标签和样式混合在一起,不利于维护,书写过程麻烦,不美观
2.内部样式
在head标签体中有一个style标签,
<style type = "text/css">
书写样式:
</style>
缺点:样式和标签混合在一起,不利于维护
3.外部样式
在head标签体中<link href = "连接外部的css文件" rel="stylesheet"/>
实际开发中,使用第三种方式,css样式和html标签分离开来,有利于维护
使用link标签来导入css文件
css语法
1.选择器(selector):通过一些选择器选择需要设置样式的标签
css属性(property):给标签设置:字体,颜色,背景…..
css属性值(value):给属性指定:字体带线,字体颜色,背景图片…
格式:属性:属性值;
标签选择器: 使用html标签名称来设置样式,选中所有同名的标签:使用标签选择器 /*css标签选择器*/ div{ font-size:24px; color:#F00; } |
给标签设置class属性 class=”c”
使用类选择器的语法,在样式.c{样式}
/*类选择器*/ .c{ font-size:36px; color:#0F0; } |
1)给标签设置id属性 id="d";
2)使用id选择器的语法,在样式中#id属性值
/*id选择器*/ #d{ font-size:24px; color:#00F; } |
注意:在同一个html页面中,不要去给多个标签指定同名的id属性,防止Javascript中有一个方法:
document.getElementById(“id属性值”)获取标签对象,可能获取不到!
并集选择器:
/*并集选择器*/ .c1,#dl{ font-size:24px; color:#F00; } |
选择器名称1 选择器名称2{
书写样式
}
/*交集选择器*/ -->选中的就是div中的子标签span标签 div span{ font-size:36px; color:#0F0; } |
*:通配符,代表所有标签,给整体设置属性
*{ 样式; } |
2.伪类选择器
例如:超链接标签,代表选中一种状态
link:没有访问过的状态
hover:鼠标悬浮的时候一种状态
active:鼠标激活(点击了,但是没有松开)的一种状态
visited:已经被访问过的状态(点了,并且松开了)的一种状态
超链接:状态 link---->visited--->hover--->active这些状态在实际场景中不停循环使用的!
3:CSS文本
color:设置文本颜色
letter-spacing:字符间距
text-decoration:给文本增加修饰
属性值:
none:没有下划线
underline:下划线
overline:上划线
line-through:中划线
word-spacing:单词间距(系统默认两个字组成叫单词)
4.css字体
font-family:字体类型,必须是系统中存在的字体类型,系统找不到默认是宋体
font-size:字体大小
font-style:设置字体样式
属性值:normal默认正体 italic:斜体
font-weight:给字体适当加粗
属性值:bold
font 的简写属性
font:字体的样式(normal/italic)字体的粗细(bold)字体的大小(font-size)字体的类型(font-family)
5.css背景
background-color 设置背景颜色
background-image将某个图像设置为背景
background-repeat:设置图像是否重复以及如何重复
no-repeat:不重复(默认图片的起始位置top left)
repeat-x:x轴重复
repeat-y:y轴重复
repeat:重复
background-position 设置背景图像的起始位置
background的简写属性:背景颜色 背景图片 背景图片是否重复及如何重复 背景图像的起始位置
6.css列表属性
设置列表项的类型 : list-style-type
自定义一个列表项的类型符号:list-style-image
7.css表格属性
table{border-collapse:collapse;}
8.css边框
边框的颜色:border-color
border-top-color:
border-left-color:
border-right-color:
border-bottom-color:
边框颜色的简写属性:默认的方向:上 右 下 左
边框的宽度:border-width
border-top-width
border-left-width
border-right-width
border-bottom-width
边框的简写属性: 上 右 下 左
边框的样式 border-style:
属性值:solid 单实线
dashed 虚线
dotted 点
double 双实线
9.盒子模型
盒子模型中的一些属性:
盒子容量:盒子的宽度和高度决定
盒子的边框:border:边框的宽度 样式 颜色
内边距:padding 盒子的边框和盒子的内容之间的距离,padding使用的比较少
外边距:margin:外边距
10.CSS定位
1)相对定位:position:relative(相对原来位置向下移动10px;向右移动10px;)
top :10px;
left:10px;
2)绝对定位:position:absolute(针对父标签进行移动)
3)固定定位:position:fixed