CSS
1.css的介绍:
定义如何设置显示HTML元素,让它更美观
2.css语法:
每个css样式由两部分组成:选择器和声明, 声明又包括属性和属性值. 每个声明之后用分号结束
3.css--引入方式:
1).行内样式
直接在标签内的style属性中设置css样式. --> *不建议大量使用
2).内部样式
将css样式集中写在网页<head>标签中的<style>标签中
3).外部样式
将css样式写在一个单独的.css文件中,然后在页面导入即可. -->推荐使用
<link rel="stylesheet" href=""> href中写的是导入的.css文件的路径
4.css--选择器
A.基本选择器
1).元素(标签名)选择器
跟据标签名给对应的标签设置属性
<标签名>{属性}
2).id选择器
给每个标签设置唯一的id,根据这个id给标签设置属性
#id值{属性}
3).类选择器
给每个标签设置class,根据class值给标签设置属性
.class值{属性}
4).通用选择器
给所有的标签设置属性 -->不常用
*{属性}
B.组合选择器
1).后代选择器
给某个标签下的所有子孙标签设置属性
标签名 {属性}
2).儿子选择器
给某个标签下子级标签设置属性
标签名 > 子级标签名{属性}
3).毗邻选择器
给某标签后面紧接的标签设置属性
标签名 + 后面的标签名{属性}
4).弟弟选择器
给同一父级下的某标签后面的指定标签设置属性
标签名 ~ 指定标签名{属性}
C.属性选择器
子级为标签定义一个属性.然后用过这个属性或属性值为标签设定属性
标签名[定义的属性名] {属性}
D.选择器的分组和嵌套
1).分组
多个选择器组合使用,以逗号隔开
.class值,标签名...{属性}
2).嵌套
多种选择器混合起来使用,空格隔开
.class值 标签名 ...{属性}
E.伪类选择器
根据标签的不同状态进行区分
1)a:link{属性} 未访问之前
2)a:visited{属性} 访问之后
3)a:active{属性} 正在访问,就是鼠标点下去,还未松开时
以上3中为<a>标签独有的
4)a:hover{属性} 当鼠标箭头移上去时
5)input:focus{outline:none;background-color:red....} 当鼠标点进input输入框时的样式
F.伪元素选择器 (不推荐使用)
1)标签:first-letter{属性} 给标签的第一个字母设置属性
2)标签:before(content:'内容';属性) 在标签之前插入内容
3)标签:after(content:'内容';属性) 在标签之后插入内容
5.选择器的优先级
1)选择器相同的时候,谁最后就按照谁的css样式渲染
2)选择器不同的时候: 内联样式 > id选择器 > 类选择器 > 元素选择器
3)可用过添加important的方式来强制让样式生效,但是一般不推荐使用
6.css--属性
A.宽和高
width 设置元素的宽度
height 设置元素的高度
B.字体的属性
1)标签{font-family:'宋体','楷体'...} 给标签内的文本设置字体,会按照可识别的第一个字体
2)字体大小 font-size
3)字体粗细 font-weight: normal 默认值,标准
bold 粗体
bolder 更粗
lighter 更细
100~900 设置具体粗细,400=normal,700=bold
inherit 继承父类元素字体的粗细值
4)字体颜色
颜色名称 red...;
十六进制 #FF0000
rgb值 (255,0,0)
rgba (255,0,0,0.3) 设置颜色和透明度
C.文本属性
1)文字对齐
text-align: left 左对齐,默认值
right 右对齐
center 居中对齐
justify 两端对齐
line-height:20px 垂直居中
2)文本装饰
text-decoration:none 默认,标准文本
underline 定义文本下的一条线
overline 文本上的一条线
line-through 穿过文本的一条线
inherit 继承父元素的text-decoration属性值
3)首行缩进
text-indent:32px; 首行缩进2个字符
4)字间距
letter-space:10px;
D.背景属性
1)背景颜色 background-color: 颜色
2)背景图片 background-image: url('图片路径')
3)背景重复
background-repeat: no repeat 不重复
repeat 默认重复,沿x,y轴重复平铺
repeat-x 沿x轴水平平铺
repeat-y 沿y轴水平平铺
4)背景的位置:
background-position: 200px,200px 表示距离父级标签的左边和上边的距离
left top 左上角
left center 中间最左边
left bottom 左下角
center top 中间顶部
center center 最中间
center bottom 中间底部
right top 右上角
right center 中间最右边
right bottom 右下角
以上背景属性支持简写:background: red url("路径") no repaet center center
E.边框
1)宽度 border-width
2)样式 border-style:none 无边框
dotted 点状虚线边框
dashed 矩形虚线边框
solid 实线边框
3)颜色 border-color
4)实现圆角边框 border-radius:数值或者百分值
可简写 border: 2px solid red;
除了统一给边框设置样式,还唯一单独各个边设置样式
例如: border-top-style:solid;
border-top-color:red;
border-top-width:3px;
border-right-style:dotted;
border-left-style:dashed;
border-bottom-style:none;
F.display属性 改变标签的属性
1)display: block 指定对象为块元素,默认沾满整个页面宽度,如果设置了宽度,则会用margin填充剩下的部分
inline 按行内元素显示,此时再设置元素的width,height,margin-top...都不会有什么影响
inline-block 使元素同时具有行内元素和块级元素的特点
none HTML中元素存在,但在浏览器中不显示
2)display:none 和 visibility:hidden 的区别:
display:none 隐藏之后它所在的位置就会被后面的替占
visibility:hidden 隐藏之后它所在的位置不会被占用,会空出来
G.css盒子模型
1)盒子模型的四层:从外到内
1.margin 外边距--用于控制元素与元素之间的距离
2.border 围绕在内边距和内容外的边框
3.padding 内边距:用于控制内容与边框之间的距离
4.content 盒子的内容,显示文本和图像
5.盒子模型的高度: 两个padding + 两个border + content高度
6.盒子模型的宽度: 两个padding + 两个border + content宽度
2)margin外边距各个边的设置:
margin-top:5px;
margin-right:5px;
margin-bottom:5px;
margin-left:5px;
3)常见居中:
margin: 0 auto; (上下0像素,左右自适应居中的效果)
4)常用简写方式
简写:遵循顺时针顺序,其他层(padding..)同理
margin: 5px 10px 15px 20px (上,右,下,左)
padding:5px 10px 15px 20px (上,右,下,左)
1.提供一个,用于四边
2.提供两个,第一个用于上下,第二个用于左右
3.提供三个,第一个用于上,第二个用于左右,第三个用于下
4.提供四个,按照 上,右,下,左 顺序
H.float浮动
1)浮动会生成一个块级框,不论它本身是何种元素.会让该元素脱离整个页面文档
2)两个特点:
1.浮动的框可以向左或向右移动,知道它的外边缘碰到包含框或另一个浮动框的边框为止
2.由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样.
3)三种取值
left:向左浮动
right:向右浮动
none:默认值,不浮动
4)浮动副作用
父标签塌陷问题
I. clear 属性规定元素的哪一侧不允许其他浮动元素
1)清除浮动测的三种方式:
一.固定高度,在父标签里面加一个其他的标签
二.伪元素清除法 css来解决(使用较多)
标签:after{
content:"";
display:block;
clear:both;
}
三.overflow:hidden
2)属性
left 在左侧不逊于浮动元素
right 在右侧不允许浮动元素
both 在左右两侧均不允许浮动
none 默认值,允许浮动元素出现在两侧
inherit 规定应该从父元素继承clear属性的值
J. overflow溢出属性
1)属性
scroll 内容会被修改,但是浏览器会显示滚动条以便查询其余内容
auto 在内容被修改的情况下,浏览器会显示滚动条以便查询剩余内容
visible 默认值,内容不会被修改,会呈现在元素框之外
hidden 内容会被修改,并且其余内容是不可见的
inherit 规定应该从父元素继承 overflow 属性的值
2)
overflow 水平和垂直均设置
overflow-x 设置水平方向,只出现x轴的滚动条
overflow-y 设置垂直方向,只出现y轴的滚动条
K.定位(position)
1)retative 相对定位
是相对于该元素在文档流中的原始位置,即以自己原始位置左上角为参照物.
依据top,left,right,bottom等属性偏移位置
往上移动:top:-100px（注意是负值）或者bottom：100px（正值）
往左移动:left:-100px（也是负值）或者right：100px
往下移动:bottom：-100px（负值）或者top：100px（正值）
往右移动:right:-100px（负值）或者left：100px
2)absolute 绝对定位
绝对标签的移动,如果父级标签设置了position:relative属性,则以父级标签的左上角为参照物
如果父级或者父级以上标签都无position:relative属性,则按照body范围
设置了position:absolute属性的标签会浮动起来,跟float差不多,会出现塌陷问题
3)fixed 对象脱离正常文档流，使用top，right，bottom，left等属性以窗口为参考点进行定位，当出现滚动条时，对象不会随着滚动。
L. z-index
设置对象的层叠顺序,一般用在模态对话框上
1.z-index值表示谁压着谁,值大的在上面
2.只有定位了的元素,才能有z-index,也就是说,不管相对定位/绝对定位/固定定位,
都可以使用z-index,但是float浮动元素不能使用z-index
3.z-index值没有单位,就是一个正整数,默认的z-index值为0
如果大家z-index值都为0或者一样,谁写在后面,谁就压在别人上面
4.定位了的元素永远压在没定位元素的上面
5.从父现象:父亲值小,儿子也在下面被压
M.opacity 透明度
用来定义透明效果.取值范围:0~1,0是全透明,1是不透明
总结:可继承的元素 clear text开头的 font开头的 color
浙公网安备 33010602011771号