CSS笔记

极客CSS笔记

基础语法:

  selector选择器{
      property属性:value值
  }
  例： h1{
          color:red;
          font-size:18px
      }

　　

高级语法：

  1. 选择器分组：

    h1, h2, h3, h4, h5, h6 { color : red; }

  2. 继承： 在最外层的元素添加样式，若里层元素没有样式，则套用该样式

      body{
          color:green;
      }

CSS选择器：

  1. 派生选择器: 通过依据元素在其位置的上下文关系来定义样式。 例：li strong{}，中间用空格隔开

  2. id选择器：以#号来定义，常用方式是id选择器常常用于建立派生选择器。 例：#pid a{}

  3. 类选择器：以 . 点号来表示，也可以用作派生选择器

  4. 属性选择器：对带有指定属性的HTML元素设置样式，属性和值选择器。 例：[title]{} 或 [title=t]{}

  5. 子元素选择器：element > element。例<div> > <p>，选择父元素为div的所有p元素

  6. 兄弟选择器：element + element。例<div>+ <p>，选择紧接着div元素之后的所有p元素

CSS样式：

CSS背景
属性描述
background－attachment 背景图像是否固定或者随着页面的其余部分滚动
background－color 设置元素的背景颜色
background－image 把图片设置为背景
background－position 设置图片的起始位置
background－repeat 设置背景图片是否及如何重复
background－size 规定背景图片的尺寸
background－origin 规定背景图片的定位区域
background－clip 规定背景的绘制区域

CSS文本

属性描述
color 文本颜色
direction 文本方向
line-height 行高
letter-spacing 字符间距（space的ing形式，间距）
text-align 对齐元素中的文本（align：对齐）
text-decoration 向文本添加修饰（decoration：装饰）
text-indent 缩进元素中文本的首行（indent：缩进，订单）
text-transform 元素中的字母转换（transform：变换，转换）
text-shadow 向文本添加影音
unicode-bidi 设置文本的方向（bidi:双向.网络译）
white-space 元素中空白的处理方式
word-spacing 字间距
CSS字体

CSS字体属性定义文本的字体系列、大小、加粗、风格和变形。

属性描述
font-family 设置字体系列
font-size 设置字体的尺寸
font-style 设置字体风格
font-variant 以小型大写字体或正常字体显示文本（variant：变体，不同的）
font-weight 设置字体的粗细
CSS链接

  1. CSS链接的四种状态：

    a:link 普通的、未被访问的链接

  • a:visited 用户已访问的链接

  • a:hover 鼠标指针位于链接的上方

  • a:active 链接被点击的时刻

  1. 常见的l链接样式

    text-decoration（修饰）属性大多用于去掉链接中的下划线

  2. 设置背景颜色-------background-color

CSS列表

CSS列表属性允许你放置、改变列表标志，或者将图像作为列表项标志。

属性描述
list-style 简写列表项
list-style-image 列表项图像
list-style-position 列表标志位置
list-style-type 列表类型（圆点，数字，字母等）
CSS表格

TD，英文全称是"table data cell"，中文含义："表中的数据单元".

TR ，英文全称是"table row"的缩写，中文含义"表行".

TH，英文全称是"table header cell"的缩写，中文含义"表头单元格".

CSS表格属性可以帮助我们极大的改善表格的外观。

表格边框、折叠边框、表格宽高、表格文本对齐、表格内边距、表格颜色。

CSS轮廓

轮廓主要是用来突出元素的作用

属性描述
outline 设置轮廓属性
outline-color 设置轮廓的颜色
outline-style 设置轮廓的样式
outline-width 设置轮廓的宽度
CSS定位

改变元素在页面上的位置

定位机制：普通流、浮动、绝对布局

属性描述
position 把元素放在一个静态的、相对的、绝对的或固定的位置中
top 元素向上的偏移量
left 元素向左的偏移量
right 元素向右的偏移量
bottom 元素向下的偏移量
overflow 设置元素溢出其区域发生的事情
clip 设置元素显示的形状
vertical-align 设置元素垂直对齐的方式
z-index 设置元素的堆叠顺序
CSS浮动

