CSS学习总结

CSS基础

简介

什么是CSS？

  • CSS(Cascading Style Sheets)层叠样式表。
  • CSS是一种用于Web的标准布局语言。
  • 样式定义如何显示HTML元素，样式通常存储在样式表中。
  • CSS语法分为两个部分：选择器，一条或多条声明。
    1. 选择器：通常是需要改变样式的HTML元素
    2. 声明：由一个属性：一个值成对组成
    3. 格式： 
          selector{
    property1:value1;  //每一行只写一个属性，是为了增强CSS可读性
    property2:value2;
    ...
    }

CSS如何创建？

插入样式表的方法有三种：外部样式表，内部样式表，内联样式。

外部样式表(理想):可通过改变一个文件来改变整个站点的外观，每个页面使用link标签来链接样式表。

格式： 
    <head>
       <link href="My.css" rel="stylesheet" type="text/css">//浏览器会从文件My.css读到样式声明。样式表以.css扩展名保存，不包括任何HTML标签。
    </head>

内部样式表:单个文档需要特殊的样式时使用。每个页面使用style标签来编写样式表。

格式： 
    <head>
       <style  type="text/css">
       ...//此处编写样式
       </style>
    </head>

内联样式(慎用):在相关的标签内使用style标签。

选择器

基本选择器：

1.通用选择器

*定义页面所有元素的样式。

格式：*{样式；}

2.标签选择器

也称元素选择器，是最常见的 CSS 选择器。选择器通常是某个 HTML 元素。

格式：HTML元素{样式；}

3.类选择器

类选择器允许以一种独立于文档元素的方式来指定样式。

格式：.类名{样式；} （类名不能以数字开头，区分大小写）

HTML中引用：class=“类名”

4.ID选择器

ID选择器可以为标有特定ID的HTML元素制定特定的样式。id属性在每个HTML文档中只出现一次。

格式：#ID名{样式；} （ID名不能以数字开头）

HTML中引用：id=“ID名”

5.属性选择器

为拥有指定属性的 HTML 元素设置样式，而不仅限于 class 和 id 属性。

格式：[HTML元素]{样式；}

例：
  1. *[title] {color:red;} //title元素变为红色
  2. a[href] {color:red;} //只对href属性的a元素应用样式
  3. a[href] [title] {color:red;} //同时有href和title属性的超链接的文本应用样式
  4. img[alt] {border:5px solid red:} //对所有alt属性的图像应用样式

组合选择器：

后代选择器

后代选择器又称为包含选择器，可以选择作为某元素后代的元素。匹配所有标签1嵌套的标签2.

格式：CSS中  标签1 标签2 {样式；}
   HTML中 
        <标签1>
        <标签2> 应用样式  </标签2>
        </标签1>

在后代选择器中，规则左边的选择器一端包括两个或多个用空格分隔的选择器。选择器之间的空格是一种结合符（combinator）。每个空格结合符可以解释为“... 在 ... 找到”、“... 作为 ... 的一部分”、“... 作为 ... 的后代”，但是要求必须从右向左读选择器。

子选择器

子元素选择器只能选择作为某元素子元素的元素。匹配标签1里嵌套的子标签2。

格式：选择器1>选择器2 {样式；}

例：
  1. h1>strong {color：red;} //选择只作为h1元素子元素的strong元素
  2. table.company td>p //选择作为td元素子元素的所有p元素，td元素从table元素继承，该table元素有一个包含company的class属性

相邻元素选择器

相邻兄弟选择器可选择紧接在另一元素后的元素，且二者有相同父元素。选择紧接在选择器1元素后的选择器2。

格式：选择器1+选择器2 {样式；}

伪类选择器

用于向某些选择器添加特殊的效果。

格式：selector:pseudo-class {property:value;}

CSS样式

1.背景属性

