CSS学习笔记

CSS（Cascading Style Sheets）：层叠样式表

CSS的学习包含两大类：选择器与声明

CSS的三种使用方式：

内联样式：在元素的style属性中定义样式，此样式自能被该元素使用。
内部样式：在head元素内部使用style标签定义样式，此方式只能被当前网页所复用。
外部样式：在单独的后缀名为css的文件中定义样式，此样式可以被任何引用该文件的网页所引用。
引用外部样式的方法：在head元素中使用 <link rel="stylesheet" href="css的文件路径">

CSS的三大特征

继承性：父元素的样式可以被子元素所继承（只能继承颜色和字体）
层叠性：对同一个元素设置不同不用的声明，其效果会叠加
优先级：对同一个元素设置相同的声明，效果会覆盖，并以后者为准（就近原则）

选择器：

元素选择器
1. 作用范围：选中当前网页上所有同名的元素（权重为1）
2. 语法形式：
  元素名 {
  属性1: 值1;
  属性2: 值2;
  …
  }
类选择器
1. 作用范围：选中当前网页上所有className 为指定值的所有元素语法形式：
  .className {
  属性1: 值1;
  属性2: 值2;
  …
  }
ID选择器
1. 作用范围：选中当前网页上所有ID为指定值的所有元素
2. 语法形式：
  #元素ID {
  属性1: 值1;
  属性2: 值2;
  …
  }
组合选择器：
1. 作用范围：选择选中的的每个选择器对应的元素的并集
2. 语法形式：
  选择器1,选择器2 {
  属性1: 值1;
  属性2: 值2;
  …
  }
派生选择器（分为子元素选择器与后代选择器）
1. 子元素选择器（不包含孙子元素）：
  1. 作用范围：选中父元素的的子元素
  2. 语法形式：
    父元素选择器>子元素选择器 {
    属性1: 值1;
    属性2: 值2;
    …
    }
2. 后代选择器（包含孙子）
  1. 作用范围：选择父元素的儿子与孙子元素
  2. 语法形式：
    父元素选择器子元素选择器 {
    属性1: 值1;
    属性2: 值2;
    …
    }

属性选择器
1. 作用范围：选中当前网页上含有某个属性的所有元素。
2. 语法形式：
  [属性名] {
  属性1: 值1;
  属性2: 值2;
  …
  }
  
  [属性名="属性值"] {
  属性1: 值1;
  属性2: 值2;
  …
  }

伪类选择器
1. link：
  1. 作用范围：选中未被访问过的超链接
  2. 语法形式：
    a:link {
    属性1: 值1;
    属性2: 值2;
    …
    }
2. visited：
  1. 作用范围：选中未被访问过的超链接
  2. 语法形式：
    a:visited {
    属性1: 值1;
    属性2: 值2;
    …
    }
3. active：
  1. 作用范围：选择激活态的（正在点击的按钮）元素
  2. 语法形式：
    选择器:active {
    属性1: 值1;
    属性2: 值2;
    …
    }
1. hover
  1. 作用范围：选择悬停态的元素
  2. 语法形式：
    选择器:hover {
    属性1: 值1;
    属性2: 值2;
    …
    }

focus
1. 作用范围：选择有焦点的元素（光标选中的文本框/密码框/文本域）
2. 语法形式：
  选择器:focus {
  属性1: 值1;
  属性2: 值2;
  …
  }

声明：

border
- 作用：用来声明元素的边框
- border的常用属性：

width：用来声明边框的宽度（就是边框有多粗）
style：用来声明边框的样式，有两个类型，dashed（虚线），solid（实线）
color：用来声明边框的颜色

设置边框：
1. 四边设置相同的边框：border: width style color; 例如：border: 5px solid #F00;
2. 设置单条边的边框：border-left、border-right、border-top、border-bottom
边框内的内容溢出时的处理方式：
1. overflow: auto;

box模型(Box Model)：定义了元素处理元素内容、内边距、外边距的方式。
- box模型的主要属性：
  - padding：内边距（元素的内容到元素border的距离）
  - margin：外边距（border到其他元素的距离）
- 设置元素边距的五种方法：
  - 四个边设置相同的边距(顺序为上右下左)：
    选择器 {
    padding: 40px;
    margin: 40px;
    }
  - 四个边设置不同的边距：
    选择器 {
    padding: 10px 20px 30px 40px;
    margin: 40px 30px 20px 10px;
    }
  - 单个边设置边距：
    选择器 {
    padding-left/right/top/bottom: 40px;
    margin-left/right/top/bottom: 40px;
    }
  - 对边设置相同的边距(顺序为：上下左右)：
    选择器 {
    padding: 30px 40px;
    margin: 30px 40px;
    }
  - 对边设置边距的特列（上下设置边距，左右设置为auto，元素会水平居中）：
    选择器 {

margin: 30px auto;

}

文本格式化

控制字体：
1. 指定字体：font-family："微软雅黑","文泉驿正黑","黑体";
2. 字体大小：font-size: 30px;
3. 字体加粗：font-weight: normal(默认)/bold(加粗)
控制格式：
1. 文本颜色：color: red;
2. 文本排序：text-align: left/right/center;
3. 文本修饰：text-decoration: none(默认)/underline
4. 文本行高：text-height: 1.6em(常用高度)，注意：行高等于元素的高时，文字会自动居中
5. 首行缩进：text-indent: 2em(常用高度)

表格样式：

