原创

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Django开发在线教育平台--学习整理(一)

    首先,打开cmd,cd到存放django项目的文件夹,创建一个新工程(也可以用虚拟环境virtualenv):

    SimonDM
  • HTML学习记录及整理

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

    SimonDM
  • css笔记

    从HTML被发明开始,样式就以各种形式存在。不同的浏览器结合它们各自的样式语言为用户提供页面效果的控制。最初的HTML只包含很少的显示属性。 随着HTML的成...

    用户6362579
  • 前端常见技术点 - CSS / DOM / 布局(43问)

    这里总结一下 WEB 前端面试 CSS 部分的常见问题,同时这些问题也是对一些基础的技术概念和思想的理解。对这些基本知识的掌握程度和深度决定了你的技术层级。高级...

    用户5997198
  • 总结伪类和伪元素(转)

    先说一说为什么css要引入伪元素和伪类,以下是css2.1 Selectors章节中对伪类与伪元素的描述:

    山河木马
  • 揭示不为人知的CSS

    如果你在日常工作中使用CSS,那么你的主要目标很可能集中在使事情看起来是正确的。最终得到的正确结果远比如何实现更重要。这意味着相比正确的语法和视觉效果我们更少关...

    疯狂的技术宅
  • 前端基础-CSS属性选择器

    cwl_java
  • 国内源安装kubernetes的工具

    禹都一只猫olei
  • SQL server数据库安装详细文档

    打开上图的 “Microsoft SQL Server Management Studio”

    敲爆渣女狗头
  • 秋风秋雨正是读书时《CSS实战手册》(CSS: The Missing Manual)中秋佳节登场亮相了

      10年前,当我在记事本中一点一滴地书写着HTML、JavaScript、CSS并保存,然后在浏览器里预览自己的杰作时,感觉这是那么神奇、有趣!

    阿敏总司令

扫码关注云+社区

领取腾讯云代金券