其他分享
首页 > 其他分享> > CSS速学！！

CSS速学！！

作者：互联网

一.CSS引入样式

  1. 行内样式:<标签 style="属性：属性值"></标签>

  2. 内嵌式：所有的样式写在标签内，放在head标签内

  3. 外链式:把所有的css样式均放在一个css单独的文件里（后缀名xx.css）,在html里通过来引入外部的css

  4. 导入式：@import url("css路径")，注：css2.1特有，不常用。

    注：优先级：就近原则，行内最优先，其次看内嵌和外链哪种离元素更近。

二.选择器

  1. 基本选择器：

    1. 标签选择器：标签{}

    2. 类选择器 class：.类名{}，可以复用

    3. id选择器：#id名{}，id唯一不可以复用

      注：优先级：id选择器>类选择器>标签选择器

  2. 层次选择器：

    1. 后代选择器：a b{}，a标签包含的所有b标签都使用该选择器
    2. 子选择器：a>b{}，a下面的第一层b标签使用该选择器
    3. 相邻兄弟选择器：a标签选择器+b{}，a标签下方相邻的b标签使用该选择器
    4. 通用选择器：a选择器标签~b{}，a标签下方使用b标签使用该选择器

  3. 结构伪类选择器：

    1. a b：first-child{}：a标签的第一个b元素
    2. a b：last-child{}：a标签的最后一个b元素
    3. a:nth-child（n）{}：a标签的父元素的第n个子元素，并且为b标签才能生效
    4. a:nth-of-type（n）{}：a标签的父元素的第n个b子元素

  4. 属性选择器：

    1. 格式：a[属性名/属性名="属性值"]{}

      注：

      1. = 绝对对于
      2. *= 包含
      3. ^= 以……开头
      4. $= 以……什么结尾

三.字体样式

  1. font-family 字体系列
  2. font-size 字体大小 px
  3. font-style 字体风格
    1. normal 默认 不倾斜
    2. italic 斜体
    3. oblique 倾斜
  4. font-weight 字体粗细
    1. bold 粗体
    2. bolder 更粗体
    3. lighter 细体
    4. 数值 100-900 数值越大，字体越粗
  5. line-height 行高

注：另一种写法：font-style值 font-weight值 font-size值/line-height值 font-family值

四.文本样式

  1. 颜色 color

    1. 单词
    2. RGB 0~F
    3. RGBA 可以设置透明度 0~1

  2. text-align 文本对齐方式

    1. left 默认 左对齐
    2. center 居中对齐
    3. right 右对齐
    4. justify 两端对齐

  3. text-indent 文本缩进

    1. 值：数值+单位（px或em） 为正数时，缩进；为负数时，悬挂

  4. text-decoration 文本修饰

    1. 1）none 无修饰

      2）underline 下划线

      3）line-through 中划线

      4）overline 上划线

  5. line-height 行高

  6. 文本图片水平对齐：vertical-align=middle

五.超链接伪类

  1. a：hover{}：鼠标悬浮状态
  2. a：active{}：鼠标摁住未释放的状态
  3. a：visited{}：按过之后的状态

六.背景图片应用

  1. background：颜色

  2. background-image：url（""）插入图片

  3. background-repeat：

    1. repeat 全局平铺 默认
    2. repeat-x x轴平铺
    3. repeat-y y轴平铺
    4. no-repeat 不平铺

  4. background-position：定位

    简写：background：颜色 url（""） 定位 平铺

七.盒子模型

  1. margin：外边距

    1. margin-top 上外边距
    2. margin-bottom 下外边距
    3. margin-left 左外边距
    4. margin-right 右外边距

    缩写：同padding

    margin:0 auto; 块级元素居中显示

  2. padding：内边距

    1. padding-top 上内边距
    2. padding-bottom 下内边距
    3. padding-left 左内边距
    4. padding-right 右内边距

    缩写：缩写：

    padding:值; 上下左右的内边距一样

    padding:值1 值2; 值1代表上下内边距，值2代表左右内边距

    padding:值1 值2 值3; 值1代表上内边距，值2代表左右内边距，值3代表下内边距

    padding:值1 值2 值3 值4; 值1代表上内边距，值2代表右内边距，值3代表下内边距，值4代表左内边距，按照顺时针方向。

  3. border：边框

    1. border-width 边框的宽度

    2. border-color 边框的颜色

    3. border-style 边框的样式

      1. solid 实线
      2. double 双实线
      3. dotted 点状线
      4. dashed 虚线

      缩写：border : border-width值 border-style值 border-color值;

      • border-top 上边框
      • border-bottom 下边框
      • border-left 左边框
      • border-right 右边框

    4. 圆角边框 border-radius

八.浮动

  1. display：

    1. block 块级元素
    2. inline 行内元素
    3. inline-block 同时属于行内和块级元素
    4. none

  2. clear：

    1. left 清除左浮动
    2. right 清除右浮动
    3. both 清除左右浮动
    4. none 不清除浮动

  3. float：

    1. none 默认 不浮动
    2. left 左浮
    3. right 右浮动

    解决父级元素边框塌陷的几种方式：

    1. 给有浮动的子元素的父元素加height（不推荐）
    2. 增加一个空的div标签在原本的div后面，然后clea：both，margin：0，padding：0
    3. 给有浮动的子元素的父元素加overflow:hidden
    4. 在父类添加一个伪类：样式添加为：display:block;content:””;clear:both;（推荐）

九.定位

  1. position：
    1. 相对定位：relative
      1. top
      2. left
      3. bottem
      4. right
    2. 绝对定位：absolute
      1. 有绝对定位元素的包含框无定位，该元素相对于浏览器定位
      2. 有绝对定位元素的包含框有定位，该元素相对于离自己最近的有定位的包含框定位
    3. 固定定位：fixed：始终相对于浏览器定位
  2. z-index：类似于ps的图层，数值从0开始，越大越在上层

标签：标签,元素,padding,内边,速学,border,选择器,CSS
来源： https://www.cnblogs.com/xiaoye-Blog/p/16502780.html