表格属于块元素，完全适应与box模型，可以使用box模型为表格设置边框、内边距、外边距。
常用的表格样式为：border-collapse: collapse;（合并相邻边框）

列表样式：
- 有序列表样式：list-style-type
  - 无标记：none
  - 阿拉伯数字：decimal（默认值）
  - 小写罗马数字：lower-roman
  - 大写罗马数字：upper-roman
- 无序列表样式：list-style-type
  - 无标记：none
  - 实心圆：disc（默认值）
  - 空心圆：circle
  - 实心方块：square
- 自定义样式：list-style-image: url(样式图片的路径);

背景色：background-color: colorValue; 例如：background-color: #F00;

背景图：
- 设置图片：background-image: url(图片路径);
- 平铺方式：background-repeat: repeat-x/repeat-y/no-repeat;
- 图片位置：background-position: left/right/top/bottom/center;
  以坐标的形式设置背景图的位置：background-position: x y ;
- 固定背景：background-attachment: fixed;

定位：

定位的作用：可以使元素排放在任意位置
定位的分类：
1. 流定位（默认）：
  1. 特点：块元素垂直排列，行内元素左右排列。
  2. 什么是流：元素有序排列而形成的队伍成为流。
2. 浮动定位：可以使块元素左右排列
  1. 浏览器的渲染规则：
    1. 如果没设置父元素的高度，那么父元素的高度会自适应，以其内部流（子元素(块)形成的队伍）中的高度为准。
    2. 浏览器认为文字很重要，无论如何都会让文字完整显示。
  2. 浮动的步骤：
    1. 浮动的目标离队
    2. 目标的弟弟跟上
    3. 目标到达指定位置（元素会脱离流，释放位置）
  3. 浮动的分类
    1. 左浮动（float: left;）：使块元素正序左右排列。
    2. 右浮动（float: right）：使块元素倒序左右排列。
  4. 消除浮动的影响：
3. 相对定位：可以使元素以自身为目标产生微小的偏移。
4. 绝对定位：可以使元素以父亲为目标产生很大的偏移。
5. 固定定位：可以使元素以窗口为目标产生很大的偏移。
相对、绝对、固定定位的共同点：
1. 都要设置偏移，并且设置偏移的方式一样
2. 语法形式：left: 20px; (以目标的某条边为基准进行偏移，整数则向目标的中心方向偏移，负数反之)

相对、绝对、固定定位的不同点：

相对定位：
1. 作用：以自身为目标进行偏移
2. 特点：元素不脱离流，位置不释放（只有相对定位不释放位置）
3. 语法：
  选择器 {
      position: relative;
      偏移方向（left/right/top/bottom）：偏移量;
  }
  
  例如：选择器选中的某元素在悬停态时元素向右上方偏移2px（抖动效果）
  选择器:hover {
  position: relative; //声明相对定位
      top: -2px    ;     //以自身为目标向父元素的顶部边框移动2px
      right: -2px;     //以自身为目标向父元素的右边框移动2px
  }

绝对定位：
1. 作用：以带有position的父辈（可能是爷爷辈之类的的）为目标产生产生较大的位置偏移，如果父辈元素都有position时采用就近原则，如果都没有就以body为目标。
2. 特点：绝对定位的元素会脱离流，并释放其占有的位置。
3. 语法形式：
  选择器 {
  position: absolute;
  偏移方向（left/right/top/bottom）：偏移量;
  }

例如：在一个div 里面有一个图片与段落，需求是将图片定位到图片的某一个位置

div {

//只设置position但不设置偏移量，目的为了让其成为子元素进行绝对定位的目标

position: relative;

}

//其中对文字的css代码省略

p {

position: absolute;

buttom: 30px;

}

原始图↓ 效果图↓

固定定位：
1. 作用：以窗口为目标，将选中的元素固定在窗口的某个位置，典型例子是"回到顶部。
2. 特点：元素会脱离流，并释放其占有的位置。
3. 语法形式:
  选择器 {
  position: fixed;
  偏移方向（left/right/top/bottom）：偏移量;
  }

如何选择定位：
1. 固定定位：是否要将元素挂在窗口上不动？
2. 浮动定位：是否要将元素左右排列？
3. 相对定位：元素是否要在原有位置上产生很小的偏移？
4. 绝对定位：不是前3个就是绝对定位。

堆叠顺序：z-index: value; //value的值越大图片越靠上

元素的显示方式

显示方式的分类：
1. 块元素：有宽高，上下排列。 // h/p/ol/ul/li/div/table/form
2. 行内元素：无宽高，左右排列 //span/a/lable
3. 行内块：有宽高，左右排列 //img/input/select/textarea
修改显示方式：
1. 通过修改display属性来修改显示方式
2. 修改为块：display: block;
3. 修改为行内：display: inline;
4. 修改为行内块：display: inline-block;
5. 修改为隐藏：display: none;

鼠标形状

作用：用来定义鼠标移动到指定元素上时显示特定的形状
语法形式：cursor: pointer(手型)/text(文本光标)/help(帮助)

圆角文本框：border-radius: 5px; 例如：
<iframe></iframe>：可以将多个不同的网页文件合并到同一个网页当中，src指向合并进来的网页的路径，在iframe属性中可以有name属性，它通常对应 <a> 标签中的target属性。当点击超链接进行跳转的时候，会将name属性的iframe属性更新为

posted @ 2018-12-01 23:40 大橘猫阅读(96) 评论(0) 收藏举报

刷新页面返回顶部

大橘猫

CSS学习笔记

公告