css 层叠样式表

css 层叠样式表

目标: 学习常用的样式

css语法的使用方式:

1.行内样式表 : 在元素上添加style属性,属性中定义样式表
2.内部样式表 : 在head中添加一对style标签对,定义样式
3.外部样式表 : 在外部定义css文件,使用link标签在head中进行引入

 样式表的优先级:
 谁离元素更近优先显示谁

样式:
选择器 {
样式;
样式;
样式;
…
}

       选择器:选中某些元素

基础选择器:

#id选择器 : 精确定位到某一个元素
元素|标签选择器 :根据标签名匹配一个,或多个元素
class|类选择器 : 根据元素的class属性的值,匹配一个或者多个元素
元素的class属性值可以重复,值列表可以有多个值
*选择器 : 匹配页面中的所有元素
清除浏览器的默认样式:
*{
padding:0;
margin:0;
}

基础选择器的优先级:
id>class>元素

1.群组选择器

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

选择器位置可以使用任意选择器选中元素。。
## 2.关系选择器:

1)后代选择器:选择器1 选择器2 {…}
2)子元素(第一代子元素)选择器1 > 选择器2 {…}
3)相邻兄弟选择器 选择器1 + 选择器2 {…}
4)普通兄弟选择器 选择器1 ~ 选择器2 {…}

背景样式 background

background-color: 背景颜色
颜色的英文单词
十六进制#
rgb(0_255,0255,0~255)
rgba() a是透明度 0~1 0完全透明,1完全不透明

background-image 背景图片
url(路径)

background-repeat 背景图像是否平铺
repeat 平铺
no-repeat 不平铺
repeat-x x轴平铺
repeat-y y轴平铺

background-size 背景图像大小
background-position 背景图像位置

text-align 使用在行内元素上无效
left
center
right

line-height 行高
默认一行中的内容在这一行中是垂直居中的
保证块元素中的内容的行高与块元素的高度相同,就能达到垂直居中的效果

vertical-align 块元素无效
给同行的行内元素设置vertical-algin属性控制其垂直方向的对其方式
top bottom middle

块元素中多行文本垂直居中:

父元素:display:table;
子元素:
display: table-cell;
vertical-align: middle;

display:
inline 行内元素
block 块元素
inline-block 行内块 ,块元素和行内元素的特点

以上垂直水平居中都是指行内,行内块,文本的对齐方式
如果想要控制块元素在其父级中的对其方式,需要利用到盒子模型


复合属性:
background:推荐大家使用
通过复合属性设置背景的相关样式,没有顺序和内容个数的要求
font:不推荐使用

list-style: none ; 去除列表项标记

盒子模型:

内容+内边距padding+变框border+外边距margin
能看到的元素大小: 内容+内边距+变框

给内外边距设置值:
padding: 50px; 四周的内边距都是50px
padding: 50px 100px; 上下50px 左右100px
padding: 10px 50px 100px; 上 右 下 左边有对边一样50px
padding: 10px 50px 80px 100px; 上 右 下 左

padding:
元素设置背景的时候,内容区域设置背景,但是背景会延伸到内边距上

border:宽度 样式 颜色; 变框三要素
border-width:
border-style:
border-color:

border-top::宽度 样式 颜色;
border-left::宽度 样式 颜色;
border-right::宽度 样式 颜色;
border-bottom::宽度 样式 颜色;

margin:外边距
块元素的上下外边距会合并,以大的值为主要
行内元素没有上下外边距
行内元素上下内边距无效

文档流: 块元素从上倒下 行内元素从左到右

float 浮动

让元素按照一定的方向进行移动,当遇到周围其他浮动元素|父级的边界的时候停止移动
left right none

行内元素设置高度
块元素一行显示

clear:清除流
left 我的元素左边不能有浮动元素
right 我的元素右边不能有浮动元素
both 我的元素两边都不能有浮动元素—条件