CSS学习记录及整理

CSS简介

<!DOCTYPE ”此文仅为个人学习的知识梳理，权威且更详细的内容请查阅w3school。“>

CSS全称Cascading Style Sheets，层叠样式表，用于定义HTML元素的显示样式，实现内容与表现分离。

CSS样式表的插入方法有四种：

1. 内联样式表，即写在标签内部，慎用；
2. 内部样式表，使用<style>标签在HTML的head内定义样式表，用于文档内的特殊样式；
3. 外部样式表，使用<link rel="" style="" href=""/>标签链接外部的CSS文件，应用最广泛；
4. 导入样式表，在<style>标签中使用@import导入外部样式表，用的不多。

CSS三大特性

• 继承性--给父元素设置的属性，后代元素都可以继承，但仅限于以（color/font-/text-/line）开头的属性。其中，a标签的文字颜色和下划线不能继承；h标签的文字大小不能继承。
• 层叠性--指CSS处理冲突的能力，当不同选择器选中同一标签并且设置了相同的属性时，就会出现冲突，这时CSS就会将多重样式层叠为一个。（利用优先级来过滤）
• 优先级--
  • 内联样式表>内部样式表>外部样式表>浏览器默认设置
  • 同级中的由高到低（含有!important的属性优先级会被提升）：
    • 直接选中>间接选中
    • 不同选择器：id>类>标签>通配符>继承>浏览器默认
    • 相同选择器，写在后面的优先级高

CSS基础语法

CSS语法组成：选择器+声明语句selector {declaration1; declaration2; ... declarationN }。

每一条语句组成：属性+值selector {property: value}

如图：

CSS选择器

CSS中的选择器用于选择需要添加样式的元素。

基础选择器

• .class--选中html中类名为class的所有元素
• #id--选择id为某值的所有元素
• *--通配符，选择所有元素
• element--选择某元素，比如p/div/span等
• div1,div2--逗号，并列关系，选中所有列出的元素
• div1 div2--空格，下属关系，选中div1内所有的div2元素
• div1>div2--大于号，父子关系，选中所有父元素为div1的div2元素
• div1+div2--加号，兄弟关系，选中所有紧跟在div1后面的所有div2元素

属性选择器

• [attribute]--选择带有某属性的所有元素
• [attribute^=value]--例子：a[src^="https"] 选择src属性以https开头的所有a元素
• [attribute$=value]--以value结尾
• [attribute*=value]--包含value

后三个是CSS3的新写法，使用正则表达式来匹配，匹配更精确。

按序号选择

• :first-of-type--例子：p:first-of-type 选择某个父元素下所有同类型的第一个 <p> 元素。
• :last-of-type--同上，最后一个
• :only-of-type--选中某个父元素下只要唯一一个p元素
• :only-child--例子：p:only-child 选择属于某个父元素的唯一子元素的每个 <p> 元素。
• :nth-child(n)--例子：p:nth-child(2) 选择属于其父元素的第二个子元素的每个 <p> 元素。
• :nth-last-child(n)--同上，从最后一个子元素开始计数。
• :nth-of-type(n)--p:nth-of-type(2) 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。
• :nth-last-of-type(n)---同上，但是从最后一个子元素开始计数。

伪选择器

• :link--例子：a:link 选择所有未被访问的链接
• :viseted--已经访问过的链接
• :hover--当鼠标指针移动到某链接上时
• :active--鼠标长按时的链接

伪选择器可以用来设置页面中所有a标签（链接）的颜色，包括未访问/已访问/鼠标悬停/鼠标长按时的显示效果。

另外，:hover还可以用于选中所有的其它标签，比如div：hover，当鼠标悬停到div区域上时，会产生一个效果，可以用来设置动画。

CSS属性（常用）

• 动画
  • @keyframes--规定一个动画，后接动画名
    • @keyframes mymove { from {top:0px;} to {top:200px;} }
  • animation--规定所有的动画属性
  • animation-name--动画名称
  • animation-duration--动画完成一个周期所用时间
  • animation-timing-function--动画的速度曲线
  • animation-delay--动画是否延迟
  • animation-iteration-count--动画被播放次数
  • animation-direction--动画是否在下一个周期逆向播放
  • animation-play-state--动画是否正在运行或暂停
  • animation-fill-mode--动画时间之外的状态，比如值为forwards代表动画结束时保持最后一个属性值
• 背景
  • background--所有的背景属性
  • background-attachment--背景图像是否固定或滚动
  • background-color--背景颜色
  • background-image--背景图片
  • background-positon--背景图片开始位置
  • background-repeat--是否重复
  • background-size--背景图片尺寸
• 边框和轮廓
  • border--边框属性，上右下左，可声明所有边框
    • border-top--上边框，可以声明所有属性
      • border-top-color--上边框颜色
      • border-top-style--上边框样式
      • border-top-width--上边框宽度
    • border-right--有边框，同上
    • border-bottom--下边框
    • border-left--左边框
• 外边距
  • margin--设置所有外边距属性，一般用于兄弟关系。注意：块级元素的垂直相邻外边距会合并，水平则不会。
  • margin-bottom
  • margin-left
  • margin-right
  • margin-top
• 内边距
  • padding--声明所有内边距属性，内边距一般用于父子关系
  • padding-bottom
  • padding-left
  • padding-right
  • padding-top
• 定位
  • display--显示方式，值为:none/block/inline/inline-block等，用于将显示属性转换
  • float--浮动
    • left左浮动
    • right右浮动
    • none默认，不浮动
    • inherit继承父元素的属性
  • overflow--内容溢出时是否修剪
    • visible默认值，不会修剪，溢出部分会显示在框外
    • hidden隐藏，溢出部分会修剪掉
    • scroll内容会被修剪，始终显示滚动条
    • auto如果内容被修剪，则显示滚动条
    • inherit从父元素继承
  • position--元素的定位类型，制作一些放在某个框内的hot/new小图标时可用”子绝父相“，来达到无论缩放浏览器窗口都不会移位的效果。
    • absolute绝对定位，通过top/right/bottom/left定位
    • relative相对定位
    • fixed相对于浏览器窗口的绝对定位，可以用来制作网站的导航条，或者烦人的广告
    • static默认值
  • z-index--元素的堆叠次序，值越大显示层级越高
• 字体
  • font--设置字体所有属性
  • font-family--字体，如”楷体“、”Times New Roman“等
  • font-size--字体大小
  • font-stretch--收缩或拉伸
  • font-style--字体样式，如normal、italic等。
  • font-weight--字体粗细
• 列表Marquee
  • marquee-direction跑马灯效果，移动方向
• 多列
  • column-count--类似于word里的分栏
• 表格
• 文本
  • color--文本颜色
  • direction--文本书写方向
  • letter-spacing--字符间距
  • line-height--行高，要想使一行文字在box中垂直居中，可以设置行高等于元素框高
  • text-align--水平对其方式
  • text-decoration--文本装饰效果
  • text-indent--文本块的首行缩进
• 2D/3D 转换
  • transform--2D/3D转换
  • transform-origin--转换的位置
  • transform-style--
  • perspective--3D透视效果
  • perspective-origin--3D元素的底部位置
• 过渡
  • transition--设置四个过渡属性
  • transiton-property--名称
  • transiton-duration--过渡效果花费时间
  • transition-timing-function--过渡效果时间曲线
  • transition-delay--是否延迟