初学入门 html/css 的有用知识点简单总结（二）

本文链接：https://blog.youkuaiyun.com/Eternity_matt/article/details/108125783

本文精炼总结了CSS全局样式设计、文字样式、鼠标指针、图片、边框、边距、伪类、定位与浮动等关键知识点，适用于初学者快速掌握CSS核心技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

往期链接初学入门 html/css 的有用知识点简单总结（一）

css部分样式

一. 全局样式设计

外部样式引入

<link rel="stylesheet" href="../外部样式.css">

全局通用样式

  * {
            padding: 0px;
            margin: 0px;
            list-style: none;
            font-style: normal;
            font-size: 12px;

        }

 a {
            text-decoration: none;
        }

全局常用样式

    /* 设置边框颜色 */
.red {
    border: 1px solid red;
}
.blue {
    border: 1px solid blue;
}
.black {
    border: 1px solid black;
}
.yellow {
    border: 1px solid yellow;
}
.flex {
    display: flex;
    flex-direction: row;
    /* 设置flex布局 布局的排列方向为横向 */
}
.j_s_a {
    justify-content: space-around;
    /* 项目位于各行之前、之间、之后都留有空白的容器内。 */
}

.j_s_b {
    word-wrap: wrap;
    justify-content: space-between;
    /* 项目位于各行之间留有空白的容器内。 */
}

.b_s {
    box-sizing: border-box;
    /* 设置box的尺寸为边框限制的尺寸 */
}

.j_c {
    justify-content: center;

    /* 项目位于容器的中心。 */
}
.j_s{
    justify-content: start;
    /* 设置项目从开始方向排列。 */
}
.a_c {
    text-align: center;
    /* 文字居中 */
}
.container {
    width: 1226px;
    margin: 0 auto 0;

}

常用的文字样式

设置字体 font-family

设置斜体 font-style：italic；

设置字体粗细 font-weight: lighter;\bold;\ bolder;\100-900;

设置文本的行高 line-height: 30px;

设置文本的颜色 color:#00ff00;

字体换行 word-wrap: break-word;

指定段字之间的空间 word-spacing:30px;

设置文本缩进 text-indent:30px;

   设置文字的线为无样式 text-decoration: none;
   设置文字的线为下划线   text-decoration: underline;
   设置文字的线为上划线   text-decoration: overline;
   设置文字的线为穿过文本的线\   text-decoration: line-through;

设置盒子阴影 text-shadow: 5px 5px 5px #FF0000;

添加滚动条 overflow: scroll;
根据实际情况，添加滚动条 overflow: auto;

常用的鼠标指针样式

   鼠标光标为默认样式：箭头 cursor: default;
   鼠标光标在p上的时候设置为移动 cursor: move;
   鼠标光标在p上的时候设置为小手 cursor: pointer;

常用的图片样式

插入图片 background-image: url("./img/123.jpg");

设置页面背景颜色 background-color: pink;

background-size: 1000px 1000px; 分别设置图片的宽和高

设置图片的x y轴 background-position: X Y;

设置图片自动贴合背景大小 background-size: cover;

设置背景图片不重复的 background-repeat: no-repeat;

设置背景图片大小 background-size:80px 60px;

设置背景图像的相对位置的内容框 background-origin:content-box;

背景剪裁属性是从指定位置开始绘制 background-clip

   调节图片后的文字位置
   （底部） vertical-align: bottom;
   （顶部）vertical-align: top;
（中间） vertical-align: middle;

常用的边框和边距样式

指定每个圆角 border-radius: 15px 50px 30px 5px:

设置边框属性 border:2px solid #a1a1a1;

设置外边距属性 Margin: 10px 10px 10px auto；

设置外边距属性 Margin: 上右下左：自动；

设置内边距属性 Margin: 10px 10px 10px 20%；

设置内边距属性 padding: 上右下左：20%；

利用边框画三角形： .delta {
      background-color: transparent;
      border-width: 10px;
      border: tomato solid 100px;

border-color: red transparent yellow transparent; (transoarent 透明色)

width: 0px;
height: 0px;

}

画四分之圆如何画
.banyuan1 {
   background-color: red;
border: tomato solid;
width: 100px;
   height: 100px;
   border-radius: 100px 00px 0px 00px;

}

常用的伪类

a的链接属性

/* 未访问的链接 */ a:link {color:#FF0000;}
/* 已访问的链接 */ a:visited {color:#00FF00;}
/* 鼠标划过链接 */ a:hover {color:#FF00FF;}
/* 已选中的链接 */ a:active {color:#0000FF;}

选择元素输入后具有焦点 input:focus

选择每个<p> 元素的第一个字母 p:first-letter

选择每个<p> 元素的第一行 p:first-line

在每个<p>元素之前插入内容 p:before

在每个<p>元素之后插入内容 p:after

子代选择器 outer>p 直接选择outer中的一个叫p的元素

后代选择器 outer p 选择outer中所有的p元素

选择第一个标签  在大类之中 div p:first-of-type {color: hotpink;}
选择最后一个标签  在大类之中 div p:last-of-type {color: hotpink;}
选择第n个标签  在大类之中 div p:nth-of-type(3) {color: gainsboro; }

否定选择器 div p:not(.fouding){ }

交集选择器 div.p{ }

并集选择器 div，p,h1,h2{ }

属性选择器 [title~=hello] { color:blue; }

/*超出部分添加省略号 */

overflow: hidden;

text-overflow: ellipsis;

white-space: normal;

常用的定位和浮动

定位分三种：1.绝对定位 2.相对定位 3. 固定定位

1.绝对定位（相对于自己定位脱离文档流根据父代的绝对定位来对自己定位（如果父代没有相对就根据浏览器相对））

position:absolute;

h2
{
position:absolute;
left:100px;
top:150px;
}

2.相对定位（相对定位元素的定位是相对其正常位置。可以移动的相对定位元素的内容和相互重叠的元素，它原本所占的空间不会改变。）

position:relative;;

h2.pos_left
{
position:relative;
left:-20px;
}
h2.pos_right
{
position:relative;
left:20px;
}

3.固定定位（元素的位置相对于浏览器窗口是固定位置。即使窗口是滚动的它也不会移动：）

position:fixed;

p.pos_fixed
{
position:fixed;
top:30px;
right:5px;
}

4.绝对轴定位（指定了一个元素的堆叠顺序数字越高，文件位置越靠上）

img
{
position:absolute;
left:0px;
top:0px;
z-index:1;
}

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

浮动之后文字将脱离文档流如果相邻相仿的元素一起浮动，就会导致他们彼此相邻

向左浮动 float:left;

向右浮动 float:right;

清除浮动 clear:both;