CSS允许应用纯色作为背景，也可用背景图像创建相当复杂的效果。

  background-color 背景色
  background-image 背景图像
  • url("图像位置")；1.路径中同级别：直接写文件名 2.上级别：../文件名（上几级别就有几个../） 3.下级别：目录名/文件名（常用，需单键文件夹img存放）
  • linear-gradient(颜色);颜色渐变效果
  background-repeat 背景重复
  • no-repeat; 常用，设置图像不重复
  • round; 自动缩放直到适应并填充满整个容器
  • space; 以想通过的间距平铺且填充满整个容器
  background-position 背景定位
  1. 值为关键字或百分数值或长度值（单位为像素px）
  2. 如：background-position: center; 图像居中，x轴y轴都居中
  background-attachment 背景关联，背景图像是否固定或者随页面其余部分滚动

2.文本属性

  text-indent 缩进文本
  1. 使用正值：p{text-indent： 5em；}所有段落的首行缩进5em
  2. 使用负值： 
    p{
    text-indent： -5em；
    padding-left: 5em； 避免首行的文本超出窗口的左边界
}
  3. 使用百分比值： 
    div{500px;}
p{text-indent： 20%;}缩进值是父元素的20%
  4. 继承： 
    css中
div #outer {500px;}
div #inner {text-indent:10%;}
p{200px;}
html中
<div id="outer">
<div id="inner">some text.some text.
<p>this is a paragraph </p> 段落继承了id为inner的div元素缩进值。
</div>
</div>
  text-align 水平对齐
  word-spacing 字间隔，值为正/负，字间隔增加/减小
  letter-spacing 字母间隔，值为正/负，字间隔增加/减小
  text-transform 字符转换
  • capitalize 文本中的每个单词以大写字母开头。
  • uppercase 定义仅有大写字母。
  • lowercase 定义仅有小写字母。
  text-decoration 文本装饰
  • underline 下划线
  • overline 上划线
  • line-through 中间贯穿线
  • blink 文本闪烁
  white-space 处理空格
  • normal 默认处理方式。
  • pre 保留空格，当文字超出边界时不换行
  • nowrap 不保留空格，强制在同一行内显示所有文本，直到文本结束或者碰到br标签
  • pre-wrap 保留空格，当文字碰到边界时换行
  • pre-line 不保留空格，保留文字的换行，当文字碰到边界时换行
  direction 文本方向，仅当unicode-bide:embed;/：bidi-override;时使用
  vertical-align 文本所在行高的垂直对齐方式
  • baseline 默认
  • sub 垂直对齐文本的下标，和<sub>标签一样的效果
  • super 垂直对齐文本的上标，和<sup>标签一样的效果
  • top 对象的顶端与所在容器的顶端对齐
  • text-top 对象的顶端与所在行文字顶端对齐
  • middle 元素对象基于基线垂直对齐
  • bottom 对象的底端与所在行的文字底部对齐
  • text-bottom 对象的底端与所在行文字的底端对齐

3.字体属性

  font-family 指定字体系列
  1. 值可用字体1，字体2；来备用
  2. 字体单词不止一个，用‘’隔开
  font-style 字体风格
  • normal 字体正常显示
  • italic 文本斜体显示
  • oblique 文本倾斜显示
  font-variant 字体变形，设置不同大小的大写字母
  font-weight 字体加粗
  • normal 默认
  • bold 加粗
  • bolder 相当于<strong>和<b>标签
  • lighter 常规
  • 100~900 整百，最细~最粗，400=normal，700=bold
  font-size 字体大小
  • medium 默认,大小是16px=1em
  • <absolute-size>可选参数值：xx-small、 x-small、 small、 medium、 large、 x-large、 xx-large
  • <relative-size>相对于父标签中字体的尺寸进行调节。可选参数值：smaller、 larger
  • <percentage>百分比指定文字大小
  • <length>用长度值指定文字大小，不允许负值

4.链接属性

链接的四种状态
  1. a:link{样式；} 普通未被访问的链接
  2. a:visited{样式；} 已被访问的链接
  3. a:hover{样式；} 鼠标停留链接时
  4. a:active{样式；} 链接被点击
次序位置a,b>c>d
text-decoration 文本修饰，值为none时，大多用于去掉链接中的下划线
background-color 背景颜色

5.列表属性

