CSS基础(表现标准)

css选择器分类

• 基础选择器
• 标签选择器
• 类选择器
• ID选择器
• 复合选择器

样式表书写位置

选择器

写法:选择器{属性:值; 属性:值}
简单属性:

1. width：设置宽度，单位px像素
2. height：高度
3. color：前景色，也就是文字的颜色
4. background-color：背景色。
5. font-size:字体的大小。
6. text-indent:首行缩进大小
7. text-align:left | center| right: 内容的水平对齐方式

• 标签选择器:标签{属性：值;}

div{
            font-size: 50px;
            color: white;
        }
颜色表示:#ffffff/名称/rgb(,,,)/rgba(,,,,)

• 类选择器(最常用): .自定义类名{属性:值; 属性:值；}

.box{
            font-size: 50px;
            color: white;
        }

特点:谁调用,谁生效
1.一个标签可以调用多个类选择器
2.多个标签可以调用同一个类选择器(多个标签有相同的类名)
类命名规则:1.不能是数字开头.中间可以使用_或者-连接

常见命名规范:

命名规范.png

• ID选择器:#自定义名称{属性:值;}

#box{
            font-size: 50px;
            color: white;
        }
特点: 一个标签只能调用一个id选择器
        一个标签可以同时调用类选择器和id选择器

• 通配符选择器(不推荐使用)

*{
属性:值
}

复合选择器

• 交集选择器: 标签+类（ID）选择器{属性：值；}
  满足使用了某个标签，还要满足使用了类（id）选择器

div.box{
}
div#box{
}

• 后代选择器: 选择器+空格+选择器{属性：值;}
  首先要满足包含关系,父元素在前面,子元素在后面
  特点:无限制隔代(即区别于子代选择器,只要后代满足要求,可以隔代)
  标签.类,id选择器的自由组合

div span .box #box1{

}

• 子代选择器:选择器>选择器{属性:值;}
  必须是直接子代才可以

div>span>.box{
}

• 并集选择器: 选择器+，+选择器+，选择器{属性:值;}

div,p,span{
}

文本元素:

属性:

1. font-size:16px; 文字大小

• font-weight: 700 ; 值从100-900，文字粗细，不推荐使用font-weight:bold;
• font-family:微软雅黑; 文本的字体
• font-style: normal | italic; normal 默认值 italic 斜体
• line-height: 行高

• 文本属性连写:font: font-style font-weight font-size/line-height font-family;

Font:italic 700 16px/40px  微软雅黑;
文字表达方式:1.直接中文,2英文,3.unicode编码

CSS样式类型

1.内联式(行内式):

2.内嵌式

3.外联式(最常用)

标签分类

• 块级元素:

• 一个块级元素独占一行

• 元素的高度、宽度、行高以及顶和底边距都可设置

• 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度

• 实例: div p form 等等

• 行级元素:

• 和其他元素在同一行上

• 元素的高度、宽度、行高及顶部和底部边距不可设置(有好处有坏处)

• 元素的宽度就是它包含的文字或图片的宽度

• 实例: span a

• 行内块元素:

• 同时具备行内元素和快内元素的特点(即在一行显示并且可以设置宽高)

• 实例: img input

转换

1.将行内元素转换为块级元素
display: block:
2.将行/块内元素转换为行内快
display: inline-block;
3.转换为行内元素
display: inline;

CSS三大特性

• 层叠性: 是指多种CSS样式的叠加,并且后面的样式总会层叠前面的样式
• 继承性: 子标记会继承父标记的某些样式
• 所有字相关的都可以继承，比如：color、text-系列、font-系列、line-系列、cursor
• 所有盒子相关的属性都不能继承.比如:边框、外边距、内边距、背景、定位、元素宽高属性
• 优先级:
• 默认样式<标签选择器<类选择器
• 继承样式的权重为0,行内样式优先
• 权重相同时，CSS遵循就近原则
• 所有都相同时，声明靠后的优先级大
• CSS定义了一个!important命令，该命令被赋予最大的优先级

注意:优先级是指元素出现想同的样式时(比如都出现font-size)才会考虑哪一个优先级高,不同的样式,低优先级同样有效.解决方法:在浏览器中检查元素,会发现优先级自下至上依次增高

CSS伪类

• a:link{属性:值;} a{属性:值}效果是一样的。
• a:link{属性:值;} 链接默认状态
• a:visited{属性:值;} 链接访问之后的状态
• a:hover{属性:值;} 鼠标放到链接上显示的状态
• a:active{属性:值;} 链接激活的状态
• a:focus{属性:值；} 获取焦点

文本修饰

text-decoration: none | underline | line-through

背景(background):

• background-color:设置背景颜色
• background-image:设置背景图片
• background-repeat: 设置背景平铺 repeat(默认) no-repeat repeat-x repeat-y
• background-postion: 设置背景位置 left,right,center,top,bottom
• 方位值只写一个的时候，另外一个值默认居中。

background-postion: left

• 写2个方位值的时候，顺序没有要求

background-postion: left top

• 写2个具体值的时候，第一个值代表水平方向，第二个值代表垂直方向

background-postion: 20px 30px

