CSS :全称:Cascading Style Sheets 层叠样式表,定义如何显示HTML元素,多个样式可以层层覆盖叠加,如果不同的css样式对同一html标签进行修饰,样式有冲突的 应用优先级高的,不冲突的共同作用
基础语法:选择器{属性:值;属性:值….. }
注意事项:
-
请使用花括号来包围声明
-
如果值为若干单词,则要给值加引号
-
多个声明之间使用分号;分开
-
css对大小不敏感,如果涉及到与html文档一起使用时,class与id名称对大小写敏感
css导入方式
- 内部方式:将css样式抽成一个单独文件,使用者直接引用<style></style>
- 外部方式:在页面中引入一个独立的单独文件<link></link>
- @import方式:在页面中引入一个独立的单独文件@import
link和@import方式的区别:
-
link所有浏览器都支持,@import某些版本低的IE不支持
-
@import是等待html加载完成才加载
-
@import不支持js动态修改
css选择器
- 基本选择器
元素选择器:在head中使用style标签引入在其中声明元素选择器:html标签{属性:属性值}
id选择器:给需要修改样式的html元素添加id属性标识,在head中使用style标签引入在其中声明id选择器: #id值{属性:属性值}
class选择器:给需要修改样式的html元素添加class属性标识,在head中使用style标签引入在其中声明class选择器: .class名{属性:属性值}
基本选择器的优先级从高到低:id选择器,class选择器,元素选择器
- 属性选择器
根据元素的属性及属性值来选择元素。在head中使用style标签引入在其中声明
格式为:
htm标签[属性=‘属性值']{css属性:css属性值;}
html标签[属性]{css属性:css属性值;}
- 伪元素选择器
静止状态 a:link{css属性}
悬浮状态 a:hover{css属性}
触发状态 a:active{css属性}
完成状态 a:visited{css属性}
- 层级选择器
父级选择器 子级选择器
css属性
文字属性
属性名 | 取值 | 描述 |
---|---|---|
font-size | 数值 | 设置字体大小 |
font-family | 默体、宋体、楷体等 | 设置字体样式 |
font-style | normal正常; italic斜体; | 设置斜体样式 |
font-weight | 100~900数值;bold;bolder; | 粗体样式 |
文本属性
属性名 | 取值 | 描述 |
---|---|---|
color | 十六进制;表示颜色的英文单词; | 设置文本颜色 |
text-indent | 5px缩进5像素;20%缩进父容器宽度的百分之二十; | 缩进元素中文本的首行 |
text-decoration | none;underline;overline;blink; | 文本的装饰线 |
text-align | left;right;center | 文本水平对齐方式 |
word-spacing | normal;固定值; | 单词之间的间隔 |
line-height | normal;固定值; | 设置文本的行高 |
text-shadow | 四个取值依次是: 水平偏移;垂直偏移;模糊值;阴影颜色; | 设置阴影及模糊效果 |
背景属性
属性名 | 取值 | 描述 |
---|---|---|
background-color | 16进制;用于表示颜色的英语单词; | 设置背景色 |
background-image | url('图片路径') | 设置背景图片 |
background-repeat | repeat-y;repeat-x;repeat;no-repeat; | 设置背景图的平铺方向 |
background-position | top;bottom;left;right ; center; | 改变图像在背景中的位置 |
列表属性
属性名 | 取值 | 描述 |
---|---|---|
list-style-type | disc等 | 改变列表的标识类型 |
list-style-image | url("图片地址") | 用图像表示标识 |
list-style-position | inside;outside | 标识出现在列表项内容之外还是内部 |
尺寸属性:width:设置元素的宽度 height:设置元素的高度
显示属性:display:none:不显示 ;block:块级显示;inline:行级显示
轮廓属性:
属性名 | 取值 | 描述 |
---|---|---|
outline-style | solid(实线)/dotted(虚线)/dashed(虚线)等 | 设置轮廓的样式 |
outline-color | 16进制;用于表示颜色的英文 | 设置轮廓的颜色 |
outline-width | 数值 | 设置轮廓的宽度 |
浮动属性float:浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的 普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。
如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动 元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
clear 属性:规定元素的哪一侧不允许其他浮动元素。
取值如下:
取值 | 描述 |
---|---|
left | 在左侧不允许浮动元素。 |
right | 在右侧不允许浮动元素。 |
both | 在左右两侧均不允许浮动元素。 |
none | 默认值。允许浮动元素出现在两侧。 |
inherit | 规定应该从父元素继承 clear 属性的值。 |
定位属性:
相对定位:relative:元素框偏移某个距离,元素仍保持其未定位前的形状,它原本所占的空间仍保留。
绝对定位(absolute):元素框从文档流完全删除,并相对于其包含块进行定位。包含块可能是文档中的另一个元素或者是 初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像元素原来不存在一样。元素定位后生成一个块级框。
固定定位(fixed):元素框的表现类似于将 position 设置为 absolute,不过其包含块是视窗本身。
css盒子模型
边框属性:border 外边距相关属性:margin:
外间距,边框和边框外层的元素的距离
属性名 | 取值 | 描述 |
---|---|---|
margin | top;right;bottom;left | 四个方向的距离 |
margin-top | 数值 | 上间距 |
margin-bottom | 数值 | 下间距 |
margin-left | 数值 | 左间距 |
margin-right | 数值 | 右间距 |
内边距属性:padding:内间距,元素内容和边框之间的距离
属性值 | 描述 | |
---|---|---|
padding-left | 左间距 | |
padding-right | 右间距 | |
padding-top | 上间距 | |
padding-bottom | 下间距 |
圆角属性:border-radius: 25px; 添加阴影:box-shadow: 10px 10px 5px #888888; 背景图片尺寸:background-size;
设置是否平铺:background-repeat:no-repeat;常用 使用多个背景图:background-image 文本阴影:text-shadow: 5px 5px 5px #ffff00;