此属性允许放置、改变列表项标志或将图像作为列表项标志

list-style-type 列表类型
  • none 去除标志
  • decimal-leading-zero; 02
  • square; 方框
  • circle; 空心圆
  • upper-alph; & disc; 实心圆
list-style-image：url(XXX.gif) 列表项图像
list-style-position 列表标志位置
list-style 列表样式

6.表格属性

表格边框 border  
折叠边框 border-collapse 设置是否将表格边框折叠为单一边框
表格宽度 width  
表格高度 height  
表格文本对齐 text-align 水平对齐方式
  vertical-align 垂直对齐方式
表格内边距 padding  
表格颜色 border 边框颜色
  background-color 背景颜色
  color 文本颜色

页面布局

1.边框

  border-style：边框样式

  • solid 默认，实线
  • double 双线
  • dotted 点状线条
  • dashed 虚线

  border-color：边框颜色

  border-width：边框宽度

  border-radius：圆角

  • 1个参数：四个角都应用
  • 2个参数：第一个参数应用于 左上、右下；第二个参数应用于 左下、右上
  • 3个参数：第一个参数应用于 左上；第二个参数应用于 左下、右上；第三个参数应用于右下
  • 4个参数：左上、右上、右下、左下（顺时针）

  border: 简写

  • border: 2px yellow solid; 

  box-shadow：边框阴影

  • 第一个参数是左右位置
  • 第二个参数是上下位置
  • 第三个参数是虚化效果
  • 第四个参数是颜色
  • box-shadow: 10px 10px 5px #888;

2.盒子模型


    padding:用于控制内容与边框之间的距离;

    margin: 用于控制元素与元素之间的距离; 

padding、margin 表示上右下左都应用
padding-top、margin-top 上
padding-right、margin-right 右
padding-bottom、margin-bottom 下
padding-left、margin-left 左

   一个参数，应用于四边。

   两个参数，第一个用于上、下，第二个用于左、右。

   三个参数，第一个用于上，第二个用于左、右，第三个用于下。

3.display

  • none 不显示。
  • block 显示为块级元素。
  • inline 显示为内联元素。
  • inline-block 行内块元素（会保持块元素的高宽）。
  • list-item 显示为列表元素。

4.visibility

  • visible 元素可见
  • hidden 元素不可见
  • collapse 当在表格元素中使用时，此值可删除一行或一列，不会影响表格的布局。

5.float 浮动

让一行显示两个块级标签，会脱离文档流

  • none
  • left 左浮动
  • right 右浮动

clear 清除浮动：

  • none  :  默认值。允许两边都可以有浮动对象
  • left   :  不允许左边有浮动对象
  • right  :  不允许右边有浮动对象
  • both  :  不允许两边有浮动对象

6.clip 剪裁图像

rect 剪裁定位元素：

  • auto 默认值，无剪切
  • 上-右-下-左（顺时针）的顺序提供四个偏移值
  • 区域外的部分是透明的
  • 必须指定 position:absolute;
  • 例：clip:rect(0px,60px,200px,0px);

7.overflow 设置当对象的内容超过其指定高度及宽度时如何显示内容

  • visible 默认值，内容不会被修剪，会呈现在元素框之外。
  • hidden 内容会被修剪，并且其余内容是不可见的。
  • scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
  • auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

8.position 规定元素的定位类型

static 默认值，没有定位
fixed 固定定位元素。元素相对浏览器固定，即窗口滚动它也不会滚动，定位的元素和其他元素重叠
relative 相对定位元素。相对于其正常位置偏移，常用来做绝对定位元素的容器块
absolute 绝对定位元素。脱离正常文档流，可覆盖页面上其他元素

通过以下四种属性进行定位：

  • left
  • top
  • right
  • bottom
  • z-index

