目录
1、css
css:层叠样式表
1> 按照位置分类
1)行内样式表: 定义在标签内部的样式表
2)内部样式表:定义在style标签里面的。style标签定义在head标签内部
3)外部样式表:单独创建一个后缀名为css文件,在该文件中直接定义选择器。然后再html页面中通过
<link rel="stylesheet" type="text/css" href="css文件的地址"/>
选择器:由 选择器{属性名:值;属性名:值}
优先级:就近原则【记住】
行内>内部>外部【不准确的,因为通常是先引入外部样式表然后再写内部样式表,如果再定义的时候,先写内部样式表<style> 然后再引入外部样式表 <link/> 此时上面的表述由问题的】
关于外部样式表的说明:常用的link方式引入外部样式表,但是还有一种方式
<style> <!-- @import url("css/style.css"); --> </style>
<link rel="stylesheet" type="text/css" href="css文件的地址"/>
区别: 1>加载时机不同的,link会将css完全加载完毕后,呈现给客户。但是import方式会边加载页面元素边加载css,如果网速教慢,可能会发现import的时候,页面风格未完全加载好
2>使用dom的时候,后期需要用js去操作dom,此时必须得link方式才可以
3>标准不同的,link是xhtml的规范,import是属于css规范
4>浏览器兼容问题,老的浏览器不支持import的方式
首先,从本质上说,这两种方式都是为了加载css文件,但它们还是存在细微的差别。 1、link属于XHTML标签,而@import完全是css提供的一种方式。link标签除了可以加载css外,还可以做很多其他的事情,比如定义RSS,定义rel连接属性等,@import只能加载CSS。 2、加载顺序的差别:当一个页面被加载的时候,link引用的CSS会同时被加载,而@import引用的CSS会等到页面全部被下载完再加载。所以浏览@import加载CSS的页面时可能没有样式,网速慢的时候明显可以看到。 3、兼容性的差别:由于@import是CSS2.1提出的,所以老的浏览器不支持,@import只有在IE5以上的才能识别,而link标签无此问题,完全兼容。 4、使用dom控制样式时的差别:当时用JavaScript控制dom去改变样式的时候,只能使用link标签,因为@import不是dom可以控制的。
2> 选择器
选择器:
选择器名{ 属性名:值; 属性名:值; }
1)基本选择器
分类:标签选择器: 直接以标签命名的选择器
类选择器 : 以 . 命名的选择器 。在标签内部通过 class="类名" 引用
id选择器:是以# 命名的选择器。在标签内部通过 id="id名" 引用
优先级:id选择器>类选择器>标签选择器
2)层次选择器
后代选择器:div span:选择div下的所有的span元素,包括子元素的子元素 子选择器:div>span:div下的子元素span元素 相邻兄弟选择器:div+span:和div相邻的兄弟选择器 通用兄弟选择器:div~span:通用兄弟选择器,和div相邻的span元素
<body> <span>和div平级的span元素</span> <div> <p>我的div下的p元素</p> <span>我是div下的span元素</span> <p> <span>我是div下 的p下的span元素</span> div下的p </p> <h1>div下的h1 <span>h1中的span</span> </h1> </div> <span>和div平级的span元素</span> <h2>和div平级的h2</h2> <span>和div平级的span</span> </body>
3)结构伪类选择器
ul li:first-child : 选取ul下的第一个子元素是li的。如果第一个子元素不是li则定位不到 ul li:first-of-type :选择ul li下的第一个类型是li的元素 ul li:nth-of-type(2):找li这个类型第二个的元素 ul li:nth-child(2) :第二个子元素是li的
4)属性选择器
a[title='flower']:a 标签而且属性title的值等于flower a[title^='a']:a标签而且由title属性的值开头是a a[title$='e']:a标签而且由title属性的值结尾是e a[title*='e']:a标签而且由title属性的中包含e
5)深入CSS属性
1>字形设置 font
font: 风格 粗细 大小 类型 :按照顺序写出来 font-size:字体的大小 12px 24px font-family:字形 看word中字形的设置 font-weight:粗细 normal[正常] bold[加粗] font-style:风格 normal[正常] italic[倾斜]
2>文本设置
color:字体颜色 text-decoration:下划线underline 删除线line-through 去掉下划线none 上划线 overline text-indent:首行缩进 em: 一个汉字 line-height:行高 letter-spacing:字符和字符之间的距离
3>超链接伪类选择器
超链接:四个状态 1>新建 2>鼠标悬浮 3>点击鼠标左键不释放 4>访问过后
新建: link 鼠标悬浮:hover 点击鼠标不释放:active 访问过后:visited
定义吵两句位置的时候必须按照顺序进行定义
l------>v------>h------>a
4>其他的伪类选择器
p::first-letter{ //段落中的第一个字母 color: red; } p::first-line{//段落中的第一行 text-decoration: overline } p::before{//p之前插入内容 content: "p之前的内容"; color: red; } p::after{// p标签之后插入内容 content: "p之后的内容"; color: green; } p:empty::after{ //p:empty:空的p元素, }
p:empty 空的p元素,文字也是子元素[文本元素]
4>列表样式
list-style-type:设置列表符号的样式 disc|square|circle|decimal|none list-style-position:inside|outside :列表符号显示的位置 list-style-image:url() :设置列表符号的图片
2、盒子模型
1、div 块级元素,使用div+css来进行布局
2、盒子模型的信息: 边框【border】 外边距 【margin】 内边距【padding】
边框:
border: 边框线的粗细 边框线的形状 边框线的颜色 boder-width:边框线的粗细 boder-style:边框线的形状 solid【实线】 dashed【虚线】 dotted【圆点】 double【双线】 border-color:边框线的颜色
盒子模型中给值的个数顺序
如果给定一个值 四个方向都一样
如果给定两个值 上下 左右
如果给定三个值 上 左右 下
如果给定四个值 上 右 下 左
内边距:
padding:
外边距
margin
外边距设置的时候,可以设置大的盒子外边距的值 margin:0px auto 可以使盒子自动居中
盒子尺寸
box-sizing:
默认值是:content-box
boder-box:盒子大小就是定义好的值。加上内边距,盒子的尺寸部变的
圆角边框
boder-radius: 一个值四个角都相同的 。 两个值 左上右下一样 三个值 左上 剩余两个角 右下 四个值 从左上开始顺时针开始走
盒子阴影
box-shadow
内容回顾:
1> css 选择器
1)基本选择器 标签选择器 类选择器 class id选择器 id
2) 后代选择器 A B【A后面所有的B元素】 A>B 【A后面所有的子元素B元素】 A+B 【相邻的兄弟元素B】 A~B【A的兄弟元素B】
3)属性选择 a[href] = *= ^= $=
4)伪类: a:link a:visited a:hover a:active
p:first-letter p:first-line div::after div::before
2> css中各种属性【必须得多做几个页面】
字体介绍 :font [font-size font-weight font-family font-style]
文本: color ,text-indent,text-decration ,line-height,
列表: list-style-type none|decimail|disc|circle|square
list-style-image: url()
list-style-position:inside outside
背景:background-color
backgroud-img
background-position
background-repeat
background
盒子模型: border :边框
margin:外边距
padding:内边距
box-sizing
box-shadow
动画:
3、浮动
1>标准文档流:在页面中写的标签有一个对应的位置
块级元素:占据一块区域。如果设置宽和高是起作用的
内联元素:自己不独占一行。如果设置宽和高不起作用了
display属性:显示
块级元素默认值是block 内联元素默认值是inline
如果给块级元素设置display属性的值为inline后,改块级元素就变成了内联元素了,也可以给内联元素设置display属性的值为block,此时内联元素就变成块级元素
如果设置一个元素的display属性为none则该元素隐藏。
2>浮动:float
左浮动: float:left
右浮动:float:right
浮动:浮动后的元素会脱离标准文档流,会对兄弟元素和父元素有影响的。
如果想清除浮动的影响就使用clear:left|right|both 清除浮动对兄弟元素的影响。知道浮动的各个元素的样式
了解有些时候,浮动的元素并没有在一行。空间不够了。
浮动后的元素对兄弟元素和父元素都有影响。如果一个盒子中的元素全部浮动,父容器高度就会变小。
扩展盒子的高度
1) 直接设置父容器的高度
2)使用clear 在父容器的最后加入一个空的元素,设置该元素的风格clear:both来进行设置
3) 为父元素添加伪类
#container:after{ content: ''; clear: both; display: block; }
4)借助overflow设置盒子的高度 溢出
-
visible:默认值,溢出的内容不会给修剪
-
hidden:溢出的部分隐藏
-
scroll:滚动轴 溢出的部分会被修剪,可以借助滚动轴看清全部
如果没溢出,也会有滚动轴的样子。【水平和垂直都有】
-
auto:自动判断【如果溢出,只有垂直方向没有水平方向】
4、定位
position属性
1>默认值 static 无定位
2>相对定位:relative 相对定位,相对于自己原来的位置来定义,相对定位后的元素仍然在标准文档流中,也就是说对兄弟元素和父元素没任何影响。如何元素浮动后定义,相对于浮动后的位置来定位的。
3>绝对定义 abslout /绝对定位,看父容器,如果父容器没有定位,相对于浏览器来定位,如果父容器定位了,相对于父容器定位/【使用比较多,比如热销排行榜等都是绝对定位。此时绝对定义相对于父容器来说的。】
4>固定定位 fixed :永远相对于浏览器来定位。使用场景就在广告上,永远相对于浏览器来说的。如果内容比较多,出现滚动轴,依然是可以固定在固定的位置上的。