CSS
1.CSS概述
层叠样式表
作用:控制页面的显示效果,最终用HTML去展示页面内容,用CSS样式去控制页面内容的显示效果
2.CSS和HTML结合的方式
1.属性style结合方式(行内样式)
在标签中写style属性.
style=“属性:值”
2.style标签结合(内嵌方式)
3.Link标签进行结合
1.先定义外部样式文件
2. 引入
4.import来进行导入
@import url(css文件位置);
3.CSS样式优先级和代码规范
由外到内,由上到下 级别逐步增高
书写规范:
属性:属性值;属性1:属性值1
属性:属性值1 属性值2; 如 border:1px solid blue;
4.CSS三种常用选择器
html标签名选择器。使用的就是html的标签名
class选择器。其实使用的标签中的class属性
1.用.开头进行定义
2.可以使得相同的标签具有不同的显示效果
3.可以使得不同的标签具有相同的显示效果
id选择器。其实使用的是标签的中的id属性。
1.用#进行定义,在标签中用id属性进行引入
2.在使用时,最好保持id唯一
5.CSS三种扩展选择器
关联选择器
1.标签允许嵌套,所以样式定义时,也可以对指定标签的内部标签进行选择
组合选择器
用逗号隔开,可以一次性写多个html标签
伪元素选择器
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态(未点击)
a:active 点击超链接时的状态
a:link{
color:blue;
text-decoration:none;
}
a:hover{
color:red;
text-decoration:underline;
}
a:active{
color:green;
text-decoration:none;
}
a:visited{
color:yellow;
text-decoration:underline;
}
6.CSS的常见操作
CSS中尺度单位的介绍
1in = 2.54cm = 25.4 mm = 72pt = 6pc
cm mm pt px em=16pt
字体设置
font
font-size
font-style
font-weight
font-family
文本设置
text-align 设置对齐方式
text-indent:2em;设置缩进
背景设置
background-image:url("photo-3.jpg");背景图片
background-position:30px 30px;背景图片出现的位置(leftposition,topposition)
background-repeat:no-repeat;有没有重复
background-color:red;背影色
列表设置
list-style列表样式
list-style-image列表图片
盒子模型(border margin padding)
border边框
margin外补丁
padding賿补丁
定位设置(position,float,clear)
/*margin:20px; 设一个值:代表上右下左 20*/
/*margin:40px 10px;上下20px 左右10px*/
margin:180px 60px 50px;/*margin:10px 40px 50px; 上10px 左右40px 下50px */
/*调位置*/
width:100px;
height:100px;
/*内补丁padding
调内容与边线的距离大小
*/
鼠标样式设置(cursor)