9.z-index 元素层叠顺序

  • z-index 仅在定位元素上有效（例：position:absolute;）
  • 可以指定负数属性值（例：-1;）优先级低。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .z-index1 {
             100px;
            height: 100px;
            background-color: greenyellow;
            position: absolute;
            top: 20px;
            left: 30px;
            z-index: -1;
        }
        .z-index2 {
             100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="z-index1"></div>
    <div class="z-index2"></div>
    <p>默认的z-index是0.z-index -1拥有更低的优先级</p>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .z-index1 {
             100px;
            height: 100px;
            background-color: greenyellow;
            position: absolute;
            top: 20px;
            left: 30px;
            z-index: 1;
        }
        .z-index2 {
             100px;
            height: 100px;
            background-color: aquamarine;
            position: absolute;
            top: 50px;
            left: 50px;
            z-index: -1;
        }
    </style>
</head>
<body>
    <div class="z-index1"></div>
    <div class="z-index2"></div>
    <p>默认的z-index是0.z-index 1拥有更高的优先级</p>
</body>
</html>

10.outline 边框轮廓

  • outline-width 轮廓宽度
  • outline-color 轮廓颜色
  • outline-style 轮廓样式

11.zoom 缩放比例 

  • normal 使用对象的实际尺寸
  • <number> 用浮点数定义缩放比例，不可为负值
  • <percentage> 用百分比定义缩放比例，不可为负值

12.cursor 鼠标的类型形状

url

需使用的自定义光标的 URL。

注释：请在此列表的末端始终定义一种普通的光标，以防没有由 URL 定义的可用光标。
default 默认光标（通常是一个箭头）
auto 默认。浏览器设置的光标。
crosshair 光标呈现为十字线。
pointer 光标呈现为指示链接的指针（一只手）
move 此光标指示某对象可被移动。
e-resize 此光标指示矩形框的边缘可被向右（东）移动。
ne-resize 此光标指示矩形框的边缘可被向上及向右移动（北/东）。
nw-resize 此光标指示矩形框的边缘可被向上及向左移动（北/西）。
n-resize 此光标指示矩形框的边缘可被向上（北）移动。
se-resize 此光标指示矩形框的边缘可被向下及向右移动（南/东）。
sw-resize 此光标指示矩形框的边缘可被向下及向左移动（南/西）。
s-resize 此光标指示矩形框的边缘可被向下移动（南）。
w-resize 此光标指示矩形框的边缘可被向左移动（西）。
text 此光标指示文本。
wait 此光标指示程序正忙（通常是一只表或沙漏）。
help 此光标指示可用的帮助（通常是一个问号或一个气球）。

13.transform、transition 动画效果

transform 转换，变形

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转rotate、缩放scale、移动translate或倾斜skew。

  • origin 定义旋转基点（left top center right bottom 坐标值）    transform-origin: 50px 50px; transform-origin: left;。
  • rotate 旋转            transform:rotate(50deg) 旋转角度可以为负数，需要先定义origin。
  • scale  缩放             transform:scale(2,3) 横向放大2倍，纵向放大3倍；transform:scale(2) 横竖都放大2倍。 
  • translate 移动        transform:translate(50px, 50px) 分别为相对x轴移动,相对y轴移动。
  • skew  倾斜             transform:skew(50deg,50deg)  分别为相对x轴倾斜,相对y轴倾斜。
 2D3DX轴Y轴Z轴
rotate rotate(angle) rotate3d(x,y,z,angle) rotateX(angle) rotateY(angle) rotateZ(angle)
scale scale(x,y) scale3d(x,y,z) scaleX(x) scaleY(y) scaleZ(z)
translate translate(x,y) translate3d(x,y,z) translateX(x) translateY(y) translateZ(z)
skew skew(x-angle,y-angle)   skewX(angle) skewY(angle)  


transition 平滑过渡

  • transition-property：           变换的属性（none(没有属性改变)、all(所有属性改变)、具体属性）
  • transition-duration：           变换持续时间,单位为秒或毫秒
  • transition-timing-function： 变换的速率（ease:(逐渐变慢)、linear:(匀速)、ease-in:(加速)、ease-out:(减速)、ease-in-out:(加速然后减速)、cubic-bezier:(自定义时间曲线））
  • transition-delay：               变换延迟时间
  • transition：                        缩写
【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/lijuanhu321/p/7241833.html