一、什么是CSS
CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
二、CSS语法
如:
p{color:red fron-size:12px;}
CSS声明总是以分号(;)结束,声明组以大括号({})括起来:
三、CSS选择器
Css选择器有三种,分别是id选择器,class选择器,标签选择器
1.id选择器
配套< div>使用
一般来说div会给出id属性并为其赋值。
id用#来声明
<style>
#one{color:red;}
</style>
<div id = "one">这是个句子</div>
此句话就会显示成红色
2.class选择器
配套< div>使用
使用.class选择器一般div里面就会给class赋值
类似id选择器
<style>
.fy{color:red;}
</style>
<div class ="fy">这是条语句</div>
这样就会设置该div语句为红色
3.标签选择器
配套标签使用。
如
<style>
mam{color:red;}
</style>
<mam>这是条语句</mam>
此时他就找到标签mam然后修改它的格式
四、标签样式表
插入样式表的方法有三种:
1.外部样式表(External style sheet)
2.内部样式表(Internal style sheet)
3.内联样式(Inline style)
1.外部样式表(External style sheet)
<head>
//rel固定写法 href链接
<link rel="stylesheet" href="mystyle.css">
</head>
五、CSS背景
CSS背景是用来控制HTML元素的背景
CSS属性定义背景效果有下面几种
1.background-color:背景颜色
2.background-image:背景图片
3.background-position:规定背景图像的起始位置
background-size 规定背景图像的尺寸
background-attachment属性设置背景图像是否固定或者随着页面的其余部分滚动。
参数
1.scroll随着滚动
2.fixed不随着滚动
background-repeat:设置重复方向
参数
1.repeat-x在x方向上重复
2.repeat-y在y方向上重复
2.no-repeat:不重复
六、CSS文本格式
color:定义文字的颜色
text-align定义文本排列属性
text-decoration主要用来删除连接的下划线
a{text-decoration:none;}
text-indent表示文本第一行相距左边的距离
font-style:表示字体
参数
1.正常 normal
2.斜体 italic
font-size:字体大小
七、CSS链接
链接的四种状态:
a:link 正常,未访问过的链接
a:visited 用户已访问过的链接
a:hover 用户鼠标放在连接上时
a:active 链接被点击的那一刻
顺序规则:
1.a:link a:visited
2.a:hover
3.a:active
八、CSS列表样式
列表分两种
无序列表和有序列表
< ul> 和 < ol>
list - style -type:指定列表项标记的类型:
circle空心圆
square:方块实心样式
upper-roman:小写罗马数字
等等–
九、表格样式
border:表格边框属性
也要指出TH,TD的边框
表格的填充
如果在表的内容控制空格之间的边框,使用td,th元素的填充属性
td,th{
padding:15px;
}
十、CSS盒子模型
Margin:边距
border:边框
padding:填充
content:实际内容
十一、CSS分组和嵌套选择器
h1,div,p{color:green;}
表示平级关系,h1,div,p内的文字颜色都是绿色
p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=“marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=“marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=“marked” 的 p 元素指定一个样式。
十二、CSS DISPLAY
display:none;隐藏
display:block;显示
十三、CSS 定位(Position)
position属性:
必须给出以下属性之一
static
元素默认值,没有定位,出现在正常流中,不会受top,bottom,left,right影响
relative
相对定位,就是普通定位
通常作为绝对定位的容器块
fixed
元素的位置相对于浏览器窗口是固定位置,不会随窗口的滚动而滚动
特点:
不占空间
会和其他元素重叠
absolute
绝对定位,一般用于相对于父类的定位如:
.one{
position: relative;
top: 100px;
left: 100px;
width: 100px;
height: 100px;
border: 1px solid red;
}
.two{
position: absolute;
top: 20px;
left: 20px;
width: 100px;
height: 100px;
border: 1px solid black;
}
<div class="one">
<p class="two"></p>
</div>
不然就是相对于HTML定位,也就是相对定位了
十四、浮动
float:
一般用于排列中< ol> < ul>
会使元素向左或者向右移动,往往用于图像
小结
CSS小结
1.语法:
div{各种属性} 1.标签选择器
#id{各种属性} 2.id选择器 (id值唯一)
.class{各种属性} 3.class选择器
2.插入样式表的三种方法
1.外部样式表 head里面使用标签
2.内部样式表 标签
3.内联样式表 标签内使用style属性
优先级3>2>1
text-align:center所有元素居中
text-decoration:none去除a标签的下划线
设置链接样式
a:link{}未访问链接
a:visited{}已访问链接
a:hover{}鼠标移动到链接上时
a:active{}鼠标点击时
list-sytle-type:修改列表样式
-
,
盒子模式:
Margin
Border
Padding
Content
display:none隐藏
display:block显示
Position:
static 默认
relative 相对于默认定位的定位
fixed 固定定位
absolute 相对于父类的定位
浮动float
float:left
一般用于图片或者列表中