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 条评论
登录 后参与评论

相关文章

来自专栏Android小菜鸡

HTML JS DOM

  当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。HTML DOM 模型被构造为对象的树。

21220
来自专栏Android干货

CSS基本知识(慕课网)

40360
来自专栏向治洪

react-native 之布局总结

前言 之前我们讲了很多react-native的基础控件,为了方便大家的理解,我们来对react-native的布局做一个总结,观看本节知识,你将看到。 宽度单...

76680
来自专栏一个爱吃西瓜的程序员

Web前端基础【2】--CSS基础

CSS指层叠样式表,用来定义如何显示HTML元素,一般和HTML配合使用。CSS样式表的目的是为了解决内容与表现分离的问题:即使同一个HTML文档也能表现出外观...

36160
来自专栏Android先生

Flutter组件学习(一)—— Text组件

之前说会给大家一一讲解 Flutter 中的组件,今天咱们就从 Text 组件开始,无图言X,先上图:

21720
来自专栏逸鹏说道

逆天通用水印支持Winform,WPF,Web,WP,Win10。支持位置选择(9个位置 ==》[X])

好几天没上QQ了,今天上了个QQ,,额....额...貌似消息还挺多,没及时回复的还请见谅~~刚好昨天无聊把水印这快封装出来了,支持图片水印,文字水印,索引图...

36660
来自专栏angularejs学习篇

marquee 标签的使用详情

64930
来自专栏Java后端技术

CSS总结

  1.继承:子元素继承父元素的某些样式(因为有些元素有默认值,所以它们就不用继承父元素的)。

9410
来自专栏我的博客

安卓开发之简单组件使用

一、TextView组件(文本框) <TextView android:id=”@+id/firstText” android:text=”第一行“ andro...

29160
来自专栏Android先生

Android开发人员初识前端

<em> 表示强调,<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示,<strong> 用粗体表示。两个标签相比,目前国内前端程序员更...

13730

扫码关注云+社区

领取腾讯云代金券