float属性可选值：left、right、none、inherit（继承）

clear属性可选值：left、right、both、inherit

CSS盒子模型

CSS盒子模型概述

W3C标准盒子模型的内容范围包括：margin、border、padding、content部分组成

CSS内边距
属性描述
padding 设置所有边距
padding-bottom 设置底边距
padding-left 设置左边距
padding-right 设置右边距
padding-top 设置上边距
CSS边框

我们可以创建出效果出色的边框，并且可以应用于任何元素

边框的整体样式：border-style：定义了10个不同的非继承样式，包括none

边框的单边样式：border-top-style、border-left-style、border-right-style、border-bottom-style。

边框的宽度：border-width

边框的单边宽度：border-top-width、其余同上

边框的颜色：border-color

边框的单边颜色：border-top-color、其余同上

CSS3边框： border-radius：圆角边框 box-shadow：边框阴影 border-image：边框图片

CSS外边距

围绕在内容边框的区域就是外边距，外边距默认为透明区域

外边距接受任何长度单位、百分比值

属性描述
margin 设置所有边距
margin-top 设置上边距
margin-left 设置左边距
margin-right 设置右边距
margin-bottom 设置底边距
CSS外边距合并

外边距合并就是一个叠加的概念，当两外边距不相等时，距离值为大的外边距

CSS常用操作

  • 对齐操作

    1. 使用margin属性进行水平对齐

    2. 使用position属性进行左右对齐

    3. 使用float属性进行左右对齐

  • 尺寸操作

属性描述
height 设置元素行高
line-height 设置行高
max-height 设置元素最大高度
max-width 设置元素最大宽度
min-width 设置元素最小宽度
min-height 设置元素最小高度
width 设置元素宽度

  • 分类操作

    属性描述
    clear 设置一个元素的侧面是否允许其他的浮动元素
    cursor 规定当指向某元素之上时显示的指针类型
    display 设置是否及如何显示元素
    float 定义元素在那个方向浮动
    position 把元素放置到一个静态的、相对的、绝对的、固定的位置
    visibility 设置元素是否可见或不可见

CSS选择器详解

  • 元素选择器

  • 选择器分组-------------例：h1,h2{}或通配符：*{}

  • 类选择器详解----------例：.class{}---结合元素选择器：a.class{}----多类选择器：.class.class{}

  • ID选择器详解----------例：#id{}。ID在文档只能用一次，而类可以用多次，ID不能结合使用，JS需用ID

  • 属性选择器详解-------例：[title]{}---具体属性值选择：[title="#"]{}

  • 后代选择器-------------例：p strong i{}可以直接找到后代p i{}-----p标签内嵌套strong标签----在嵌套i标签

  • 子元素选择器----------例：p>strong>i{}----------一次只能向后选择一代，即子元素

  • 相邻兄弟选择器-------例：li+li{}--------相同父元素，效果对自身不起作用

CSS动画

2D、3D转换

通过CSS3转换transform属性，我们能够对元素进行移动、缩放、转动、拉长或拉伸

转换是使元素改变形状、尺寸和位置的一种效果

2D转换方法：translate()平移、rotate()旋转、scale()比例、skew()倾斜、matrix()矩阵

------使用为：transform：rotate(20deg)

3D转换方法：rotateX()、rotateY()------rotate:旋转

过渡

通过使用CSS3，可以给元素添加一些效果

CSS3过渡是元素从一种元素转换成另一种样式

属性描述
transition 设置四个过渡属性 （transition：过渡，转换）
transition-property 过渡的名称
transition-duration 过渡效果花费的时间 duration：持续时间，持续
transition-timing-function 过渡效果的时间曲线
transition-delay 过渡效果的开始时间 delay：延迟，时滞
动画

通过CSS3，也可以进行创建动画了

CSS3的动画需要遵循@keyframs规则。规定动画的时长，规定动画的名称。

多列

在CSS3中，可以创建多列来对文本或者区域进行布局

属性：column-count、column-gap、column-rule

 

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/turbosha/p/10157250.html