Day13-CSS样式

CSS

CSS

css style: 里面写的就叫做css 每一个样式的间隔用; 全部相同的时候引用class

style="height: 48px;background-color: blue

ID选择器

# 代表通过id选择器查找

#i1 {height: 48px;background-color:red;}

class选择器

. 代表通过class选择器查找

.menu{height:456px;background-color:red;}

标签选择器

标签名 代表通过标签选择器查找

span {color:red;background-color:blue;}

标签层级选择器

标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例：span标签下面所有div标签颜色改变

span div{color: blue;background-color:red;}

CLASS层级选择器

通过CLASS标签选择器定位第一层，再通过层级选择器定位第二层

.cl div{background-color: #336699;height:48px;}

ID层级选择器

通过ID标签选择器定位第一层，再通过层级选择器定位第二层

#i2 div{background-color:red;height:23px;}

ID组合选择器

ID组合选择器，应用于以id选择器进行css样式设置的，可以通过id z1 z2 z3 共用一套css样式 组合 通过逗号间隔

#z1,#z2,#z3{background-color: red;height:2px;}

CLASS组合选择器

CLASS组合选择器，应用于以CLASS选择器进行css样式设置的，可以通过CLASS s1 s2 s3 共用一套css样式 组合通过逗号间隔

.s1,.s2,.s3{background-color:red;height:23px;}

属性选择器

属性选择器 对选择到的标签 再通过属性进行筛选 可以和层级选择器连用

div[s='dsx'] {background-color: darkred;height:234px;}

优先级

标签中style优先级最高，其次再代码中就近找，也就是从下往上找

 

引入CSS样式表

CSS可以卸载三个地方，分别是1、标签中增加属性style; 2、header中添加style标签，在标签中添加CSS； 3、引入CSS样式表，实际就是讲header中的style标签复制到一个以css为结尾的文件中， 通过header中添加link标签，引入css样式表 <link rel="stylesheet" href="xxx.css">

 

height

高度

width

宽度

font-size font-weight

font-size:字体大小px font-weight:字体加粗

font-weight:字体加粗 bold:粗体 700 bolder:更粗字体 lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细

20px大的字体 700粗的字体

text-align

text-align 水平文本对齐方式

left: 文本左对齐 right: 文本右对齐 center: 中间对齐 inherit:父类继承

1

line-height

line-height 垂直文本对齐方式

line-height 的属性直接对应外层div的宽度就可以

1

float

float 浮动 块级标签浮动后 相当于分层

通过浮动可以讲块级标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承

左边

并列左边

最右边

 

display

display 展示属性

块级标签和行内标签之间切换的属性 display:inline, 块级标签转换为行内标签 display:block 行内标签转换为块级标签 行内标签无法设置高度、宽度、padding、margin，可以通过display的display:inline-block，行内标签的自己多大就占多大的特性 又有块级标签使用宽、高、内外边距的特性

外联标签

内联标签 天啦噜 天啦噜 不显示的标签

margin

margin 外边距

外边距 自己针对外围的div产生变化 外边距成大外层 top left right bottom

 

padding

padding 内边距

内边距 自身的外边距增加 top: 从上到下增加 内边距扩大自身 bottom: 从下增加 left: 从左增加 right: 从右增加

内边距增加

postion

position 分层

position: fixed 固定在窗口的某个位置 top: 距离顶部多少像素 left right bottom

position relative absolute

position: relative 与 position: absolute(绝对定位，单用没什么作用 结合relative用) absolute的定位针对于relative的定位

单独relative没有任何意义

z-index

z-index 层级关系

分层后通过z-index来记录层级关系 越大在越前面

z-index: 10

cursor

cursor 一些不同的光标 cursor:pointer 鼠标的销售 cursor:move 有很多种样式 知道干嘛的就行了

overflow

overflow属性设置 当div内的内容溢出div的宽高时，如何处理，默认回出现在元素框之外hidden:溢出部分截取掉 scroll: 超出就出现滚动条

hover

hover属性是当鼠标移动到上面后，设置其样式

侯宁是谁

background

background 是针对背景一些样式设置，background-image: 背景图片，图片大小如果小于div的大小，则无限堆叠 水平垂直都会堆叠。可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠). background-position 针对div设置图片展示的位置。background-position-y": 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个值为x的值，第二个为y的值，background-position:10px 10px。可以通过background直接简写 background简写参数分别为 颜色 背景图 position横向纵向 是否堆叠

无限堆叠

 

不堆叠

 

纵向堆叠

 

横向堆叠

 

两种方式

 

 

简写background属性