=CSS============================
CSS是层叠样式表(Cascading Style Sheets)的缩写,它用于定义HTML元素的显示形式,是一种格式化网页内容的技术
CSS导入方式的优先级:采用就近原则,什么样式离元素越近,优先用什么样式。
优先采用内联式,嵌入式和外联式,哪个离元素越近,先用哪个
CSS样式规则:
元素选择器:p{} 凡是标签名称为p的元素均采用该样式。
h1,h2{} h1和h2标签采用该样式
类选择器:.myclass{} 凡是使用class=“myclass”的元素均用该样式,可以给同一个元素加上多个类选择器,中间以空格隔开。
id选择器:#myid{} id属性为myid的元素采用该样式
包含选择器:#imgTable img{} id属性为ingTable元素中的img子元素采用该样式
通配选择器:#mydiv *{} id属性为mydiv的元素中,所有的子元素采用该样式
伪类选择器:#myImage:hover{} 当鼠标悬停在id为my Image的元素时,采用该样式
属性选择器:input[type=text]表示input标签的元素,type属性为text的元素,采用该样式
=样式规则的位置=====================
外部样式表
不需要style标签
嵌入式样式表
内联样式
属性名为style
举例:
CSS优先级========================
!important可以改变CSS选择器的优先级。加上一个“!important”就优先于正常的CSS规则
=理解CSS盒模型=====================================
CSS使用一个称为盒模型的方法格式化所有HTML元素。当为元素定义格式时,CSS实际定义盒子的格式。
在盒模型中,我们可以控制四个不同的分层属性:
内容(content):元素中的内容
外边距(Margin):代表元素外边的空间,这个控件将元素相互分开。
边框(Border):位于元素边距内和元素的边框外之间的可配置的线
内边距(Padding)元素内容和元素边框之间的空间
边框、边距、边框距这三个属性可以单独设置,但是它们同时可以相互配合在一起来格式化一个元素
盒模型均可以用“上右下左”方法设置。如果仅给出两个或三个值,那么缺失边的属性值与对边相同的值
布局:
margin是当前元素和border的距离
padding是内容和border的距离
margin是对外的,padding是对内的
margin属性
水平盒子的间距为两个盒子间距的和
垂直盒子的间距为两个盒子间距的较大值
margin值可以设置为负担
盒子之间的关系
标准文档流
所谓标准流,就是指在不使用其他于排列和定位相关的特殊CSS规则时,各种元素的排列规则
1,文本元素按照从上到下、从左到右的格式布局
2、块级元素按照从上到下依次排列
3、内嵌元素按照从左到右依次排列
显示属性
diplay=‘none’,元素不会占用空间
visibility=‘hidden’,元素会占用空间
内容超出容器
overflow:scroll,出现滚动条
oberflow:hidden,超出内容隐藏
定位属性
static 静态定位,表示按照HTML格式规则正常定位:
relativ 相对定位。相对于元素原始位置进行了偏移
absolute 绝对定义,是指某元素将定位在已经定位的父元素框架或浏览器窗口本身的左上角绝对位置,
flxed 固定定位,类似absolute,不过其包含块是视窗本身
块级元素转化为内嵌元素:float:left;
内嵌元素转化为块级元素:display:blook;
=什么是javaScript====================
是一种嵌入在网页中的程序段。(客户端脚本语言)
是一种解释型语言,被解释器(浏览器、手机APP等)解释执行
由Nerscape发明,ECMA将其标准化
增强客户端的互交功能