css中常用功能

css选择器

常用选择器

群组选择器：

选择一组元素，提供相同的样式

选择器1，选择器2，选择器3…{样式;}

关系|组合选择器:

后代选择器: 选中在某个父级选择器选中的父级标签中的子级 ,无论是第几层子元素都会被选中
父级选择器 子级选择器{样式}

子元素选择器 > :

用于选择指定标签元素的所有第一代子元素，以大于号分隔

相邻兄弟选择器 + :

可选择紧接在另一元素后的元素，且二者有相同父元素。以加号分隔 要求必须是紧挨在后面的第一个兄弟元素

普通兄弟选择器 ~ :

选择紧接在另一个元素后的所有元素，而且二者有相同的父元素，以波浪线分隔

属性选择器: [] (了解)

根据元素的某个属性,或者属性值 选中一个或者一组元素

伪列选择器 :

​ a:link {color:#FF0000;} /* 未访问的链接 /
​ a:visited {color:#00FF00;} / 已访问的链接

​ 只针对于a标签使用
​ a:hover {color:#FF00FF;} /* 鼠标划过链接 /
​ a:active {color:#0000FF;} / 已选中的链接 */
​ 任意元素都可以使用

颜色设置

颜色给值方式:
背景颜色
字体颜色

颜色的英文单词 blue…
#6个字符 十六进制 #5858b1
rgb(0~255 ,0~255 ,0~255 ) 颜色的三原色

透明度:
rgba(0~255 ,0~255 ,0~255 ,0~1 ) a代表透明度 0~1 0完全透明 1完全不透明
只针对当前设置颜色的内容透明
opcity 元素的透明度
0~1 0完全透明 1完全不透明

标签元素的分类:

​ 块元素
​ 行内元素

display :

​ block 块元素
​ 独占一行
​ 可以设置宽高
​ 可以设置内外边距
​ inline 行内元素
​ 宽度有内容撑起,可以与其他行内元素或者文本同行显示
​ 不能设置宽高
​ 不能设置上下 的内外边距

​ inline_block 行内块
​ 行内元素,块元素的特点都有
​ 宽度有内容撑起,可以与其他行内元素或者文本同行显示
​ 可以设置宽高
​ 可以设置内外边距
​ 注意: 可以让块元素同行显示

​ none : 消失了

背景样式

背景: backgroud
背景颜色 backgroud-color:
背景图片 backgroud-image:
背景图片是否平铺 backgroud-repeat:
no-repeat 不平铺
repeat-x x轴平铺

​ repeat-y y轴平铺
背景图片大小 backgroud-size:
​ 像素值 px
​ 当之定义一个值,默认宽度,高度会等比缩放
背景图片位置 backgroud-position:
​ 像素值 百分比 方向位置的单词(left right top bottom center)
​ 如果值提供一个值,默认设置x轴,另一端默认居中

背景跟随滚动问题 background-attachment:
scroll 跟随滚动
fixed 固定,不跟随滚动
固定相对于窗体的边界

复合属性:
backgroud : 颜色 图片 平铺 位置 跟随滚动;
顺序可以改变,个数不固定

文本样式

文本样式:
color 字体颜色
font-size 字体大小
font-style 字体样式 正常normal|斜体italic
font-family 字体设置 可以同时设置多个字体,顺位显示
font-weight 加粗
100~900之间的整数 700以上是粗体 600以下是正常
bold | bolder 加粗 | normal 正常

​ text-decoration 设置下换线|中划线|上划线
​ text-indent 首行缩进
​ px
​ em 当前内容的几个字符的大小text-align 文本居中
​ 针对块元素|行内块有效
​ 可以继承

实体字符:
&+实体名称+;
&+nbsp;空格
&lt ；<
&gt ；>

​ text-align 行内元素|块元素中的内容在元素中水平对齐方式

line-height 行高
利用行中的内容在行高中垂直居中的特点,让文本的行高与块元素|行内块元素登高,就能实现文本 在元素中垂直居中

浮动

css 中的浮动
让块元素同行显示
float 浮动 : 元素向指定方向移动,当遇到其他浮动元素或者浏览器的边界的时候听下
left
right

​ 注意:
​ 浮动会半脱离文档流
​ 文档流: 块元素从上到下,行内元素从左到右
​ 块元素一旦浮动,让出文档流的位置,后面的块元素会占据前面浮动元素的位置,内容会让出前面浮

​ 动元素的位置->版脱离文档流

清除浮动

​ 清除浮动
​ clear 让元素的某一个方向没有浮动元素
​ left 当前元素的左边不能有浮动元素
​ right 当前元素的右边不能有浮动元素
​ both 当前元素的两边都不能有浮动元素 ->推荐

需求: p标签不要占据前面浮动元素的位置 box
1) 在p中使用clear
2) 浮动元素的父级box设置高度
3) overflow: hidden; 父级设置overflow:hidden;作用是:子级元素浮动了