CSS：

一.基础修饰

1.id和class选择器。

  • id：用#id名声明，作用于所有该id

    1
    2
    3
    4
    5
    6
    <style>
    #aa{
    		//设置
    }
    </style>
    <p id = 'aa'>

  • class：用.类名声明，作用于所有该类

    1
    2
    3
    4
    5
    6
    <style>
    .aa{
    		//设置
    }
    </style>
    <p class = 'aa'>

  • 标签：用标签名声明，作用于所有该标签

2.背景background

  • background-color： 设置背景颜色

    1
    {background-color:#6495ed;}

    颜色表示方法：

    • 十六进制 - 如：”#ff0000”
    • RGB - 如：”rgb(255,0,0)”
    • 颜色名称 - 如：”red”

  • background-image：设置背景图

    1
    background-image:url('test.jpg');

  • background-repeat：设置水平或垂直平铺

    1
    2
    3
    background-repeat:repeat-x;   //水平平铺
    background-repeat:repeat-y;   //垂直平铺
    background-repeat:no-repeat;  //默认

  • background-attachment：设置背景滚动或固定。

  • background-position：设置背景起始位置。

3.text文本

  • 文本颜色：color:

  • 文本对齐方式：

    1
    text-align:(left,centor,right)   //靠左，居中，靠右对齐

  • 文本修饰：下划线text-decoration

    1
    text-decoration:(overline,line-through,underline)  //上划线，中线，下划线

  • 文本转换：转换大小写text-transform

    1
    text-transform:(uppercase,lowercase,capitalize)    //大写，小写，首字母大写

  • 文本缩进：文本的第一行的缩进。text-indent:50px;

4.font字体

  • font-family: 字体类型
  • font-size: 字体大小

5.链接

用于修饰a标签：

  • a:link - 正常，未访问过的链接
  • a:visited - 用户已访问过的链接
  • a:hover - 当用户鼠标放在链接上时
  • a:active - 链接被点击的那一刻

6.列表

  • 无序列表 ul - 列表项标记用特殊图形（如小黑点、小方框等）
  • 有序列表 ol - 列表项的标记有数字或字母

​ 设置：

  • list-style-type ：（circle，square,upper-roman,lower-alpha)
  • list-style-position
  • list-style-image

7.Table表格

1
border: 1px solid（实线） black;  依次设置框间距，线条，颜色

border-collapse 属性设置表格的边框是否被折叠成一个单一的边框或隔开：

1
border-collapse: collapse;  //设置表格框为单线。

二.盒子模型

image-20220522110846172

  • Margin(外边距) - 清除边框外的区域，外边距是透明的。
  • Border(边框) - 围绕在内边距和内容外的边框。
  • Padding(内边距) - 清除内容周围的区域，内边距是透明的。
  • Content(内容) - 盒子的内容，显示文本和图像。

实例：

1
2
3
4
5
6
7
div {
    width: 300px;      
    border: 25px solid green;         
    padding: 25px;                
    margin: 25px;
}
//该盒子的总宽度为300 + 50 + 50 + 50 = 450px

1.border:

  • border-style
  • border-color
  • border-width
  • border-top/right/bottom/left：框上下左右边分别设置。

2.轮廓outline

轮廓（outline）是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

image-20220522111332049

  • outline-color
  • outline-style
  • outline-width

3.margin/padding

image-20220522111449426

margin上下左右间距：margin-top:100px; margin-bottom:100px; margin-right:50px; margin-left:50px;

margin: auto：元素宽度居中对齐。

padding上下左右键距：padding-top:25px;padding-bottom:25px;padding-right:50px;padding-left:50px;

padding : auto: 垂直居中。

三.

1.display(显示) 与 visibility（可见性）

隐藏元素 - display:none或visibility:hidden

隐藏一个元素可以通过把display属性设置为”none”，或把visibility属性设置为”hidden”。但是请注意，这两种方法会产生不同的结果。

visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间。也就是说，该元素虽然被隐藏了，但仍然会影响布局。

块元素是一个元素，占用了全部宽度，在前后都是换行符。

块元素的例子：

内联元素只需要必要的宽度，不强制换行。

内联元素的例子：

下面的示例把列表项显示为内联元素：(li每一项在同一行显示。)

1
li {display:inline;}

下面的示例把span元素作为块元素：

1
span {display:block;}

2.position定位

  • static ：

    HTML 元素的默认值，即没有定位，遵循正常的文档流对象。

    静态定位的元素不会受到 top, bottom, left, right影响。

  • relative

    相对定位元素的定位是相对其正常位置。

  • fixed

    元素的位置相对于浏览器窗口是固定位置。

    即使窗口是滚动的它也不会移动：

  • absolute

    绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于

  • sticky

    基于用户的滚动位置来定位。

    使用:

1
2
3
4
5
6
div
{
    position:absolute;             //首先表明位置类型，然后设置间距
    left:100px;
    top:150px;
}

3.Overflow布局

overflow：

visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

4.float浮动

元素的水平方向浮动，意味着元素只能左右移动而不能上下移动。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

1
2
3
4
img 
{
    float:right;      //图片浮动到右边
}