CSS:
Cascading Style sheet 层叠样式表!!!
HTML是骨架,CSS是用来润色,提供页面的观赏度,JavaScript是让页面更好展示并且拥有动态特效
Ajs JavsScript NodeJS React Native
CSS三种声明方式:
1. 行内样式表
2. 内联样式表
3. 外联样式表
推荐使用外联样式表:
1. 可以提高用户页面加载的效率,第一次访问页面下载CSS之后,那么之后的加载数据不需要重写获取
CSS文件
2. 可以降低公司的运行带宽,供更多的用户使用
补充知识:
在HTML标签内,每一个标签都有三个固定属性,分别是 name id class
name 标签的名字,通常会用到表单里面用于数据的传递
id 标签的身份证号,不能重复!!!唯一性
class 是一类标签,这些标签认为是一类
CSS的选择器:
1. 标签选择器
2. class选择器
3. id选择器
4. 组合选择器
5. 层级选择器
6. *选择器, 通配符,统配所有标签
7. 伪类选择器
选择器的优先级问题:
浏览器默认 < * < 其他 < class < id
原则:
元素定位越具体,优先级越高
CSS尺寸有三种
px 像素, 最常用
em:相对于父元素的比例
rem:相对于HTML标签的比例,
这里em和rem可以用小数
CSS字体:
font-style:italic/normal;
font-weight:normal/bold;
font-size:字体大小;
font-family:楷体;
font:style weight size family;
简写固定顺序,不能调整,而且size和family不能省略
文本
text-indent:通常是2em 表示首行缩进2个字符长度
text-overflow:ellipsis; //超出范围的内容用... 代替
line-heigth:行高
while-space:nowrap; 强制不换行
overflow:超出部分的处理方式,一般是hidden
text-decoration:文本添加各式各样的横线
none:没有任何横线
underline:下划线
overline:上划线
line-through:删除线
背景:
background-color:背景颜色
background-image:url(图片的统一资源定位符); 背景图片
background-repeat:
no-repeat; 背景图片不平铺
repeat-x:页面横向平铺
repeat-y:页面纵向平铺
repeat:全部平铺
background-position:left right top bottom; 背景图片的位置
background-attachment:
fixed:相对于整个页面窗口固定
scroll:相对于元素内容滚动
local:相对于元素内容固定
定位:
position:
fixed:相对于页面固定位置 可以设置left top right bottom
absolute:绝对定位,是从页面的左上角开始定位操作 可以设置left top right bottom
relative:相对定位,相对于原来位置进行定位操作 可以设置left top right bottom