首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >CSS学习记录及整理

CSS学习记录及整理

原创
作者头像
SimonDM
修改2018-05-05 11:57:13
6.8K10
修改2018-05-05 11:57:13
举报

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--是否延迟

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • CSS简介
  • CSS三大特性
  • CSS基础语法
  • CSS选择器
    • 基础选择器
      • 属性选择器
        • 按序号选择
          • 伪选择器
          • CSS属性(常用)
          领券
          问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档