• background-attachment: 设置背景是否固定
• background-attachment 背景是否滚动 scroll | fixed
• 背景连写:

background: red url("image.png") no-repeat 30px 40px scroll
无顺序要求

行高(line-height)

浏览器默认字体大小: 16px
浏览器默认行高: 18px
行高= 上间距+文字大小+下边距
行高单位: 20px,2em,150%,2
推荐行高使用像素单位
注意:一行文字行高和父元素高度一致的时候，垂直居中显示。

盒子模型:

• 元素组成:内容,内边距,边框,外边距

• 边框(border)

• border-top-style: solid 实线 dotted 点线 dashed 虚线

• border-top-color: 上边框颜色

• border-top-width: 上边框宽度

• border-top: border-top-color border-top-width border-top-style

• 若四个边框相同,去掉top就是统一设置四个边框

• border-collapse:collapse 设置边框合并,适合制作细线表格

• 内边距(padding)

• padding: 10px (上下左右均为10)

• padding: 10px 20px(上下为10px,左右为20px)

• padding: 10px 20px 30px(上10px,左右20px,下30px)

• padding: 10px 20px 30px 40px(上右下左顺时针)

• padding-top,padding-right,padding-bottom,padding-left

• 盒子宽度:内容宽度(width)+左右内边距+左右边框宽度

• 补充:如果子盒子是继承自父盒子的宽度的,设置padding不会影响子盒子的宽度,子盒子继承的宽度是父盒子content的宽度,而我们设置的width和height都是content的属性

• 外边距(margin):和内边距用法一样

• margin: 10px

• margin-top: 10px

• margin: 0 auto 设置盒子居中,不是内容物居中

注意: 一定要理解: 盒子的宽度,内容物的宽度(width),盒子总的占得宽度(加上外边距)

• margin的边框合并
• 外边距合并指的是，当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。
• 注意是垂直方向,所以只能是块级元素
• 嵌套的盒子外边距塌陷
• 解决方法:1 给父盒子设置边框 2给父盒子设置overflow:hidden;
• 行内元素不要给上下的margin 和padding,上下margin和padding会被忽略。左右margin和padding会起作用。

文档流(标准流)

• 块级元素纵向排列,行级元素横向排列

浮动(float: left | right)

• 设置浮动的元素,脱离标准流(脱标)

特点:

• 浮动和不浮动是分开的
• 浮动只影响后面的元素
• 浮动可以使行内元素转换为行内块(不推荐使用,推荐使用display: inline-block)
• 让块级元素在一行显示
• 浮动的元素不占原来的位置
• 浮动的元素一行显示

浮动的作用:

• 制作导航栏
• 文本绕图
• 网页布局

清除浮动

• 原因:

• 当父容器没有设置高度，里面的盒子没有设置浮动的情况下会将父容器的高度撑开。一旦父容器中的盒子设置浮动，脱离标准文档流，父容器立马没有高度，下面的盒子会跑到浮动的盒子下面。出现这种情况，我们需要清除浮动

• 办法

• 给父容器设置高度

• 通过设置clear:left | right | both,一般使用both

• 给父容器设置 overflow:hidden

• 通过伪元素

     .clearfix:after{
           content:"";
           height:0; line-height:0;
           visibily:hidden;
           clear:both;
           display:block;
      }
    .clearfix{
       zoom:1    　　　兼容IE浏览器
     }

CSS初始化

• 目的:不同浏览器对某些标签的默认值是不同的,初始化时为了克服不同浏览器的区别

overflow属性:内容溢出元素框

• overflow:visible:默认值。内容不会被修剪，会呈现在元素框之外。
• overflow:hidden: 内容会被修剪，并且其余内容是不可见的。
• overflow:scroll: 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
• overflow:auto: 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

定位

• 分类

• position:static: 静态定位

• position:absolute: 绝对定位

• position:relative: 相对定位

• position:fixed: 固定定位

• 格式

• 定位方向: left | right | top | bottom

• 静态定位: 默认值,就是文档流,块级元素和行元素的排列方式

• 绝对定位:

• 绝对定位以浏览器左上角为基准设置定位

• 当一个盒子包含在另一个盒子中,当父盒子没有设置定位,以浏览器的左上角为起始位置进行定位,当父盒子设置了定位,以父盒子的左上角为起始位置定位

• 绝对定位不占位置(和浮动一样,脱标了)

• 绝对定位可以使行内元素转换为行内块元素

• 相对定位

• 相对定位以自身位置为基准

• 相对定位占据原来的位置

• 一般子元素使用绝对定位,父元素使用相对定位(子绝父相)最常用的定位方式

• 相对定位不能使行内元素转换为行内块

• 固定定位

• 使用固定定位不占原来的位置(脱标)

• 使用固定定位,位置从浏览器出发

• 元素使用固定定位可以转换为行内块

• 子绝父相的意义

• 给直接的父元素相对定位,这样子元素绝对定位时就会以父元素为基准进行定位,不然子元素会以body或者浏览器为基准进行定位

• 相对定位时相对于自身,本身所占的位置不会给变.绝对定位是相对于浏览器或者已经定位的父级元素,会脱标,这样可以覆盖到别的元素上面,调节z-index属性