一、什么是CSS
CSS全称层叠样式表,主要用于修改html标签的样式
二、CSS书写位置?
行内样式表:在标签的开始标签中使用style属性来书写该标签的样式属性
内部样式表:在head标签中使用style标签来描述样式,并且使用选择器将样式设置到某个或者某些标签之上,内部样式表解决了同一个页面中的样式重用问题
外部样式表:将css样式定义到一个css文件中,在html页面中可以通过引入该css文件来使用该文件中定义的样式,在css文件中书写样式不需要写style标签,在需要使用样式的html页面中使用link标签引入外部的css样式表,例如:
<link rel="stylesheet" href="css/style.css" />
本文配套练习代码，点击下载
三、选择器的分类
- 标签选择器:
语法:标签名称{css样式属性}
作用:对页面中所有的同种标签添加样式
- 类选择器:
语法:.选择器名称{css样式属性}
作用:将标签的class属性设置为类选择器名称,该标签就可以拥有类选择器的样式,
标签的class属性可以同时设置多个选择器名称
- id选择器:
语法:#选择器名称{css样式属性}
作用:将标签的id属性设置为id选择器名称,该标签就可以拥有id选择器的样式
选择器优先级:id选择器>类选择器>标签选择器
属性筛选:在选择器后面可以使用[属性名称=属性值]筛选满足属性条件的这一部分标签,主要用于设置input标签的各种样式
- 复合选择器:
语法:选择器1,选择器2,....{样式属性}
作用:同时给多个选择器设置相同的样式
- 全局选择器:
语法:*{样式属性}
作用:给页面中所有的标签设置样式属性
- 层级选择器:
语法:选择器A 选择器B...{样式属性}
作用:在满足选择器A的条件的标签内部查找满足选择器B的条件的标签
四、css的常用样式
- 文字样式:
font-family:字体属性
color:字体颜色
字体颜色可以用三种方式来表达。
1.颜色对应的英文
2.16进制的颜色
3.RGB颜色 语法:color:rgb(数字,数字,数字)
font-size:字体大小
font-weight:设置文字的粗细
font-style:设置文字风格(斜体)
text-decoration:文本修饰(上划线，下划线，中划线)
text-align:水平方向上的文字对齐(left，center，right)
line-height:定义一行文字的高度,可以将行高设置为与高度相等实现文字垂直居中 的效果
- 列表属性:
list-style:设置列表项修饰风格，通常设置为none去掉列表项的修饰
- 背景属性:
background-color:背景颜色
背景颜色可以用四种方式来表达。
1.颜色对应的英文
2.16进制的颜色
3.RGB颜色 语法:color:rgb(数字,数字,数字)
4.RGBA颜色 语法:background-color:rgba(数字,数字,数字,透明度0-1之间)
background-image:背景图片 背景图片不会跟随标签的高宽进行缩放
语法:background-image:url(图片地址)
background-repeat:设置背景图片是否平铺已经平铺的方向
可选值:repeat，no-repeat，repeat-x，repeat-y
background-position:设置背景图片的位移
五、盒子模型
任意一个标签在网页中都是以盒子模型来显示和布局的
任何一个标签都会包含4个部分分别是内容、内边距、边框、外边距
- 调整内容的大小:
height:调整内容的高度
width:调整内容的宽度
注意:只有块级标签能够直接调整内容的高宽,行级标签高宽是随着内容的大小随动的,不能直接调整,可以通过display="inline-block"属性将标签的 显示方式修改为行 级块,修改之后行级标签任然不会换行但是可以调整高宽
- 调整内边距的大小:
padding:调整内边距的大小
常见用法:
padding:10px 将上右下左四个方向的的内边距都调整为10px
padding:10px 5px 将上下内边距设置为10px 左右内边距设置为5px
padding:10px 20px 30px 40px 依次将上右下左四个内边距进行设置
padding-left:设置左内间距的大小
padding-right:设置右内间距的大小
padding-top:设置上内间距的大小
padding-bottom:设置左内间距的大小
- 调整外边距的大小:
margin:调整外边距的大小
常见用法:
margin:10px 将上右下左四个方向的外边距调整为10px
margin:10px 5px 将上下外边距设置为10px 左右外边距设置为5px
margin:10px 20px 30px 40px 依次将上右下左四个外边距进行设置
margin-left:设置左外间距的大小
margin-right:设置右外间距的大小
margin-top:设置上外间距的大小
margin-bottom:设置下外间距的大小
- 边框:
border:调整4条边框大小、样式、颜色
border-color:调整四条边框的颜色
border-style:调整四条边框的样式
border-width:调整四条边框的大小
border-top:调整上边框的大小、样式、颜色
border-top-color:调整上边框的颜色
border-top-style:调整上边框的样式
border-top-width:调整上边框的大小
border-bottom:调整下边框的大小、样式、颜色
border-bottom-color:调整下边框的颜色
border-bottom-style:调整下边框的样式
border-bottom-width:调整下边框的大小
border-left:调整左边框的大小、样式、颜色
border-left-color:调整左边框的颜色
border-left-style:调整左边框的样式
border-left-width:调整左边框的大小
border-right:调整右边框的大小、样式、颜色
border-right-color:调整右边框的颜色
border-right-style:调整右边框的样式
border-right-width:调整右边框的大小
- 定位属性:
position:调整标签的定位方式
可选的定位方式有:absolute(绝对定位) relative(相对定位) fixed(固定定位)
- 绝对定位:
在设置position="absolute"之后,可以通过top,left,bottom,right4个属性来设置标签距离它的参照物 之间的间距
绝对定位的标签会脱离文档流,意思是绝对定位的标签不会影响到其他标签的布局,其他标签不 会影响到绝对定位标签的布局
绝对定位标签的参照物是上级的拥有绝对定位属性的标签,如果该标签的所有上级标签都没有绝对定位属 性,最终会使用body作为参照物
- 相对定位:
在设置position="relative"之后,可以通过top,left,bottom,right4个属性来设置该标签相对于原本位 置产生的位移
相对定位的标签不会脱离文档流,网页在对标签进行布局时,依然会将相对定位的标签计算在内,但是无论 相对定位的标签如何位移,布局始终是以标签的原位置进行计算的
- 固定定位:
在设置position="fixed"之后,可以通过top,left,bottom,right4个属性来设置标签相对于浏览器窗口 的距离,无论网页如何滚动,标签始终会保持与浏览器窗体的距离不变
固定定位会脱离文档流,不会影响其它标签的布局。
- 其它常用属性:
- float:浮动属性 取消块级标签的换行
给标签添加浮动属性之后有两个效果
1.标签会上升到上面一级的水平面
2.取消块级标签本身独占一行的特性
- clear:取消浮动 clear标签取消左侧标签或者是右侧标签的浮动效果
clear属性只能作用于标签本身
clear属性可选值left、right、both作用是当前标签在布局时，不考虑左侧、右侧、左右浮动标签对自身的影响
opacity:设置标签半透明度(包括背景和内容)
display:可选值有 none、inline-block、block
none 隐藏标签不会占据位置
inline-block 行级块
block 块级
- visibility: 可选值 hidden、visible
hidden 隐藏会占据标签的位置
visivle 显示
cursor:当鼠标移动到标签上时,改变鼠标指针样式
overflow:针对于超出容器的内容的处理方式 可选值 auto、scroll、hidden
六、超链接的伪类样式
超链接具有4种状态,link visited hover active
超链接伪类样式可以用于设置超链接在这4种状态下各自的样式
语法:
选择器:link{}
选择器:visited{}
选择器:hover{}
选择器:active{}
4种伪类样式一定要按照上述顺序编写,如果不想改变某个状态的样式,可以缺省